scichart 2.2.2416 → 3.0.0-beta.224

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

@@ -41,9 +41,9 @@ export declare class RolloverLegendSvgAnnotation extends SvgAnnotationBase {
     /**
      * @inheritDoc
      */
-    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /**
      * @inheritDoc
      */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
 }

package/Charting/Visuals/Annotations/RolloverLegendSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverLegendSvgAnnotation = void 0;
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
@@ -29,8 +30,9 @@ var RolloverLegendSvgAnnotation = /** @class */ (function (_super) {
      * @param options
      */
     function RolloverLegendSvgAnnotation(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.SVG;
         _this.seriesInfosProperty = [];
@@ -103,25 +105,24 @@ var RolloverLegendSvgAnnotation = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    RolloverLegendSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+    RolloverLegendSvgAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         if (!this.tooltipLegendTemplate) {
             return;
         }
         if (this.svg) {
             this.delete();
         }
-        this.create(xCalc, yCalc);
+        this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
     };
     /**
      * @inheritDoc
      */
-    RolloverLegendSvgAnnotation.prototype.create = function (xCalc, yCalc) {
+    RolloverLegendSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var svgString = this.tooltipLegendTemplate(this.seriesInfos, this);
-        var svgNode = document.createRange().createContextualFragment(svgString);
-        this.svgRoot.appendChild(svgNode);
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
         this.setSvg(this.svgRoot.lastChild);
-        this.setSvgAttribute("x", this.tooltipLegendOffsetX);
-        this.setSvgAttribute("y", this.tooltipLegendOffsetY);
+        this.setSvgAttribute("x", this.tooltipLegendOffsetX + xCoordSvgTrans);
+        this.setSvgAttribute("y", this.tooltipLegendOffsetY + yCoordSvgTrans);
     };
     return RolloverLegendSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));

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

@@ -9,7 +9,7 @@ export declare class RolloverMarkerSvgAnnotation extends SvgAnnotationBase {
     private previousMousePosition;
     constructor(renderableSeriesProps: RolloverModifierRenderableSeriesProps);
     /** @inheritDoc */
-    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /** @inheritDoc */
-    protected create(): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
 }

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverMarkerSvgAnnotation = void 0;
 var MousePosition_1 = require("../../../types/MousePosition");
+var annotationHelpers_1 = require("./annotationHelpers");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
@@ -34,24 +35,23 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
         return _this;
     }
     /** @inheritDoc */
-    RolloverMarkerSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+    RolloverMarkerSvgAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
         if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
             return;
         }
         this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
-        _super.prototype.update.call(this, xCalc, yCalc);
+        _super.prototype.update.call(this, xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
     };
     /** @inheritDoc */
-    RolloverMarkerSvgAnnotation.prototype.create = function () {
+    RolloverMarkerSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         if (this.svg) {
             this.delete();
         }
         var _a = this.tooltipProps, tooltipColor = _a.tooltipColor, markerColor = _a.markerColor;
         var svgString = tooltipSvgTemplate(markerColor !== null && markerColor !== void 0 ? markerColor : tooltipColor);
-        var svgNode = document.createRange().createContextualFragment(svgString);
-        this.svgRoot.appendChild(svgNode);
-        this.setSvg(this.svgRoot.lastChild);
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+        this.setSvg(svgNode);
     };
     return RolloverMarkerSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));

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

@@ -40,13 +40,13 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     delete(): void;
     /** @inheritDoc */
-    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /**
      * Updates size of the tooltip
      */
     updateSize(width: number, height: number): void;
     /** @inheritDoc */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     private generateSvgString;
     private updateLegendTooltip;
     private updateExternalLegendTooltip;

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -19,6 +19,7 @@ exports.RolloverTooltipSvgAnnotation = void 0;
 var MousePosition_1 = require("../../../types/MousePosition");
 var IDataSeries_1 = require("../../Model/IDataSeries");
 var AnnotationBase_1 = require("./AnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
@@ -34,8 +35,9 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @param options
      */
     function RolloverTooltipSvgAnnotation(renderableSeriesProps, options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
         _this.width = 0;
@@ -85,7 +87,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         }
     };
     /** @inheritDoc */
-    RolloverTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+    RolloverTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
         if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
             return;
