scichart 2.2.2417 → 3.0.0-beta.224

package/Charting/Visuals/Annotations/AnnotationBase.js

@@ -10,16 +10,22 @@ var XyDirection_1 = require("../../../types/XyDirection");
 var guid_1 = require("../../../utils/guid");
 var translate_1 = require("../../../utils/translate");
 var AxisCore_1 = require("../Axis/AxisCore");
+var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
+var AnnotationClickEventArgs_1 = require("./AnnotationClickEventArgs");
 var AnnotationDragDeltaEventArgs_1 = require("./AnnotationDragDeltaEventArgs");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var EDraggingGripPoint;
 (function (EDraggingGripPoint) {
-    EDraggingGripPoint["Point1"] = "Point1";
-    EDraggingGripPoint["Point2"] = "Point2";
-    EDraggingGripPoint["Point3"] = "Point3";
-    EDraggingGripPoint["Point4"] = "Point4";
+    /** x1,y1 */
+    EDraggingGripPoint["x1y1"] = "x1y1";
+    /** x2,y1 */
+    EDraggingGripPoint["x2y2"] = "x2y2";
+    /** x1,y2 */
+    EDraggingGripPoint["x2y1"] = "x2y1";
+    /** x2,y2 */
+    EDraggingGripPoint["x1y2"] = "x1y2";
     EDraggingGripPoint["Body"] = "Body";
 })(EDraggingGripPoint = exports.EDraggingGripPoint || (exports.EDraggingGripPoint = {}));
 /**
@@ -59,7 +65,7 @@ var AnnotationBase = /** @class */ (function () {
      * @param options optional parameters of type {@link IAnnotationBaseOptions} used to configure the annotation at construct time
      */
     function AnnotationBase(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         this.showWarning = true;
         this.prevIsSelected = true;
         /** the annotation absolute coordinates */
@@ -71,6 +77,19 @@ var AnnotationBase = /** @class */ (function () {
         };
         this.typeMap = new Map();
         this.isHiddenProperty = false;
+        this.annotationsGripsStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBorderBrush;
+        this.annotationsGripsFillProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationsGripsBackroundBrush;
+        this.annotationsGripsRadiusProperty = constants_1.ADORNER_GRIP_RADIUS;
+        this.selectionBoxStrokeProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.annotationSelectionStroke;
+        this.selectionBoxDeltaProperty = 1.5;
+        this.selectionBoxThicknessProperty = 6;
+        this.dragPointsProperty = [
+            EDraggingGripPoint.Body,
+            EDraggingGripPoint.x1y1,
+            EDraggingGripPoint.x2y2,
+            EDraggingGripPoint.x2y1,
+            EDraggingGripPoint.x1y2
+        ];
         this.annotationLayerProperty = IAnnotation_1.EAnnotationLayer.AboveChart;
         this.isEditableProperty = false;
         this.xAxisIdProperty = AxisCore_1.AxisCore.DEFAULT_AXIS_ID;
@@ -83,6 +102,8 @@ var AnnotationBase = /** @class */ (function () {
         this.dragStarted = new EventHandler_1.EventHandler();
         this.dragEnded = new EventHandler_1.EventHandler();
         this.dragDelta = new EventHandler_1.EventHandler();
+        this.selectedChanged = new EventHandler_1.EventHandler();
+        this.clicked = new EventHandler_1.EventHandler();
         this.annotationLayerProperty = (_b = options === null || options === void 0 ? void 0 : options.annotationLayer) !== null && _b !== void 0 ? _b : this.annotationLayerProperty;
         this.resizeDirectionsProperty = (_c = options === null || options === void 0 ? void 0 : options.resizeDirections) !== null && _c !== void 0 ? _c : this.resizeDirectionsProperty;
         this.isEditableProperty = (_d = options === null || options === void 0 ? void 0 : options.isEditable) !== null && _d !== void 0 ? _d : this.isEditableProperty;
@@ -97,6 +118,13 @@ var AnnotationBase = /** @class */ (function () {
         this.yCoordinateModeProperty = (_o = options === null || options === void 0 ? void 0 : options.yCoordinateMode) !== null && _o !== void 0 ? _o : this.yCoordinateModeProperty;
         this.isSelectedProperty = (_p = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _p !== void 0 ? _p : this.isSelectedProperty;
         this.opacityProperty = (_q = options === null || options === void 0 ? void 0 : options.opacity) !== null && _q !== void 0 ? _q : 1.0;
+        this.annotationsGripsStrokeProperty = (_r = options === null || options === void 0 ? void 0 : options.annotationsGripsStroke) !== null && _r !== void 0 ? _r : this.annotationsGripsStrokeProperty;
+        this.annotationsGripsFillProperty = (_s = options === null || options === void 0 ? void 0 : options.annotationsGripsFill) !== null && _s !== void 0 ? _s : this.annotationsGripsFillProperty;
+        this.annotationsGripsRadiusProperty = (_t = options === null || options === void 0 ? void 0 : options.annotationsGripsRadius) !== null && _t !== void 0 ? _t : this.annotationsGripsRadius;
+        this.selectionBoxStroke = (_u = options === null || options === void 0 ? void 0 : options.selectionBoxStroke) !== null && _u !== void 0 ? _u : this.selectionBoxStrokeProperty;
+        this.selectionBoxDelta = (_v = options === null || options === void 0 ? void 0 : options.selectionBoxDelta) !== null && _v !== void 0 ? _v : this.selectionBoxDeltaProperty;
+        this.selectionBoxThickness = (_w = options === null || options === void 0 ? void 0 : options.selectionBoxThickness) !== null && _w !== void 0 ? _w : this.selectionBoxThicknessProperty;
+        this.dragPointsProperty = (_x = options === null || options === void 0 ? void 0 : options.dragPoints) !== null && _x !== void 0 ? _x : this.dragPointsProperty;
         if (options === null || options === void 0 ? void 0 : options.onDragStarted) {
             if (typeof options.onDragStarted === "string") {
                 this.typeMap.set("onDragStarted", options.onDragStarted);
@@ -124,6 +152,15 @@ var AnnotationBase = /** @class */ (function () {
                 this.dragDelta.subscribe(options.onDrag);
             }
         }
+        if (options === null || options === void 0 ? void 0 : options.onClick) {
+            if (typeof options.onClick === "string") {
+                this.typeMap.set("onClick", options.onClick);
+                this.clicked.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onClick));
+            }
+            else {
+                this.clicked.subscribe(options.onClick);
+            }
+        }
     }
     Object.defineProperty(AnnotationBase.prototype, "annotationLayer", {
         /** @inheritDoc */
@@ -308,9 +345,8 @@ var AnnotationBase = /** @class */ (function () {
     Object.defineProperty(AnnotationBase.prototype, "isVerticalChart", {
         /** @inheritDoc */
         get: function () {
-            var _this = this;
-            var xAxis = this.parentSurface.xAxes.asArray().find(function (a) { return a.id === _this.xAxisId; });
-            return xAxis.isVerticalChart;
+            var xAxis = this.parentSurface.getXAxisById(this.xAxisId);
+            return xAxis === null || xAxis === void 0 ? void 0 : xAxis.isVerticalChart;
         },
         enumerable: false,
         configurable: true
@@ -339,22 +375,98 @@ var AnnotationBase = /** @class */ (function () {
         set: function (value) {
             if (this.isSelectedProperty !== value) {
                 this.isSelectedProperty = value;
+                this.selectedChanged.raiseEvent(this.isSelectedProperty);
                 this.notifyPropertyChanged(constants_1.PROPERTY.IS_SELECTED);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(AnnotationBase.prototype, "opacity", {
+    Object.defineProperty(AnnotationBase.prototype, "annotationsGripsStroke", {
         /** @inheritDoc */
         get: function () {
-            return this.opacityProperty;
+            return this.annotationsGripsStrokeProperty;
         },
         /** @inheritDoc */
-        set: function (opacity) {
-            if (this.opacityProperty !== opacity) {
-                this.opacityProperty = opacity;
-                this.notifyPropertyChanged(constants_1.PROPERTY.OPACITY);
+        set: function (color) {
+            if (this.annotationsGripsStrokeProperty !== color) {
+                this.annotationsGripsStrokeProperty = color;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ADORNER_STROKE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnnotationBase.prototype, "annotationsGripsFill", {
+        /** @inheritDoc */
+        get: function () {
+            return this.annotationsGripsFillProperty;
+        },
+        /** @inheritDoc */
+        set: function (color) {
+            if (this.annotationsGripsFillProperty !== color) {
+                this.annotationsGripsFillProperty = color;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ADORNER_FILL);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnnotationBase.prototype, "annotationsGripsRadius", {
+        /** @inheritDoc */
+        get: function () {
+            return this.annotationsGripsRadiusProperty;
+        },
+        /** @inheritDoc */
+        set: function (radius) {
+            if (this.annotationsGripsRadiusProperty !== radius) {
+                this.annotationsGripsRadiusProperty = radius;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ADORNER_RADIUS);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnnotationBase.prototype, "selectionBoxStroke", {
+        /** @inheritDoc */
+        get: function () {
+            return this.selectionBoxStrokeProperty;
+        },
+        /** @inheritDoc */
+        set: function (color) {
+            if (this.selectionBoxStrokeProperty !== color) {
+                this.selectionBoxStrokeProperty = color;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SELECTION_STROKE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnnotationBase.prototype, "selectionBoxDelta", {
+        /** @inheritDoc */
+        get: function () {
+            return this.selectionBoxDeltaProperty;
+        },
+        /** @inheritDoc */
+        set: function (delta) {
+            if (this.selectionBoxDeltaProperty !== delta) {
+                this.selectionBoxDeltaProperty = delta;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SELECTION_DELTA);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AnnotationBase.prototype, "selectionBoxThickness", {
+        /** @inheritDoc */
+        get: function () {
+            return this.selectionBoxThicknessProperty;
+        },
+        /** @inheritDoc */
+        set: function (delta) {
+            if (this.selectionBoxThicknessProperty !== delta) {
+                this.selectionBoxThicknessProperty = delta;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SELECTION_DELTA);
             }
         },
         enumerable: false,
@@ -367,6 +479,21 @@ var AnnotationBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AnnotationBase.prototype, "opacity", {
+        /** @inheritDoc */
+        get: function () {
+            return this.opacityProperty;
+        },
+        /** @inheritDoc */
+        set: function (opacity) {
+            if (this.opacityProperty !== opacity) {
+                this.opacityProperty = opacity;
+                this.notifyPropertyChanged(constants_1.PROPERTY.OPACITY);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AnnotationBase.prototype, "svgAdornerRoot", {
         get: function () {
             return this.svgAdornerRootProperty;
@@ -385,8 +512,39 @@ var AnnotationBase = /** @class */ (function () {
             this.isSelected = false;
             this.parentSurface.adornerLayer.deselectAnnotation(this);
         }
+        this.selectedChanged.unsubscribeAll();
         this.deleteAdorner();
     };
+    /** Get the dragging points that should be enabled for this annotation */
+    AnnotationBase.prototype.getDragPoints = function () {
+        return this.dragPointsProperty;
+    };
+    /** Set the dragging points that should be enabled for this annotation */
+    AnnotationBase.prototype.setDragPoints = function (dragPoints) {
+        this.dragPointsProperty = dragPoints;
+        this.notifyPropertyChanged(constants_1.PROPERTY.DRAGPOINTS);
+    };
+    /** Called internally. Send a click to the annotation if the point is in bounds, raising the clicked event and optionally selecting the annotation. */
+    AnnotationBase.prototype.click = function (args, selectOnClick) {
+        var xyPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect, true);
+        if (!xyPoint) {
+            return false;
+        }
+        if (this.checkIsClickedOnAnnotationInternal(xyPoint.x, xyPoint.y)) {
+            var borders = this.getAdornerAnnotationBorders(true);
+            var x = args.mousePoint.x / DpiHelper_1.DpiHelper.PIXEL_RATIO;
+            var y = args.mousePoint.y / DpiHelper_1.DpiHelper.PIXEL_RATIO;
+            var relativeCoords = new Point_1.Point(x - borders.x1, y - borders.y1);
+            this.isSelected = selectOnClick;
+            this.clicked.raiseEvent(new AnnotationClickEventArgs_1.AnnotationClickEventArgs(this, args, relativeCoords));
+            return this.isSelected;
+        }
+        else {
+            this.isSelected = false;
+        }
+        return this.isSelected;
+    };
+    /** Called internally. Select the annotation if the point is in bounds.  Does not raise the clicked event */
     AnnotationBase.prototype.clickToSelect = function (args) {
         var xyPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect, true);
         if (!xyPoint) {
@@ -456,6 +614,7 @@ var AnnotationBase = /** @class */ (function () {
             onDrag: this.typeMap.get("onDrag"),
             onDragEnded: this.typeMap.get("onDragEnded"),
             onDragStarted: this.typeMap.get("onDragStarted"),
+            onClick: this.typeMap.get("onClick"),
             opacity: this.opacity,
             resizeDirections: this.resizeDirections,
             x1: this.x1Property,
@@ -465,7 +624,14 @@ var AnnotationBase = /** @class */ (function () {
             xAxisId: this.xAxisId,
             yAxisId: this.yAxisId,
             xCoordinateMode: this.xCoordinateMode,
-            yCoordinateMode: this.yCoordinateMode
+            yCoordinateMode: this.yCoordinateMode,
+            annotationsGripsStroke: this.annotationsGripsStroke,
+            annotationsGripsFill: this.annotationsGripsFill,
+            annotationsGripsRadius: this.annotationsGripsRadius,
+            selectionBoxStroke: this.selectionBoxStroke,
+            selectionBoxDelta: this.selectionBoxDelta,
+            selectionBoxThickness: this.selectionBoxThickness,
+            dragPoints: this.dragPointsProperty
         };
         return { type: this.type, options: options };
     };
@@ -473,20 +639,47 @@ var AnnotationBase = /** @class */ (function () {
      * Returns annotationBorders
      * @param ordered flag to return x and y values in ascending order, where x1 <= x2 and y1 <= y2
      */
-    AnnotationBase.prototype.getAnnotationBorders = function (ordered) {
+    AnnotationBase.prototype.getAnnotationBorders = function (ordered, applyDelta) {
+        var _a, _b;
         if (ordered === void 0) { ordered = false; }
-        if (!ordered)
+        if (applyDelta === void 0) { applyDelta = false; }
+        if (!ordered && !applyDelta)
             return this.annotationBorders;
-        var _a = this.annotationBorders, x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-        if (x2 < x1) {
-            var t = x1;
-            x1 = x2;
-            x2 = t;
+        var _c = this.annotationBorders, x1 = _c.x1, x2 = _c.x2, y1 = _c.y1, y2 = _c.y2;
+        var delta = applyDelta ? this.selectionBoxDelta : 0;
+        if (ordered) {
+            if (x2 < x1) {
+                _a = [x2 - delta, x1 + delta], x1 = _a[0], x2 = _a[1];
+            }
+            else {
+                x1 -= delta;
+                x2 += delta;
+            }
+            if (y2 < y1) {
+                _b = [y2 - delta, y1 + delta], y1 = _b[0], y2 = _b[1];
+            }
+            else {
+                y1 -= delta;
+                y2 += delta;
+            }
         }
-        if (y2 < y1) {
-            var t = y1;
-            y1 = y2;
-            y2 = t;
+        else {
+            if (x2 < x1) {
+                x1 += delta;
+                x2 -= delta;
+            }
+            else {
+                x1 -= delta;
+                x2 += delta;
+            }
+            if (y2 < y1) {
+                y1 += delta;
+                y2 -= delta;
+            }
+            else {
+                y1 -= delta;
+                y2 += delta;
+            }
         }
         return { x1: x1, x2: x2, y1: y1, y2: y2 };
     };
@@ -494,9 +687,10 @@ var AnnotationBase = /** @class */ (function () {
      * Returns annotation borders for the {@link AdornerLayer} which has the size of the whole canvas
      * @param ordered flag to return x and y values in ascending order
      */
-    AnnotationBase.prototype.getAdornerAnnotationBorders = function (ordered) {
+    AnnotationBase.prototype.getAdornerAnnotationBorders = function (ordered, applyDelta) {
         if (ordered === void 0) { ordered = false; }
-        var borders = this.getAnnotationBorders(ordered);
+        if (applyDelta === void 0) { applyDelta = false; }
+        var borders = this.getAnnotationBorders(ordered, applyDelta);
         var x1 = this.isSvgAnnotation ? borders.x1 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.x1;
         var x2 = this.isSvgAnnotation ? borders.x2 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.x2;
         var y1 = this.isSvgAnnotation ? borders.y1 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.y1;
@@ -510,6 +704,22 @@ var AnnotationBase = /** @class */ (function () {
             y2: point2.y / DpiHelper_1.DpiHelper.PIXEL_RATIO
         };
     };
+    /** Get svg for the adorner grip handles for standard annotations */
+    AnnotationBase.prototype.getAnnotationGripSvg = function (x, y) {
+        return "<circle cx=\"".concat(x, "\" cy=\"").concat(y, "\" r=\"").concat(this.annotationsGripsRadius, "\" fill=\"").concat(this.annotationsGripsFill, "\" stroke=\"").concat(this.annotationsGripsStroke, "\"/>");
+    };
+    /** Override this to disable drag behaviour for certain dragging points */
+    AnnotationBase.prototype.canDragPoint = function (dragPoint) {
+        return this.dragPointsProperty.includes(dragPoint);
+    };
+    /**
+     * Gets the svg string for the adorner for standard annotations.  Called by updateAdornerInner.
+     * Coordinates passed in are the top left and bottom right of the bounding box.
+     * To get the bounding coordinates in their original order call this.getAdornerAnnotationBorders(false, true);
+     */
+    AnnotationBase.prototype.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
+    };
     /**
      * @summary Notifies subscribers of {@link AnnotationBase.propertyChanged} that a property has changed and the chart requires redrawing
      * @description SciChart provides fully reactive components, changing any property or changing data will cause the {@link AnnotationBase} to

package/Charting/Visuals/Annotations/AnnotationClickEventArgs.d.ts

@@ -0,0 +1,11 @@
+import { Point } from "../../../Core/Point";
+import { ModifierMouseArgs } from "../../ChartModifiers/ModifierMouseArgs";
+import { AnnotationBase } from "./AnnotationBase";
+export declare class AnnotationClickEventArgs {
+    sender: AnnotationBase;
+    /** The mouse arguments for the click event */
+    mouseArgs: ModifierMouseArgs;
+    /** The coordinates where the click took place, relative to the top left of the annotation */
+    relativeCoords: Point;
+    constructor(sender: AnnotationBase, mouseArgs: ModifierMouseArgs, relativeCoords: Point);
+}

package/Charting/Visuals/Annotations/AnnotationClickEventArgs.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnnotationClickEventArgs = void 0;
+var AnnotationClickEventArgs = /** @class */ (function () {
+    function AnnotationClickEventArgs(sender, mouseArgs, relativeCoords) {
+        this.sender = sender;
+        this.mouseArgs = mouseArgs;
+        this.relativeCoords = relativeCoords;
+    }
+    return AnnotationClickEventArgs;
+}());
+exports.AnnotationClickEventArgs = AnnotationClickEventArgs;

package/Charting/Visuals/Annotations/AxisMarkerAnnotation.d.ts

@@ -201,6 +201,7 @@ export declare class AxisMarkerAnnotation extends RenderContextAnnotationBase {
     };
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;
     protected updateAdornerInner(): void;
+    protected svgStringAdornerTemplate: (x1: number, y1: number, x2: number, y2: number) => string;
     /**
      * Calculates the adorner center relative to the canvas,
      * The coordinates are not scaled

package/Charting/Visuals/Annotations/AxisMarkerAnnotation.js

@@ -46,8 +46,9 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IAxisMarkerAnnotationOptions} which configure the annotation upon construction
      */
     function AxisMarkerAnnotation(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation;
         _this.fontSizeProperty = 14;
@@ -56,6 +57,13 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
         _this.fontStyleProperty = "Normal";
         _this.colorProperty = "#FFFFFF";
         _this.backgroundColorProperty = "#b36200";
+        _this.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
+            var colorLine = _this.selectionBoxStroke;
+            var _a = _this.calculateAdornerCenter(), x = _a.x, y = _a.y;
+            var width = x2 - x1;
+            var height = y2 - y1;
+            return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"".concat(x1, "\" y=\"").concat(y1, "\" width=\"").concat(width, "\" height=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(_this.selectionBoxThickness, "px\" fill=\"none\" />\n        ").concat(_this.getAnnotationGripSvg(x, y), "\n        </svg>");
+        };
         _this.fontSizeProperty = (_a = options === null || options === void 0 ? void 0 : options.fontSize) !== null && _a !== void 0 ? _a : _this.fontSizeProperty;
         _this.fontFamilyProperty = (_b = options === null || options === void 0 ? void 0 : options.fontFamily) !== null && _b !== void 0 ? _b : _this.fontFamilyProperty;
         _this.fontWeightProperty = (_c = options === null || options === void 0 ? void 0 : options.fontWeight) !== null && _c !== void 0 ? _c : _this.fontWeightProperty;
@@ -315,7 +323,7 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
         var yAxisId = this.yAxisId;
         var yAxis = this.parentSurface.getYAxisById(yAxisId);
         var axisWithMarker = isX1CoordinateUndefined ? yAxis : xAxis;
-        if (axisWithMarker.isVisible === false)
+        if (!axisWithMarker || axisWithMarker.isVisible === false)
             return;
         var coordinateMode = isX1CoordinateUndefined ? this.yCoordinateMode : this.xCoordinateMode;
         var coordinateCalculator = isX1CoordinateUndefined ? yCalc : xCalc;
@@ -350,8 +358,8 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
         if (xyMousePoint) {
             if (xyAdorner) {
                 var dist = (0, pointUtil_1.calcDistance)(xyAdorner.x, xyAdorner.y, xyMousePoint.x, xyMousePoint.y);
-                if (dist < constants_1.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                    this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point1;
+                if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                    this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
                     return true;
                 }
             }
@@ -367,11 +375,11 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
             this.prevValue = xyValues;
             return;
         }
-        if (this.x1) {
-            this.x1 = xyValues.x;
+        if (this.x1 !== undefined) {
+            this.x1 -= this.prevValue.x - xyValues.x;
         }
-        else if (this.y1) {
-            this.y1 = xyValues.y;
+        else if (this.y1 !== undefined) {
+            this.y1 -= this.prevValue.y - xyValues.y;
         }
         this.prevValue = xyValues;
     };
@@ -397,9 +405,8 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
     AxisMarkerAnnotation.prototype.updateAdornerInner = function () {
         this.deleteAdorner();
         if (this.isSelected) {
-            var _a = this.getAdornerAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-            var _b = this.calculateAdornerCenter(), x = _b.x, y = _b.y;
-            var svgString = svgStringAdornerTemplate(x1, y1, x2, y2, x, y);
+            var _a = this.getAdornerAnnotationBorders(true, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+            var svgString = this.svgStringAdornerTemplate(x1, y1, x2, y2);
             var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
             this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
@@ -418,11 +425,3 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
     return AxisMarkerAnnotation;
 }(RenderContextAnnotationBase_1.RenderContextAnnotationBase));
 exports.AxisMarkerAnnotation = AxisMarkerAnnotation;
-/** @ignore */
-var svgStringAdornerTemplate = function (x1, y1, x2, y2, x, y) {
-    var colorLine = "#f00e0e66";
-    var adornerFill = "#CDCDCD22";
-    var adornerStroke = "#CDCDCD99";
-    var delta = 1;
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"".concat(x1 - delta, "\" y1=\"").concat(y1, "\" x2=\"").concat(x2 + delta, "\" y2=\"").concat(y1, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(2 * delta, "\" />\n  <line x1=\"").concat(x2, "\" y1=\"").concat(y1 + delta, "\" x2=\"").concat(x2, "\" y2=\"").concat(y2 - delta, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(2 * delta, "\" />\n  <line x1=\"").concat(x1 - delta, "\" y1=\"").concat(y2, "\" x2=\"").concat(x2 + delta, "\" y2=\"").concat(y2, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(2 * delta, "\" />\n  <line x1=\"").concat(x1, "\" y1=\"").concat(y1 + delta, "\" x2=\"").concat(x1, "\" y2=\"").concat(y2 - delta, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(2 * delta, "\" />\n  <circle cx=\"").concat(x, "\" cy=\"").concat(y, "\" r=\"").concat(constants_1.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n</svg>");
-};

package/Charting/Visuals/Annotations/BoxAnnotation.d.ts

@@ -96,5 +96,6 @@ export declare class BoxAnnotation extends RenderContextAnnotationBase {
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;
     protected notifyPropertyChanged(propertyName: string): void;
     protected updateAdornerInner(): void;
+    protected svgStringAdornerTemplate: (x1: number, y1: number, x2: number, y2: number) => string;
     private drawWithProvider;
 }