scichart 2.0.0-alpha.1930 → 2.0.0-alpha.1991

package/Charting/Services/SciChartRenderer.js

@@ -121,7 +121,9 @@ var SciChartRenderer = /** @class */ (function () {
                     }
                     a.showWarning = false;
                 }
-                a.drawWithContext(renderContext, xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator(), seriesViewRect);
+                if (!a.isHidden) {
+                    a.drawWithContext(renderContext, xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator(), seriesViewRect);
+                }
             }
         });
     };
@@ -236,7 +238,7 @@ var SciChartRenderer = /** @class */ (function () {
     };
     SciChartRenderer.prototype.tryPerformAutoRangeOn = function (axis, sciChartSurface) {
         var shouldAutoRange = axis.autoRange === AutoRange_1.EAutoRange.Always ||
-            (axis.autoRange === AutoRange_1.EAutoRange.Once && (!axis.hasValidVisibleRange || axis.hasDefaultVisibleRange));
+            (axis.autoRange === AutoRange_1.EAutoRange.Once && (!axis.hasValidVisibleRange() || axis.hasDefaultVisibleRange()));
         if (shouldAutoRange) {
             // Different implementation for YAxis and XAxis because of windowing
             var newRange = axis.getMaximumRange();

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

@@ -20,6 +20,10 @@ export declare enum EDraggingGripPoint {
  * Options passed to the constructor of an {@link AnnotationBase}, used to configure it at instantiation time
  */
 export interface IAnnotationBaseOptions {
+    /**
+     * A unique Id for the {@link IAnnotation}
+     */
+    id?: string;
     /**
      * @description The layer to place the annotation on. See {@link EAnnotationLayer} for a list of values
      * @remarks applicable only to WebGL annotations
@@ -198,6 +202,8 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     dragDelta: EventHandler<AnnotationDragDeltaEventArgs>;
     showWarning: boolean;
     /** @inheritDoc */
+    readonly id: string;
+    /** @inheritDoc */
     abstract readonly type: EAnnotationType;
     /** @inheritDoc */
     readonly isSvgAnnotation: boolean;
@@ -321,7 +327,7 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     onDpiChanged(args: TDpiChangedEventArgs): void;
     toJSON(): {
         type: EAnnotationType;
-        options: IAnnotationBaseOptions;
+        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     /**
      * Returns annotationBorders
@@ -430,23 +436,3 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
      */
     protected setAnnotationBorders(x1: number, x2: number, y1: number, y2: number): void;
 }
-export declare const calcNewApex: (x1: number, y1: number, x2: number, y2: number) => {
-    point1: {
-        x: number;
-        y: number;
-    };
-    point2: {
-        x: number;
-        y: number;
-    };
-    point3: {
-        x: number;
-        y: number;
-    };
-    point4: {
-        x: number;
-        y: number;
-    };
-};
-/** @ignore */
-export declare const createSvg: (svgString: string, svgRoot: SVGSVGElement) => SVGElement;

package/Charting/Visuals/Annotations/AnnotationBase.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSvg = exports.calcNewApex = exports.AnnotationBase = exports.ECoordinateMode = exports.EDraggingGripPoint = void 0;
+exports.AnnotationBase = exports.ECoordinateMode = exports.EDraggingGripPoint = void 0;
+var classFactory_1 = require("../../../Builder/classFactory");
 var EventHandler_1 = require("../../../Core/EventHandler");
 var Guard_1 = require("../../../Core/Guard");
 var Point_1 = require("../../../Core/Point");
+var BaseType_1 = require("../../../types/BaseType");
 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 DpiHelper_1 = require("../TextureManager/DpiHelper");
@@ -56,7 +59,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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         this.showWarning = true;
         this.prevIsSelected = true;
         /** the annotation absolute coordinates */
@@ -76,53 +79,48 @@ var AnnotationBase = /** @class */ (function () {
         this.yCoordinateModeProperty = ECoordinateMode.DataValue;
         this.isSelectedProperty = false;
         this.resizeDirectionsProperty = XyDirection_1.EXyDirection.XyDirection;
+        this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : guid_1.generateGuid();
         this.dragStarted = new EventHandler_1.EventHandler();
         this.dragEnded = new EventHandler_1.EventHandler();
         this.dragDelta = new EventHandler_1.EventHandler();
-        this.annotationLayerProperty = (_a = options === null || options === void 0 ? void 0 : options.annotationLayer) !== null && _a !== void 0 ? _a : this.annotationLayerProperty;
-        this.resizeDirectionsProperty = (_b = options === null || options === void 0 ? void 0 : options.resizeDirections) !== null && _b !== void 0 ? _b : this.resizeDirectionsProperty;
-        this.isEditableProperty = (_c = options === null || options === void 0 ? void 0 : options.isEditable) !== null && _c !== void 0 ? _c : this.isEditableProperty;
-        this.isHiddenProperty = (_d = options === null || options === void 0 ? void 0 : options.isHidden) !== null && _d !== void 0 ? _d : this.isHiddenProperty;
-        this.x1Property = (_e = options === null || options === void 0 ? void 0 : options.x1) !== null && _e !== void 0 ? _e : this.x1Property;
-        this.y1Property = (_f = options === null || options === void 0 ? void 0 : options.y1) !== null && _f !== void 0 ? _f : this.y1Property;
-        this.x2Property = (_g = options === null || options === void 0 ? void 0 : options.x2) !== null && _g !== void 0 ? _g : this.x2Property;
-        this.y2Property = (_h = options === null || options === void 0 ? void 0 : options.y2) !== null && _h !== void 0 ? _h : this.y2Property;
-        this.xAxisIdProperty = (_j = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _j !== void 0 ? _j : this.xAxisIdProperty;
-        this.yAxisIdProperty = (_k = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _k !== void 0 ? _k : this.yAxisIdProperty;
-        this.xCoordinateModeProperty = (_l = options === null || options === void 0 ? void 0 : options.xCoordinateMode) !== null && _l !== void 0 ? _l : this.xCoordinateModeProperty;
-        this.yCoordinateModeProperty = (_m = options === null || options === void 0 ? void 0 : options.yCoordinateMode) !== null && _m !== void 0 ? _m : this.yCoordinateModeProperty;
-        this.isSelectedProperty = (_o = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _o !== void 0 ? _o : this.isSelectedProperty;
-        this.opacityProperty = (_p = options === null || options === void 0 ? void 0 : options.opacity) !== null && _p !== void 0 ? _p : 1.0;
+        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;
+        this.isHiddenProperty = (_e = options === null || options === void 0 ? void 0 : options.isHidden) !== null && _e !== void 0 ? _e : this.isHiddenProperty;
+        this.x1Property = (_f = options === null || options === void 0 ? void 0 : options.x1) !== null && _f !== void 0 ? _f : this.x1Property;
+        this.y1Property = (_g = options === null || options === void 0 ? void 0 : options.y1) !== null && _g !== void 0 ? _g : this.y1Property;
+        this.x2Property = (_h = options === null || options === void 0 ? void 0 : options.x2) !== null && _h !== void 0 ? _h : this.x2Property;
+        this.y2Property = (_j = options === null || options === void 0 ? void 0 : options.y2) !== null && _j !== void 0 ? _j : this.y2Property;
+        this.xAxisIdProperty = (_k = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _k !== void 0 ? _k : this.xAxisIdProperty;
+        this.yAxisIdProperty = (_l = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _l !== void 0 ? _l : this.yAxisIdProperty;
+        this.xCoordinateModeProperty = (_m = options === null || options === void 0 ? void 0 : options.xCoordinateMode) !== null && _m !== void 0 ? _m : this.xCoordinateModeProperty;
+        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;
         if (options === null || options === void 0 ? void 0 : options.onDragStarted) {
             if (typeof options.onDragStarted === "string") {
                 this.typeMap.set("onDragStarted", options.onDragStarted);
-                // @ts-ignore
-                this.dragStarted.subscribe(getFunction(EBaseType.OptionFunction, options.onDragStarted));
+                this.dragStarted.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDragStarted));
             }
             else {
-                // @ts-ignore
                 this.dragStarted.subscribe(options.onDragStarted);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.onDragEnded) {
             if (typeof options.onDragEnded === "string") {
                 this.typeMap.set("onDragEnded", options.onDragEnded);
-                // @ts-ignore
-                this.dragEnded.subscribe(getFunction(EBaseType.OptionFunction, options.onDragEnded));
+                this.dragEnded.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDragEnded));
             }
             else {
-                // @ts-ignore
                 this.dragEnded.subscribe(options.onDragEnded);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.onDrag) {
             if (typeof options.onDrag === "string") {
                 this.typeMap.set("onDrag", options.onDrag);
-                // @ts-ignore
-                this.dragDelta.subscribe(getFunction(EBaseType.OptionFunction, options.onDrag));
+                this.dragDelta.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDrag));
             }
             else {
-                // @ts-ignore
                 this.dragDelta.subscribe(options.onDrag);
             }
         }
@@ -395,6 +393,7 @@ var AnnotationBase = /** @class */ (function () {
     AnnotationBase.prototype.onDpiChanged = function (args) { };
     AnnotationBase.prototype.toJSON = function () {
         var options = {
+            id: this.id,
             annotationLayer: this.annotationLayer,
             isEditable: this.isEditable,
             isHidden: this.isHidden,
@@ -404,10 +403,10 @@ var AnnotationBase = /** @class */ (function () {
             onDragStarted: this.typeMap.get("onDragStarted"),
             opacity: this.opacity,
             resizeDirections: this.resizeDirections,
-            x1: this.x1,
-            x2: this.x2,
-            y1: this.y1,
-            y2: this.y2,
+            x1: this.x1Property,
+            x2: this.x2Property,
+            y1: this.y1Property,
+            y2: this.y2Property,
             xAxisId: this.xAxisId,
             yAxisId: this.yAxisId,
             xCoordinateMode: this.xCoordinateMode,
@@ -668,16 +667,3 @@ var AnnotationBase = /** @class */ (function () {
     return AnnotationBase;
 }());
 exports.AnnotationBase = AnnotationBase;
-exports.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 };
-};
-/** @ignore */
-exports.createSvg = function (svgString, svgRoot) {
-    var svgNode = document.createRange().createContextualFragment(svgString);
-    svgRoot.appendChild(svgNode);
-    return svgRoot.lastChild;
-};

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

@@ -170,7 +170,7 @@ export declare class AxisMarkerAnnotation extends RenderContextAnnotationBase {
     calcDragDistance(xyValues: Point): void;
     toJSON(): {
         type: EAnnotationType;
-        options: IAnnotationBaseOptions;
+        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;
     private updateAdornerInner;

package/Charting/Visuals/Annotations/AxisMarkerAnnotation.js

@@ -24,6 +24,7 @@ var AnnotationBase_1 = require("./AnnotationBase");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var RenderContextAnnotationBase_1 = require("./RenderContextAnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 /**
  * @summary The {@link AxisMarkerAnnotation} provides an {@link AnnotationBase | Annotation} which draws a marker at
  * specified value on the axis over the {@link SciChartSurface}
@@ -298,9 +299,6 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
     });
     /** @inheritDoc */
     AxisMarkerAnnotation.prototype.drawWithContext = function (renderContext, xCalc, yCalc, viewRect) {
-        if (this.isHidden) {
-            return;
-        }
         Guard_1.Guard.notNull(renderContext, "renderContext");
         Guard_1.Guard.notNull(xCalc, "xCalc");
         Guard_1.Guard.notNull(yCalc, "yCalc");
@@ -406,7 +404,7 @@ var AxisMarkerAnnotation = /** @class */ (function (_super) {
             var _b = this.calculateAdornerCenter(), x = _b.x, y = _b.y;
             var svgString = svgStringAdornerTemplate(x1, y1, x2, y2, x, y);
             var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
-            this.svgAdorner = AnnotationBase_1.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     /**

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

@@ -90,7 +90,7 @@ export declare class BoxAnnotation extends RenderContextAnnotationBase {
     onDpiChanged(args: TDpiChangedEventArgs): void;
     toJSON(): {
         type: EAnnotationType;
-        options: IAnnotationBaseOptions;
+        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;
     protected notifyPropertyChanged(propertyName: string): void;

package/Charting/Visuals/Annotations/BoxAnnotation.js

@@ -25,6 +25,7 @@ var BrushCache_1 = require("../../Drawing/BrushCache");
 var Pen2DCache_1 = require("../../Drawing/Pen2DCache");
 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");
@@ -149,7 +150,7 @@ var BoxAnnotation = /** @class */ (function (_super) {
     };
     BoxAnnotation.prototype.onDragStarted = function (args) {
         _super.prototype.onDragStarted.call(this, args);
-        var _a = AnnotationBase_1.calcNewApex(this.x1, this.y1, this.x2, this.y2), point1 = _a.point1, point2 = _a.point2, point3 = _a.point3, point4 = _a.point4;
+        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));
@@ -308,7 +309,7 @@ var BoxAnnotation = /** @class */ (function (_super) {
         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);
-            this.svgAdorner = AnnotationBase_1.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     return BoxAnnotation;

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

@@ -28,7 +28,7 @@ export declare class CustomAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     toJSON(): {
         type: EAnnotationType;
-        options: import("./AnnotationBase").IAnnotationBaseOptions;
+        options: Required<Pick<import("./AnnotationBase").IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;

package/Charting/Visuals/Annotations/CustomAnnotation.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomAnnotation = void 0;
-var AnnotationBase_1 = require("./AnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 /**
@@ -59,7 +59,7 @@ var CustomAnnotation = /** @class */ (function (_super) {
             if (this.svg) {
                 this.delete();
             }
-            this.setSvg(AnnotationBase_1.createSvg(this.svgString, this.svgRoot));
+            this.setSvg(annotationHelpers_1.annotationHelpers.createSvg(this.svgString, this.svgRoot));
             this.calcAndSetAnnotationBorders(xCalc, yCalc);
             this.updateAdornerInner();
             this.prevIsSelected = this.isSelected;

package/Charting/Visuals/Annotations/HorizontalLineAnnotation.js

@@ -96,9 +96,6 @@ var HorizontalLineAnnotation = /** @class */ (function (_super) {
     });
     /** @inheritDoc */
     HorizontalLineAnnotation.prototype.drawWithContext = function (renderContext, xCalc, yCalc, viewRect) {
-        if (this.isHidden) {
-            return;
-        }
         Guard_1.Guard.notNull(renderContext, "renderContext");
         Guard_1.Guard.notNull(xCalc, "xCalc");
         Guard_1.Guard.notNull(yCalc, "yCalc");

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

@@ -106,6 +106,10 @@ export declare enum EAnnotationType {
  * Defines the interface to an Annotation - a type of marker, text label, line or custom UI overlay on a 2D Cartesian {@link SciChartSurface}
  */
 export interface IAnnotation extends IDeletable, INotifyOnDpiChanged {
+    /**
+     * A unique Id for the {@link IAnnotation}
+     */
+    readonly id: string;
     /**
      * @description annotation type. See {@link EAnnotationType} for a list of values
      */

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

@@ -183,7 +183,7 @@ export declare class LineAnnotation extends RenderContextAnnotationBase {
     onDpiChanged(args: TDpiChangedEventArgs): void;
     toJSON(): {
         type: EAnnotationType;
-        options: IAnnotationBaseOptions;
+        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;
     protected notifyPropertyChanged(propertyName: string): void;

package/Charting/Visuals/Annotations/LineAnnotation.js

@@ -31,6 +31,7 @@ var Pen2DCache_1 = require("../../Drawing/Pen2DCache");
 var drawLabel_1 = require("../Helpers/drawLabel");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var AnnotationBase_1 = require("./AnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var RenderContextAnnotationBase_1 = require("./RenderContextAnnotationBase");
@@ -266,9 +267,6 @@ var LineAnnotation = /** @class */ (function (_super) {
     /** @inheritDoc */
     LineAnnotation.prototype.drawWithContext = function (renderContext, xCalc, yCalc, viewRect) {
         var _this = this;
-        if (this.isHidden) {
-            return;
-        }
         Guard_1.Guard.notNull(renderContext, "renderContext");
         Guard_1.Guard.notNull(xCalc, "xCalc");
         Guard_1.Guard.notNull(yCalc, "yCalc");
@@ -447,7 +445,7 @@ var LineAnnotation = /** @class */ (function (_super) {
         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);
-            this.svgAdorner = AnnotationBase_1.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     return LineAnnotation;

package/Charting/Visuals/Annotations/OverviewCustomResizableAnnotation.js

@@ -19,6 +19,7 @@ var XyDirection_1 = require("../../../types/XyDirection");
 var pointUtil_1 = require("../../../utils/pointUtil");
 var translate_1 = require("../../../utils/translate");
 var AnnotationBase_1 = require("./AnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var CustomAnnotation_1 = require("./CustomAnnotation");
 /**
@@ -355,7 +356,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
         if (this.svg) {
             return;
         }
-        this.setSvg(AnnotationBase_1.createSvg(this.svgString, this.svgRoot));
+        this.setSvg(annotationHelpers_1.annotationHelpers.createSvg(this.svgString, this.svgRoot));
         // @ts-ignore
         var svgRect = this.svg.getBBox();
         var x1Coord = this.getX1Coordinate(xCalc, yCalc);
@@ -414,7 +415,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
             var _a = this.getAdornerAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
             var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
             var svgString = this.adornerSvgStringTemplate(x1, y1, x2, y2);
-            this.svgAdorner = AnnotationBase_1.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     OverviewCustomResizableAnnotation.prototype.adjustLeftSideToLimits = function (x2Coord, expectedLeftPoint, horizontalCalc) {

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -183,7 +183,7 @@ var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">" + val + "</tspan>";
     });
-    return "<svg width=\"" + width + "\" height=\"" + height + "\">\n        <defs>\n            <filter id=\"" + id + "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"" + tooltipColor + "\" filter=\"url(#" + id + ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"" + tooltipTextColor + "\">" + valuesBlock + "</text>\n        </svg>\n    </svg>";
+    return "<svg class=\"scichart__rollover-tooltip\" width=\"" + width + "\" height=\"" + height + "\">\n        <defs>\n            <filter id=\"" + id + "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"" + tooltipColor + "\" filter=\"url(#" + id + ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"" + tooltipTextColor + "\">" + valuesBlock + "</text>\n        </svg>\n    </svg>";
 };
 /** @ignore */
 var calcTooltipWidth = function (textLength, fontSize) {

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

@@ -84,7 +84,7 @@ export declare abstract class SvgAnnotationBase extends AnnotationBase {
     delete(): void;
     toJSON(): {
         type: import("./IAnnotation").EAnnotationType;
-        options: IAnnotationBaseOptions;
+        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     get svg(): SVGElement;
     protected checkIsClickedOnAnnotationInternal(x: number, y: number): boolean;

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -20,6 +20,7 @@ var pointUtil_1 = require("../../../utils/pointUtil");
 var translate_1 = require("../../../utils/translate");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var AnnotationBase_1 = require("./AnnotationBase");
+var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 /**
  * The Base class for an {@link AnnotationBase | Annotation} which draws using an HTML5 SVG canvas
@@ -149,7 +150,7 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         else if (this.verticalAnchorPointProperty === AnchorPoint_1.EVerticalAnchorPoint.Bottom) {
             shiftY -= svgHeight;
         }
-        this.svg.style.display = this.isHidden ? "none" : "block";
+        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);
@@ -255,7 +256,7 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         }
         if (this.isSelected) {
             var svgString = svgStringAdornerTemplate(x1, y1, x2, y2, this.verticalAnchorPoint, this.horizontalAnchorPoint);
-            this.svgAdorner = AnnotationBase_1.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
         }
     };
     Object.defineProperty(SvgAnnotationBase.prototype, "svgRoot", {

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

@@ -70,7 +70,7 @@ export declare class TextAnnotation extends SvgAnnotationBase {
     set fontWeight(fontWeight: string);
     toJSON(): {
         type: EAnnotationType;
-        options: import("./AnnotationBase").IAnnotationBaseOptions;
+        options: Required<Pick<import("./AnnotationBase").IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
     };
     /**
      * Notifies listeners of {@link invalidateParentCallback} that a property has changed