@@ -98,8 +100,8 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.updateExternalLegendTooltip();
         }
         else {
-            _super.prototype.update.call(this, xCalc, yCalc);
-            this.updateLegendTooltip();
+            _super.prototype.update.call(this, xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
+            this.updateLegendTooltip(xCoordSvgTrans, yCoordSvgTrans);
         }
     };
     /**
@@ -110,7 +112,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         this.height = height;
     };
     /** @inheritDoc */
-    RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
+    RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var svgString;
         if (!this.seriesInfo) {
             svgString = "<svg></svg>";
@@ -118,9 +120,8 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         else {
             svgString = this.generateSvgString();
         }
-        var svgNode = document.createRange().createContextualFragment(svgString);
-        this.svgRoot.appendChild(svgNode);
-        this.setSvg(this.svgRoot.lastChild);
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+        this.setSvg(svgNode);
     };
     RolloverTooltipSvgAnnotation.prototype.generateSvgString = function () {
         var _a;
@@ -130,16 +131,15 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         var tooltipTemplate = (_a = this.tooltipProps.tooltipTemplate) !== null && _a !== void 0 ? _a : defaultTooltipTemplate;
         return tooltipTemplate(id, this.seriesInfo, this);
     };
-    RolloverTooltipSvgAnnotation.prototype.updateLegendTooltip = function () {
+    RolloverTooltipSvgAnnotation.prototype.updateLegendTooltip = function (xCoordSvgTrans, yCoordSvgTrans) {
         if (this.tooltipProps.tooltipLegendTemplate) {
             var svgString = this.seriesInfo
                 ? this.tooltipProps.tooltipLegendTemplate(this.tooltipProps, this.seriesInfo)
                 : "<svg></svg>";
-            var svgNode = document.createRange().createContextualFragment(svgString);
-            this.svgRoot.appendChild(svgNode);
-            this.svgLegend = this.svgRoot.lastChild;
-            this.svgLegend.setAttribute("x", this.tooltipProps.tooltipLegendOffsetX.toString());
-            this.svgLegend.setAttribute("y", this.tooltipProps.tooltipLegendOffsetY.toString());
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.svgLegend = svgNode;
+            this.svgLegend.setAttribute("x", this.tooltipProps.tooltipLegendOffsetX.toString() + xCoordSvgTrans);
+            this.svgLegend.setAttribute("y", this.tooltipProps.tooltipLegendOffsetY.toString() + yCoordSvgTrans);
         }
     };
     RolloverTooltipSvgAnnotation.prototype.updateExternalLegendTooltip = function () {
@@ -150,10 +150,9 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         else {
             svgString = this.generateSvgString();
         }
-        var svgNode = document.createRange().createContextualFragment(svgString);
         this.svgDivRoot = document.getElementById(this.placementDivId);
-        this.svgDivRoot.appendChild(svgNode);
-        this.setSvg(this.svgDivRoot.lastChild);
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgDivRoot);
+        this.setSvg(svgNode);
     };
     Object.defineProperty(RolloverTooltipSvgAnnotation.prototype, "placementDivId", {
         /**

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

@@ -10,7 +10,13 @@ import { AnnotationBase, IAnnotationBaseOptions } from "./AnnotationBase";
 export interface ISvgAnnotationBaseOptions extends IAnnotationBaseOptions {
     xCoordShift?: number;
     yCoordShift?: number;
+    /**
+     * Sets vertical anchor point
+     */
     verticalAnchorPoint?: EVerticalAnchorPoint;
+    /**
+     * Sets horizontal anchor point
+     */
     horizontalAnchorPoint?: EHorizontalAnchorPoint;
 }
 /**
@@ -76,8 +82,10 @@ export declare abstract class SvgAnnotationBase extends AnnotationBase {
      * Updates the annotation position, with the {@link CoordinateCalculatorBase | Coordinate Calculators} passed in
      * @param xCalc The XAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
      * @param yCalc The YAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
+     * @param xCoordSvgTrans X-coordinate translation which is needed to use SVG canvas having the whole chart size
+     * @param yCoordSvgTrans Y-coordinate translation which is needed to use SVG canvas having the whole chart size
      */
-    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     calcDragDistance(xyValues: Point): void;
     onDragStarted(args: ModifierMouseArgs): boolean;
     /** @inheritDoc */
@@ -93,8 +101,10 @@ export declare abstract class SvgAnnotationBase extends AnnotationBase {
      * Called to create the SVG Dom Element right before it is added to the parent chart
      * @param xCalc The XAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
      * @param yCalc The YAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
+     * @param xCoordSvgTrans X-coordinate translation which is needed to use SVG canvas having the whole chart size
+     * @param yCoordSvgTrans Y-coordinate translation which is needed to use SVG canvas having the whole chart size
      */
-    protected abstract create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected abstract create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /**
      * Gets the {@link SVGSVGElement | SVG Element} at the root of this annotation
      */
@@ -106,4 +116,5 @@ export declare abstract class SvgAnnotationBase extends AnnotationBase {
      * @protected
      */
     protected calcAndSetAnnotationBorders(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected svgStringAdornerTemplate(x1: number, y1: number, x2: number, y2: number): string;
 }

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -34,8 +34,9 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ISvgAnnotationBaseOptions} used to configure the annotation on construction
      */
     function SvgAnnotationBase(options) {
+        var _this = this;
         var _a, _b, _c, _d;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.isSvgAnnotation = true;
         /**
@@ -144,10 +145,12 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
      * Updates the annotation position, with the {@link CoordinateCalculatorBase | Coordinate Calculators} passed in
      * @param xCalc The XAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
      * @param yCalc The YAxis {@link CoordinateCalculatorBase | CoordinateCalculator} applied to this annotation
+     * @param xCoordSvgTrans X-coordinate translation which is needed to use SVG canvas having the whole chart size
+     * @param yCoordSvgTrans Y-coordinate translation which is needed to use SVG canvas having the whole chart size
      */
-    SvgAnnotationBase.prototype.update = function (xCalc, yCalc) {
+    SvgAnnotationBase.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         var _a, _b;
-        this.create(xCalc, yCalc);
+        this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
         var shiftX = (_a = this.xCoordShift) !== null && _a !== void 0 ? _a : 0;
         var shiftY = (_b = this.yCoordShift) !== null && _b !== void 0 ? _b : 0;
         // @ts-ignore
@@ -168,8 +171,8 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         }
         this.svg.style.visibility = this.isHidden ? "hidden" : "visible";
         this.svg.style.opacity = this.opacity.toString();
-        var x1Coord = shiftX + this.getX1Coordinate(xCalc, yCalc);
-        var y1Coord = shiftY + this.getY1Coordinate(xCalc, yCalc);
+        var x1Coord = shiftX + this.getX1Coordinate(xCalc, yCalc) + xCoordSvgTrans;
+        var y1Coord = shiftY + this.getY1Coordinate(xCalc, yCalc) + yCoordSvgTrans;
         if (isNaN(x1Coord) || isNaN(y1Coord) || !isFinite(x1Coord) || !isFinite(y1Coord)) {
             this.svg.style.display = "none";
         }
@@ -179,26 +182,21 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         }
     };
     SvgAnnotationBase.prototype.calcDragDistance = function (xyValues) {
+        if (!this.prevValue) {
+            this.prevValue = xyValues;
+            return;
+        }
         var _a = this.getAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-        if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body) {
-            if (!this.prevValue) {
-                this.prevValue = xyValues;
-                return;
-            }
+        if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body ||
+            this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y1) {
             x1 = this.x1 - (this.prevValue.x - xyValues.x);
             y1 = this.y1 - (this.prevValue.y - xyValues.y);
             this.x1 = x1;
             this.y1 = y1;
             x2 = x2 - (this.prevValue.x - xyValues.x);
             y2 = y2 - (this.prevValue.y - xyValues.y);
-            this.prevValue = xyValues;
-        }
-        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Point1) {
-            x1 = xyValues.x;
-            y1 = xyValues.y;
-            this.x1 = xyValues.x;
-            this.y1 = xyValues.y;
         }
