scichart 2.2.2416 → 3.0.0-beta.224

package/Charting/Visuals/Annotations/BoxAnnotation.js

@@ -30,7 +30,6 @@ var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var AnnotationBase_1 = require("./AnnotationBase");
 var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
-var constants_2 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var RenderContextAnnotationBase_1 = require("./RenderContextAnnotationBase");
 /**
@@ -51,11 +50,33 @@ var BoxAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IBoxAnnotationOptions} which configure the annotation upon construction
      */
     function BoxAnnotation(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextBoxAnnotation;
         _this.strokeThicknessProperty = 1;
+        _this.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
+            var colorLine = _this.selectionBoxStroke;
+            var width = x2 - x1;
+            var height = y2 - y1;
+            var svg = "<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        ");
+            var grips = _this.getAdornerAnnotationBorders(false, true);
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
+                svg += _this.getAnnotationGripSvg(grips.x1, grips.y1);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
+                svg += _this.getAnnotationGripSvg(grips.x2, grips.y2);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y1)) {
+                svg += _this.getAnnotationGripSvg(grips.x2, grips.y1);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y2)) {
+                svg += _this.getAnnotationGripSvg(grips.x1, grips.y2);
+            }
+            svg += "</svg>";
+            return svg;
+        };
         _this.stroke = (_a = options === null || options === void 0 ? void 0 : options.stroke) !== null && _a !== void 0 ? _a : "#ffffff";
         _this.strokeThickness = (_b = options === null || options === void 0 ? void 0 : options.strokeThickness) !== null && _b !== void 0 ? _b : 1;
         _this.fill = (_c = options === null || options === void 0 ? void 0 : options.fill) !== null && _c !== void 0 ? _c : "#777777";