+        this.prevValue = xyValues;
         this.setAnnotationBorders(x1, x2, y1, y2);
     };
     SvgAnnotationBase.prototype.onDragStarted = function (args) {
@@ -219,14 +217,14 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         if (!xyMousePoint) {
             return false;
         }
-        if (xyCoord1) {
+        if (xyCoord1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
             var dist = (0, pointUtil_1.calcDistance)(circleCenterX, circleCenterY, (0, translate_1.translateToNotScaled)(xyMousePoint.x), (0, translate_1.translateToNotScaled)(xyMousePoint.y));
-            if (dist < constants_1.ADORNER_GRIP_RADIUS) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point1;
+            if (dist < this.annotationsGripsRadius) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
                 return true;
             }
         }
-        if (this.clickToSelect(args)) {
+        if (this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.Body) && this.clickToSelect(args)) {
             this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Body;
             return true;
         }
@@ -265,11 +263,11 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         return (0, pointUtil_1.testIsInBounds)(notScaledX, notScaledY, x1, y2, x2, y1);
     };
     SvgAnnotationBase.prototype.updateAdornerInner = function () {
-        var _a = this.getAdornerAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+        var _a = this.getAdornerAnnotationBorders(true, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
         var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
         this.deleteAdorner();
         if (this.isSelected) {
-            var svgString = svgStringAdornerTemplate(x1, y1, x2, y2, this.verticalAnchorPoint, this.horizontalAnchorPoint);
+            var svgString = this.svgStringAdornerTemplate(x1, y1, x2, y2);
             this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
@@ -318,25 +316,19 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         }
         this.setAnnotationBorders(borderX1, borderX2, borderY1, borderY2);
     };
+    SvgAnnotationBase.prototype.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
+        var circleCenterX = x1;
+        var circleCenterY = y1;
+        var height = Math.abs((y1 - y2) / 2);
+        var width = Math.abs((x1 - x2) / 2);
+        if (this.verticalAnchorPoint === AnchorPoint_1.EVerticalAnchorPoint.Center) {
+            circleCenterY = circleCenterY + height;
+        }
+        if (this.horizontalAnchorPoint === AnchorPoint_1.EHorizontalAnchorPoint.Center) {
+            circleCenterX = circleCenterX + width;
+        }
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"".concat(x1, "\" y=\"").concat(y1, "\" width=\"").concat(Math.abs(x1 - x2), "\" height=\"").concat(Math.abs(y1 - y2), "\" stroke=\"").concat(this.selectionBoxStroke, "\" stroke-width=\"").concat(this.selectionBoxThickness, "px\" fill=\"none\" />\n        ").concat(this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1) ? this.getAnnotationGripSvg(circleCenterX, circleCenterY) : "", "\n      </svg>");
+    };
     return SvgAnnotationBase;
 }(AnnotationBase_1.AnnotationBase));
 exports.SvgAnnotationBase = SvgAnnotationBase;
-/** @ignore */
-var svgStringAdornerTemplate = function (x1, y1, x2, y2, verticalAnchorPoint, horizontalAnchorPoint) {
-    // TODO add theme
-    var colorLine = "#f00e0e66";
-    var adornerFill = "#CDCDCD22";
-    var adornerStroke = "#CDCDCD99";
-    var delta = 1;
-    var circleCenterX = x1;
-    var circleCenterY = y1;
-    var height = Math.abs((y1 - y2) / 2);
-    var width = Math.abs((x1 - x2) / 2);
-    if (verticalAnchorPoint === AnchorPoint_1.EVerticalAnchorPoint.Center) {
-        circleCenterY = circleCenterY + height;
-    }
-    if (horizontalAnchorPoint === AnchorPoint_1.EHorizontalAnchorPoint.Center) {
-        circleCenterX = circleCenterX + width;
-    }
-    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(circleCenterX, "\" cy=\"").concat(circleCenterY, "\" r=\"").concat(constants_1.ADORNER_GRIP_RADIUS, "\" fill=\"").concat(adornerFill, "\" stroke=\"").concat(adornerStroke, "\"/>\n  </svg>");
-};

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

@@ -75,9 +75,9 @@ export declare class TextAnnotation extends SvgAnnotationBase {
     /**
      * Notifies listeners of {@link invalidateParentCallback} that a property has changed
      */
-    protected notifyPropertyChanged(): void;
+    protected notifyPropertyChanged(p: string): void;
     /**
      * @inheritDoc
      */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
 }

package/Charting/Visuals/Annotations/TextAnnotation.js