@@ -164,41 +185,38 @@ var BoxAnnotation = /** @class */ (function (_super) {
     };
     BoxAnnotation.prototype.onDragStarted = function (args) {
         _super.prototype.onDragStarted.call(this, args);
-        var _a = annotationHelpers_1.annotationHelpers.calcNewApex(this.x1, this.y1, this.x2, this.y2), point1 = _a.point1, point2 = _a.point2, point3 = _a.point3, point4 = _a.point4;
-        var xyCoord1 = this.getXYCoordinatesFromValues(new Point_1.Point(point1.x, point1.y));
-        var xyCoord2 = this.getXYCoordinatesFromValues(new Point_1.Point(point2.x, point2.y));
-        var xyCoord3 = this.getXYCoordinatesFromValues(new Point_1.Point(point3.x, point3.y));
-        var xyCoord4 = this.getXYCoordinatesFromValues(new Point_1.Point(point4.x, point4.y));
+        var _a = this.getAnnotationBorders(false, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+        var _b = annotationHelpers_1.annotationHelpers.calcNewApex(x1, y1, x2, y2, this.isVerticalChart), x1y1 = _b.x1y1, x2y1 = _b.x2y1, x1y2 = _b.x1y2, x2y2 = _b.x2y2;
         var xyMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(args.mousePoint.x, args.mousePoint.y), this.parentSurface.seriesViewRect);
-        if (xyCoord1) {
-            var dist = (0, pointUtil_1.calcDistance)(xyCoord1.x, xyCoord1.y, args.mousePoint.x, args.mousePoint.y);
-            if (dist < constants_2.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point1;
+        if (x1y1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
+            var dist = (0, pointUtil_1.calcDistance)(x1y1.x, x1y1.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
                 return true;
             }
         }
-        if (xyCoord2) {
-            var dist = (0, pointUtil_1.calcDistance)(xyCoord2.x, xyCoord2.y, args.mousePoint.x, args.mousePoint.y);
-            if (dist < constants_2.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point2;
+        if (x2y1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y1)) {
+            var dist = (0, pointUtil_1.calcDistance)(x2y1.x, x2y1.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y1;
                 return true;
             }
         }
-        if (xyCoord3) {
-            var dist = (0, pointUtil_1.calcDistance)(xyCoord3.x, xyCoord3.y, args.mousePoint.x, args.mousePoint.y);
-            if (dist < constants_2.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point3;
+        if (x1y2 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y2)) {
+            var dist = (0, pointUtil_1.calcDistance)(x1y2.x, x1y2.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y2;
                 return true;
             }
         }
-        if (xyCoord4) {
-            var dist = (0, pointUtil_1.calcDistance)(xyCoord4.x, xyCoord4.y, args.mousePoint.x, args.mousePoint.y);
-            if (dist < constants_2.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point4;
+        if (x2y2 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
+            var dist = (0, pointUtil_1.calcDistance)(x2y2.x, x2y2.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y2;
                 return true;
             }
         }
-        if (xyMousePoint) {
+        if (xyMousePoint && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.Body)) {
             if (this.clickToSelect(args)) {
                 this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Body;
                 return true;
@@ -207,73 +225,65 @@ var BoxAnnotation = /** @class */ (function (_super) {
         return false;
     };
     BoxAnnotation.prototype.calcDragDistance = function (xyValues) {
+        if (!this.prevValue) {
+            this.prevValue = xyValues;
+            return;
+        }
         if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body) {
-            if (!this.prevValue) {
-                this.prevValue = xyValues;
-                return;
-            }
             this.x1 = this.x1 - (this.prevValue.x - xyValues.x);
             this.x2 = this.x2 - (this.prevValue.x - xyValues.x);
             this.y1 = this.y1 - (this.prevValue.y - xyValues.y);
             this.y2 = this.y2 - (this.prevValue.y - xyValues.y);
-            this.prevValue = xyValues;
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point1) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y1) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y2 = this.y2;
-                this.x1 = xyValues.x;
+                this.x1 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x1 = this.x1;
-                this.y2 = xyValues.y;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x1 = xyValues.x;
-                this.y2 = xyValues.y;
+                this.x1 -= this.prevValue.x - xyValues.x;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point2) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y2) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y2 = this.y2;
-                this.x2 = xyValues.x;
+                this.x2 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x2 = this.x2;
-                this.y2 = xyValues.y;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x2 = xyValues.x;
-                this.y2 = xyValues.y;
+                this.x2 -= this.prevValue.x - xyValues.x;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point3) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y1) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y1 = this.y1;
-                this.x2 = xyValues.x;
+                this.x2 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x2 = this.x2;
-                this.y1 = xyValues.y;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x2 = xyValues.x;
-                this.y1 = xyValues.y;
+                this.x2 -= this.prevValue.x - xyValues.x;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point4) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y2) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y1 = this.y1;
-                this.x1 = xyValues.x;
+                this.x1 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x1 = this.x1;
-                this.y1 = xyValues.y;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x1 = xyValues.x;
-                this.y1 = xyValues.y;
+                this.x1 -= this.prevValue.x - xyValues.x;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
         }
+        this.prevValue = xyValues;
     };
     BoxAnnotation.prototype.onDpiChanged = function (args) {
         _super.prototype.onDpiChanged.call(this, args);
@@ -313,8 +323,8 @@ var BoxAnnotation = /** @class */ (function (_super) {
         var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
         this.deleteAdorner();
         if (this.isSelected) {
-            var _a = this.getAdornerAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-            var svgString = svgStringAdornerTemplate(x1, y1, x2, y2);
+            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);
             this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
@@ -361,11 +371,3 @@ var BoxAnnotation = /** @class */ (function (_super) {
     return BoxAnnotation;
 }(RenderContextAnnotationBase_1.RenderContextAnnotationBase));
 exports.BoxAnnotation = BoxAnnotation;
-/** @ignore */
-var svgStringAdornerTemplate = function (x1, y1, x2, y2) {
-    var colorLine = "#f00e0e66";
-    var adornerFill = "#CDCDCD22";
-    var adornerStroke = "#CDCDCD99";
-    var delta = 3;
-    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(x1, "\" cy=\"").concat(y1, "\" r=\"").concat(constants_2.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n  <circle cx=\"").concat(x1, "\" cy=\"").concat(y2, "\" r=\"").concat(constants_2.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n  <circle cx=\"").concat(x2, "\" cy=\"").concat(y1, "\" r=\"").concat(constants_2.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n  <circle cx=\"").concat(x2, "\" cy=\"").concat(y2, "\" r=\"").concat(constants_2.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n</svg>");
-};

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

@@ -64,13 +64,13 @@ export declare class CursorTooltipSvgAnnotation extends SvgAnnotationBase {
     /**
      * @inheritDoc
      */
-    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /** @inheritDoc */
     delete(): void;
     /**
      * @inheritDoc
      */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     private updateTooltip;
     private updateLegendTooltip;
     private updateExternalLegendTooltip;

package/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CursorTooltipSvgAnnotation = void 0;
 var MousePosition_1 = require("../../../types/MousePosition");
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
@@ -30,8 +31,9 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @param options
      */
     function CursorTooltipSvgAnnotation(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
         _this.seriesInfosProperty = [];
@@ -64,14 +66,15 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
          */
         set: function (newSeriesInfos) {
             if (this.seriesInfosProperty && newSeriesInfos) {
+                this.seriesInfosProperty = newSeriesInfos;
                 // Compare infos against the ones for the matching series.  See if any are different
+                // This logic is needed to prevent infinite rerendering
                 if (newSeriesInfos.length !== this.seriesInfosProperty.length ||
                     this.seriesInfosProperty
                         .map(function (seriesInfo) {
                         return seriesInfo.equals(newSeriesInfos.find(function (newSeriesInfo) { return newSeriesInfo.renderableSeries.id === seriesInfo.renderableSeries.id; }));
                     })
                         .some(function (sameSeriesInfo) { return sameSeriesInfo === false; })) {
-                    this.seriesInfosProperty = newSeriesInfos;
                     this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
                 }
             }
@@ -169,7 +172,7 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    CursorTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+    CursorTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var currentMousePosition = this.cursorModifier.getMousePosition();
         if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
             return;
@@ -178,12 +181,12 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
         if (this.svg) {
             this.delete();
         }
-        this.create(xCalc, yCalc);
+        this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
         if (this.placementDivId) {
             this.updateExternalLegendTooltip();
         }
         else {
-            this.updateTooltip();
+            this.updateTooltip(xCoordSvgTrans, yCoordSvgTrans);
             this.updateLegendTooltip();
         }
     };
@@ -202,29 +205,28 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    CursorTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
+    CursorTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         if (!this.tooltipSvgTemplate)
             throw Error("Please provide a tooltipSvgTemplate for CursorTooltipSvgAnnotation");
         var svgString = this.tooltipSvgTemplate(this.seriesInfos, this);
-        var svgNode = document.createRange().createContextualFragment(svgString);
         if (this.placementDivId) {
-            this.svgDivRoot.appendChild(svgNode);
-            this.setSvg(this.svgDivRoot.lastChild);
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgDivRoot);
+            this.setSvg(svgNode);
         }
         else {
-            this.svgRoot.appendChild(svgNode);
-            this.setSvg(this.svgRoot.lastChild);
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.setSvg(svgNode);
         }
     };
-    CursorTooltipSvgAnnotation.prototype.updateTooltip = function () {
+    CursorTooltipSvgAnnotation.prototype.updateTooltip = function (xCoordSvgTrans, yCoordSvgTrans) {
         var _a, _b, _c, _d;
         var shiftX = (_a = this.xCoordShift) !== null && _a !== void 0 ? _a : 0;
         var shiftY = (_b = this.yCoordShift) !== null && _b !== void 0 ? _b : 0;
         this.svg.style.display = this.isHidden ? "none" : "block";
         var mousePointX = (_c = this.x1) !== null && _c !== void 0 ? _c : 0;
         var mousePointY = (_d = this.y1) !== null && _d !== void 0 ? _d : 0;
-        var x1Coord = shiftX + mousePointX;
-        var y1Coord = shiftY + mousePointY;
+        var x1Coord = shiftX + mousePointX + xCoordSvgTrans;
+        var y1Coord = shiftY + mousePointY + yCoordSvgTrans;
         if (isNaN(x1Coord) || isNaN(y1Coord)) {
             this.svg.style.display = "none";
         }
@@ -236,12 +238,11 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
     CursorTooltipSvgAnnotation.prototype.updateLegendTooltip = function () {
         if (this.tooltipLegendTemplate) {
             var svgString = this.seriesInfos ? this.tooltipLegendTemplate(this.seriesInfos, this) : "<svg></svg>";
-            var svgNode = document.createRange().createContextualFragment(svgString);
             if (this.svgLegend) {
                 this.svgRoot.removeChild(this.svgLegend);
             }
-            this.svgRoot.appendChild(svgNode);
-            this.svgLegend = this.svgRoot.lastChild;
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.svgLegend = svgNode;
             this.svgLegend.setAttribute("x", this.tooltipLegendOffsetX.toString());
             this.svgLegend.setAttribute("y", this.tooltipLegendOffsetY.toString());
         }
@@ -251,12 +252,11 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
             var svgString = this.seriesInfos
                 ? this.tooltipLegendTemplate(this.seriesInfos, this)
                 : "<svg style='display: none'></svg>";
-            var svgNode = document.createRange().createContextualFragment(svgString);
             if (this.svgLegend) {
                 this.svgLegend.removeChild(this.svgLegend);
             }
-            this.svgDivRoot.appendChild(svgNode);
-            this.svgLegend = this.svgDivRoot.lastChild;
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.svgLegend = svgNode;
         }
     };
     return CursorTooltipSvgAnnotation;

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

@@ -31,7 +31,7 @@ export declare class CustomAnnotation extends SvgAnnotationBase {
         options: Required<Omit<import("./AnnotationBase").IAnnotationBaseOptions, never>>;
     };
     /** @inheritDoc */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     get svgString(): string;
     set svgString(value: string);
 }

package/Charting/Visuals/Annotations/CustomAnnotation.js

@@ -29,8 +29,9 @@ var CustomAnnotation = /** @class */ (function (_super) {
      * @param options The {@link ICustomAnnotationOptions} which contain optional parameters
      */
     function CustomAnnotation(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
         _this.svgStringProperty = (_a = options === null || options === void 0 ? void 0 : options.svgString) !== null && _a !== void 0 ? _a : undefined;
@@ -46,7 +47,7 @@ var CustomAnnotation = /** @class */ (function (_super) {
         return json;
     };
     /** @inheritDoc */
-    CustomAnnotation.prototype.create = function (xCalc, yCalc) {
+    CustomAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         if (this.svg && !this.isEditable) {
             this.calcAndSetAnnotationBorders(xCalc, yCalc);
             return;

package/Charting/Visuals/Annotations/HorizontalLineAnnotation.js

@@ -58,8 +58,9 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ILineAnnotationOptions} which configure the annotation upon construction
      */
     function HorizontalLineAnnotation(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextHorizontalLineAnnotation;
         _this.dragOnLine = true;
@@ -114,6 +115,8 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
         Guard_1.Guard.notNull(yCalc, "yCalc");
         var strokePen = this.stroke && this.strokeThickness ? (0, Pen2DCache_1.getWebGlPenFromCache)(this.strokePenCache) : undefined;
         var _a = this.getDrawConfig(xCalc, yCalc), annotationCoord = _a.annotationCoord, lineAnnotationEdgeCoord = _a.lineAnnotationEdgeCoord, horizontalAxis = _a.horizontalAxis, verticalAxis = _a.verticalAxis, horizontalAxisCoordinateMode = _a.horizontalAxisCoordinateMode, verticalAxisCoordinateMode = _a.verticalAxisCoordinateMode, horizontalCoordinateCalculator = _a.horizontalCoordinateCalculator, verticalCoordinateCalculator = _a.verticalCoordinateCalculator, isAlignmentRight = _a.isAlignmentRight;
+        if (!horizontalAxis || !verticalAxis)
+            return;
         var borderX1 = 0;
         var borderX2 = viewRect.width;
         if (isAlignmentRight) {
@@ -192,7 +195,7 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
             verticalAxisCoordinateMode: this.yCoordinateMode,
             horizontalCoordinateCalculator: xCalc,
             verticalCoordinateCalculator: yCalc,
-            isAlignmentRight: yAxis.axisAlignment === AxisAlignment_1.EAxisAlignment.Right
+            isAlignmentRight: (yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisAlignment) === AxisAlignment_1.EAxisAlignment.Right
         };
         var verticalChartCoordinateConfig = {
             annotationCoord: this.x1,
@@ -203,7 +206,7 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
             verticalAxisCoordinateMode: this.xCoordinateMode,
             horizontalCoordinateCalculator: yCalc,
             verticalCoordinateCalculator: xCalc,
-            isAlignmentRight: xAxis.axisAlignment === AxisAlignment_1.EAxisAlignment.Right
+            isAlignmentRight: (xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisAlignment) === AxisAlignment_1.EAxisAlignment.Right
         };
         return this.isVerticalChart ? verticalChartCoordinateConfig : defaultChartCoordinateConfig;
     };

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

@@ -1,5 +1,17 @@
 import { ModifierMouseArgs } from "../../ChartModifiers/ModifierMouseArgs";
 export interface IAdornerProvider {
+    /** The stroke color for the adorner drag handle */
+    annotationsGripsStroke: string;
+    /** The fill color for the adorner drag handle */
+    annotationsGripsFill: string;
+    /** The radius of the adorner drag handle */
+    annotationsGripsRadius: number;
+    /** The stroke color for the adorner selection box */
+    selectionBoxStroke: string;
+    /** How much bigger the selection box is than the bounding box of the annotation, in pixels */
+    selectionBoxDelta: number;
+    /** The thickness of the selection box line */
+    selectionBoxThickness: number;
     isDraggingStarted: boolean;
     clickToSelect(args: ModifierMouseArgs): boolean;
     onDragStarted(args: ModifierMouseArgs): boolean;

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

@@ -83,6 +83,15 @@ export declare enum EAnnotationType {
      * but more flexible SVG to draw annotations on the chart
      */
     RenderContextAxisMarkerAnnotation = "RenderContextAxisMarkerAnnotation",
+    /**
+     * The Annotation is an {@link NativeTextAnnotation | NativeTextAnnotation}
+     * @remarks
+     * {@link NativeTextAnnotation | NativeTextAnnotation} * are drawn on the
+     * {@link https://www.scichart.com/javascript-chart-features | Javascript chart} using WebGL2 where available.
+     * They differ from {@link TextAnnotation | TextAnnotation} which use slower,
+     * but more flexible SVG to draw annotations on the chart
+     */
+    RenderContextNativeTextAnnotation = "RenderContextNativeTextAnnotation",
     /**
      * The Annotation is an {@link TextAnnotation | TextAnnotation}
      * @remarks

package/Charting/Visuals/Annotations/IAnnotation.js

@@ -83,6 +83,15 @@ var EAnnotationType;
      * but more flexible SVG to draw annotations on the chart
      */
     EAnnotationType["RenderContextAxisMarkerAnnotation"] = "RenderContextAxisMarkerAnnotation";
+    /**
+     * The Annotation is an {@link NativeTextAnnotation | NativeTextAnnotation}
+     * @remarks
+     * {@link NativeTextAnnotation | NativeTextAnnotation} * are drawn on the
+     * {@link https://www.scichart.com/javascript-chart-features | Javascript chart} using WebGL2 where available.
+     * They differ from {@link TextAnnotation | TextAnnotation} which use slower,
+     * but more flexible SVG to draw annotations on the chart
+     */
+    EAnnotationType["RenderContextNativeTextAnnotation"] = "RenderContextNativeTextAnnotation";
     /**
      * The Annotation is an {@link TextAnnotation | TextAnnotation}
      * @remarks

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

@@ -188,4 +188,5 @@ export declare class LineAnnotation 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;
 }

package/Charting/Visuals/Annotations/LineAnnotation.js

@@ -58,8 +58,9 @@ var LineAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ILineAnnotationOptions} which configure the annotation upon construction
      */
     function LineAnnotation(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.RenderContextLineAnnotation;
         _this.axisFontSizeProperty = 14;
@@ -72,6 +73,10 @@ var LineAnnotation = /** @class */ (function (_super) {
         _this.axisLabelFillProperty = "#b36200";
         _this.labelPlacementProperty = LabelPlacement_1.ELabelPlacement.Auto;
         _this.labelValueProperty = "";
+        _this.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>");
+        };
         _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;
@@ -320,21 +325,21 @@ var LineAnnotation = /** @class */ (function (_super) {
         var xyCoord1 = this.getXYCoordinatesFromValues(new Point_1.Point(x1, y1));
         var xyCoord2 = this.getXYCoordinatesFromValues(new Point_1.Point(x2, y2));
         var xyCoordBody = new Point_1.Point(args.mousePoint.x, args.mousePoint.y);
-        if (xyCoord1) {
+        if (xyCoord1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
             var dist = (0, pointUtil_1.calcDistance)(xyCoord1.x, xyCoord1.y, args.mousePoint.x, args.mousePoint.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;
             }
         }
-        if (xyCoord2) {
+        if (xyCoord2 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
             var dist = (0, pointUtil_1.calcDistance)(xyCoord2.x, xyCoord2.y, args.mousePoint.x, args.mousePoint.y);
-            if (dist < constants_1.ADORNER_GRIP_RADIUS * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point2;
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y2;
                 return true;
             }
         }
-        if (xyCoordBody) {
+        if (xyCoordBody && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.Body)) {
             if (this.clickToSelect(args)) {
                 this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Body;
                 return true;
@@ -343,12 +348,12 @@ var LineAnnotation = /** @class */ (function (_super) {
         return false;
     };
     LineAnnotation.prototype.calcDragDistance = function (xyValues) {
+        if (!this.prevValue) {
+            this.prevValue = xyValues;
+            return;
+        }
         var isVerticalChart = this.parentSurface.getYAxisById(this.yAxisId).isVerticalChart;
         if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body) {
-            if (!this.prevValue) {
-                this.prevValue = xyValues;
-                return;
-            }
             if (this.type === IAnnotation_1.EAnnotationType.RenderContextHorizontalLineAnnotation) {
                 if (isVerticalChart) {
                     this.x1 = this.x1 - (this.prevValue.x - xyValues.x);
@@ -371,36 +376,32 @@ var LineAnnotation = /** @class */ (function (_super) {
                 this.y1 = this.y1 - (this.prevValue.y - xyValues.y);
                 this.y2 = this.y2 - (this.prevValue.y - xyValues.y);
             }
-            this.prevValue = xyValues;
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point1) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y1) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y1 = this.y1;
-                this.x1 = xyValues.x;
+                this.x1 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x1 = this.x1;
-                this.y1 = xyValues.y;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x1 = xyValues.x;
-                this.y1 = xyValues.y;
+                this.x1 -= this.prevValue.x - xyValues.x;
+                this.y1 -= this.prevValue.y - xyValues.y;
             }
         }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point2) {
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y2) {
             if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
-                this.y2 = this.y2;
-                this.x2 = xyValues.x;
+                this.x2 -= this.prevValue.x - xyValues.x;
             }
             else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
-                this.x2 = this.x2;
-                this.y2 = xyValues.y;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
             else {
-                this.x2 = xyValues.x;
-                this.y2 = xyValues.y;
+                this.x2 -= this.prevValue.x - xyValues.x;
+                this.y2 -= this.prevValue.y - xyValues.y;
             }
         }
+        this.prevValue = xyValues;
     };
     /**
      * @instance
@@ -448,17 +449,10 @@ var LineAnnotation = /** @class */ (function (_super) {
         this.deleteAdorner();
         if (this.isSelected) {
             var _a = this.getAdornerAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-            var svgString = svgStringAdornerTemplate(x1, y1, x2, y2);
+            var svgString = this.svgStringAdornerTemplate(x1, y1, x2, y2);
             this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     return LineAnnotation;
 }(RenderContextAnnotationBase_1.RenderContextAnnotationBase));
 exports.LineAnnotation = LineAnnotation;
-/** @ignore */
-var svgStringAdornerTemplate = function (x1, y1, x2, y2) {
-    var colorLine = "#f00e0e66";
-    var adornerFill = "#CDCDCD22";
-    var adornerStroke = "#CDCDCD99";
-    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  <circle cx=\"").concat(x1, "\" cy=\"").concat(y1, "\" r=\"").concat(constants_1.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n  <circle cx=\"").concat(x2, "\" cy=\"").concat(y2, "\" r=\"").concat(constants_1.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n</svg>");
-};