@@ -16,6 +16,8 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAnnotation = void 0;
+var annotationHelpers_1 = require("./annotationHelpers");
+var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 /**
@@ -28,8 +30,9 @@ var TextAnnotation = /** @class */ (function (_super) {
      * @param options The {@link ITextAnnotationOptions} which contain optional parameters
      */
     function TextAnnotation(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVGTextAnnotation;
         _this.textProperty = "DEFAULT TEXT";
@@ -53,8 +56,10 @@ var TextAnnotation = /** @class */ (function (_super) {
             return this.textProperty;
         },
         set: function (text) {
-            this.textProperty = text;
-            this.notifyPropertyChanged();
+            if (this.textProperty !== text) {
+                this.textProperty = text;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TEXT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -67,8 +72,10 @@ var TextAnnotation = /** @class */ (function (_super) {
             return this.textColorProperty;
         },
         set: function (textColor) {
-            this.textColorProperty = textColor;
-            this.notifyPropertyChanged();
+            if (this.textColorProperty !== textColor) {
+                this.textColorProperty = textColor;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TEXT_STROKE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -81,8 +88,10 @@ var TextAnnotation = /** @class */ (function (_super) {
             return this.fontSizeProperty;
         },
         set: function (fontSize) {
-            this.fontSizeProperty = fontSize;
-            this.notifyPropertyChanged();
+            if (this.fontSizeProperty !== fontSize) {
+                this.fontSizeProperty = fontSize;
+                this.notifyPropertyChanged(constants_1.PROPERTY.FONT_SIZE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -95,8 +104,10 @@ var TextAnnotation = /** @class */ (function (_super) {
             return this.fontFamilyProperty;
         },
         set: function (fontFamily) {
-            this.fontFamilyProperty = fontFamily;
-            this.notifyPropertyChanged();
+            if (this.fontFamilyProperty !== fontFamily) {
+                this.fontFamilyProperty = fontFamily;
+                this.notifyPropertyChanged(constants_1.PROPERTY.FONT_FAMILY);
+            }
         },
         enumerable: false,
         configurable: true
@@ -109,8 +120,10 @@ var TextAnnotation = /** @class */ (function (_super) {
             return this.fontWeightProperty;
         },
         set: function (fontWeight) {
-            this.fontWeightProperty = fontWeight;
-            this.notifyPropertyChanged();
+            if (this.fontWeightProperty !== fontWeight) {
+                this.fontWeightProperty = fontWeight;
+                this.notifyPropertyChanged(constants_1.PROPERTY.FONT_WEIGHT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -130,8 +143,19 @@ var TextAnnotation = /** @class */ (function (_super) {
     /**
      * Notifies listeners of {@link invalidateParentCallback} that a property has changed
      */
-    TextAnnotation.prototype.notifyPropertyChanged = function () {
-        this.isDirty = true;
+    TextAnnotation.prototype.notifyPropertyChanged = function (p) {
+        if (p !== constants_1.PROPERTY.IS_HIDDEN &&
+            p !== constants_1.PROPERTY.X_COORD_SHIFT &&
+            p !== constants_1.PROPERTY.Y_COORD_SHIFT &&
+            p !== constants_1.PROPERTY.HORIZONTAL_ANCHOR_POINT &&
+            p !== constants_1.PROPERTY.VERTICAL_ANCHOR_POINT &&
+            p !== constants_1.PROPERTY.IS_HIDDEN &&
+            p !== constants_1.PROPERTY.X1 &&
+            p !== constants_1.PROPERTY.X2 &&
+            p !== constants_1.PROPERTY.Y1 &&
+            p !== constants_1.PROPERTY.Y2) {
+            this.isDirty = true;
+        }
         if (this.invalidateParentCallback) {
             this.invalidateParentCallback();
         }
@@ -139,15 +163,11 @@ var TextAnnotation = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    TextAnnotation.prototype.create = function (xCalc, yCalc) {
-        var isChangedCoordinate = this.prevX1Coordinate !== this.getX1Coordinate(xCalc, yCalc) ||
-            this.prevY1Coordinate !== this.getY1Coordinate(xCalc, yCalc);
-        if ((!this.isDirty && !this.isSelected && !isChangedCoordinate) || (this.svg && !this.isEditable)) {
+    TextAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
+        if (!this.isDirty && !this.isSelected) {
             this.calcAndSetAnnotationBorders(xCalc, yCalc);
             return;
         }
-        this.prevX1Coordinate = this.getX1Coordinate(xCalc, yCalc);
-        this.prevY1Coordinate = this.getY1Coordinate(xCalc, yCalc);
         if (this.svg) {
             this.delete();
         }
@@ -163,7 +183,6 @@ exports.TextAnnotation = TextAnnotation;
 /** @ignore */
 var createSvg = function (svgRoot, text, color, fontSize, fontFamily, fontWeight) {
     var svgString = "<svg class=\"scichart__text-annotation\">\n        <text x=\"0\" y=\"".concat(fontSize, "\" fill=\"").concat(color, "\" font-size=\"").concat(fontSize, "\" font-family=\"").concat(fontFamily, "\" font-weight=\"").concat(fontWeight, "\">").concat(text, "</text>\n    </svg>");
-    var svgNode = document.createRange().createContextualFragment(svgString);
-    svgRoot.appendChild(svgNode);
-    return svgRoot.lastChild;
+    var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, svgRoot);
+    return svgNode;
 };

package/Charting/Visuals/Annotations/VerticalLineAnnotation.js

@@ -58,8 +58,9 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link ILineAnnotationOptions} which configure the annotation upon construction
      */
     function VerticalLineAnnotation(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.RenderContextVerticalLineAnnotation;
         _this.dragOnLine = true;
@@ -114,6 +115,8 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
         Guard_1.Guard.notNull(yCalc, "yCalc");
         var strokePen = (0, Pen2DCache_1.getWebGlPenFromCache)(this.strokePenCache);
         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, isAlignmentTop = _a.isAlignmentTop;
+        if (!horizontalAxis || !verticalAxis)
+            return;
         var borderY1 = viewRect.height;
         var borderY2 = 0;
         if (isAlignmentTop) {
@@ -194,7 +197,7 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
             verticalAxisCoordinateMode: this.yCoordinateMode,
             horizontalCoordinateCalculator: xCalc,
             verticalCoordinateCalculator: yCalc,
-            isAlignmentTop: xAxis.axisAlignment === AxisAlignment_1.EAxisAlignment.Top
+            isAlignmentTop: (xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisAlignment) === AxisAlignment_1.EAxisAlignment.Top
         };
         var verticalChartCoordinateConfig = {
             annotationCoord: this.y1,
@@ -205,7 +208,7 @@ var VerticalLineAnnotation = /** @class */ (function (_super) {
             verticalAxisCoordinateMode: this.xCoordinateMode,
             horizontalCoordinateCalculator: yCalc,
             verticalCoordinateCalculator: xCalc,
-            isAlignmentTop: yAxis.axisAlignment === AxisAlignment_1.EAxisAlignment.Top
+            isAlignmentTop: (yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisAlignment) === AxisAlignment_1.EAxisAlignment.Top
         };
         return this.isVerticalChart ? verticalChartCoordinateConfig : defaultChartCoordinateConfig;
     };

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

@@ -1,19 +1,19 @@
 export declare const annotationHelpers: {
-    createSvg: (svgString: string, svgRoot: SVGSVGElement) => SVGElement;
-    calcNewApex: (x1: number, y1: number, x2: number, y2: number) => {
-        point1: {
+    createSvg: (svgString: string, svgRoot: Node) => SVGElement;
+    calcNewApex: (x1: number, y1: number, x2: number, y2: number, isVertical: boolean) => {
+        x1y1: {
             x: number;
             y: number;
         };
-        point2: {
+        x2y1: {
             x: number;
             y: number;
         };
-        point3: {
+        x1y2: {
             x: number;
             y: number;
         };
-        point4: {
+        x2y2: {
             x: number;
             y: number;
         };

package/Charting/Visuals/Annotations/annotationHelpers.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.annotationHelpers = void 0;
+/** All svg creation is run through this funciton so it can be mocked for tests */
 var createSvg = function (svgString, svgRoot) {
     var svgNode = document.createRange().createContextualFragment(svgString);
     svgRoot.appendChild(svgNode);
     return svgRoot.lastChild;
 };
-var calcNewApex = function (x1, y1, x2, y2) {
-    var point1 = { x: x1, y: y2 };
-    var point2 = { x: x2, y: y2 };
-    var point3 = { x: x2, y: y1 };
-    var point4 = { x: x1, y: y1 };
-    return { point1: point1, point2: point2, point3: point3, point4: point4 };
+var calcNewApex = function (x1, y1, x2, y2, isVertical) {
+    var x1y1 = { x: x1, y: y1 };
+    var x2y1 = isVertical ? { x: x1, y: y2 } : { x: x2, y: y1 };
+    var x1y2 = isVertical ? { x: x2, y: y1 } : { x: x1, y: y2 };
+    var x2y2 = { x: x2, y: y2 };
+    return { x1y1: x1y1, x2y1: x2y1, x1y2: x1y2, x2y2: x2y2 };
 };
 exports.annotationHelpers = {
     createSvg: createSvg,