scichart 2.0.2139 → 2.0.2185

package/Charting/Services/Workers/TextureWorker.js

@@ -0,0 +1,138 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textureWorker = void 0;
+var app_1 = require("../../../constants/app");
+var resolves = {};
+var rejects = {};
+var globalMsgId = 0;
+// Activate calculation in the worker, returning a promise
+function sendMsg(payload, worker, method) {
+    var msgId = globalMsgId++;
+    var msg = {
+        id: msgId,
+        payload: payload,
+        method: method
+    };
+    return new Promise(function (resolve, reject) {
+        // save callbacks for later
+        resolves[msgId] = resolve;
+        rejects[msgId] = reject;
+        worker.postMessage(msg);
+    });
+}
+// Handle incoming calculation result
+function handleMsg(msg) {
+    var _a = msg.data, id = _a.id, err = _a.err, payload = _a.payload;
+    if (payload) {
+        var resolve = resolves[id];
+        if (resolve) {
+            resolve(payload);
+        }
+    }
+    else {
+        // error condition
+        var reject = rejects[id];
+        if (reject) {
+            if (err) {
+                reject(err);
+            }
+            else {
+                reject("Got nothing");
+            }
+        }
+    }
+    // purge used callbacks
+    delete resolves[id];
+    delete rejects[id];
+}
+// Wrapper class
+var TextureWorkerWrapper = /** @class */ (function () {
+    function TextureWorkerWrapper() {
+        var _this = this;
+        this.timeout = 200;
+        this.isActiveProperty = true;
+        if (!app_1.IS_TEST_ENV && typeof window !== "undefined" && !!window.Worker) {
+            this.worker = this.makeWorker(); // new Worker("./TextureWorkerSource.ts", { type: "module" });
+            this.worker.onmessage = handleMsg;
+            this.worker.onerror = function (ev) {
+                console.warn("Label Worker could not be started", ev);
+                _this.isActiveProperty = false;
+            };
+        }
+        else {
+            this.isActiveProperty = false;
+        }
+    }
+    Object.defineProperty(TextureWorkerWrapper.prototype, "isActive", {
+        get: function () {
+            return this.isActiveProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextureWorkerWrapper.prototype.measureAndGetImageData = function (text, textStyle, rotation, lineSpacing, backgroundColor, opacity) {
+        return __awaiter(this, void 0, void 0, function () {
+            var payload, result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.isActiveProperty) {
+                            return [2 /*return*/, Promise.reject("Worker is inactive")];
+                        }
+                        payload = { text: text, textStyle: textStyle, rotation: rotation, lineSpacing: lineSpacing, backgroundColor: backgroundColor, opacity: opacity };
+                        return [4 /*yield*/, sendMsg(payload, this.worker)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, result];
+                }
+            });
+        });
+    };
+    TextureWorkerWrapper.prototype.makeWorker = function () {
+        var blobURL = URL.createObjectURL(new Blob([
+            "\n        var DEFAULT_HEIGHT = 1080;\n        var DEFAULT_WIDTH = 1920;\n        var ELabelAlignment;\n        (function (ELabelAlignment) {\n            ELabelAlignment[\"Auto\"] = \"Auto\";\n            ELabelAlignment[\"Left\"] = \"Left\";\n            ELabelAlignment[\"Right\"] = \"Right\";\n            ELabelAlignment[\"Center\"] = \"Center\";\n        })(ELabelAlignment || (ELabelAlignment = {}));\n        var canvas = new OffscreenCanvas(DEFAULT_WIDTH, DEFAULT_HEIGHT);\n        var ctx = canvas.getContext(\"2d\");\n        var createTextTexture = function (text, textStyle, rotation, lineSpacing, backgroundColor, opacity) {\n            var fontStyle = textStyle.fontStyle, fontWeight = textStyle.fontWeight, fontFamily = textStyle.fontFamily, fontSizePx = textStyle.fontSize, padding = textStyle.padding, alignment = textStyle.alignment, color = textStyle.color;\n            ctx.globalAlpha = opacity !== null && opacity !== void 0 ? opacity : 1;\n            ctx.textBaseline = \"top\";\n            ctx.fillStyle = color;\n            ctx.font = getFontString(fontStyle, fontWeight, fontSizePx, fontFamily);\n            var textureWidth = 0;\n            // const fontSizePt = Math.ceil(fontSizePx * PX_TO_PT);\n            var lineHeight = measureTextHeight(fontSizePx);\n            var extraLineHeight = lineHeight * (lineSpacing !== null && lineSpacing !== void 0 ? lineSpacing : 1.1);\n            var textureHeight = lineHeight + padding.top + padding.bottom;\n            for (var index = 0; index < text.length; index++) {\n                var line = text[index];\n                var lineWidth = measureTextWidth(line) + padding.left + padding.right;\n                if (lineWidth > textureWidth) {\n                    textureWidth = lineWidth;\n                }\n                if (index > 0) {\n                    textureHeight += extraLineHeight;\n                }\n            }\n            var y = padding.top;\n            var x = padding.left;\n            if (!textureWidth || !textureHeight) {\n                return undefined;\n            }\n            var newTextureWidth = textureWidth;\n            var newTextureHeight = textureHeight;\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n            if (backgroundColor) {\n                ctx.fillStyle = backgroundColor;\n                ctx.fillRect(0, 0, canvas.width, canvas.height);\n            }\n            // Save state\n            ctx.save();\n            if (rotation) {\n                // convert to radians\n                var rotationRad = (rotation * Math.PI) / 180;\n                // We need to Math.ceil to fix rotation for WebGL1\n                newTextureWidth = Math.ceil(textureWidth * Math.abs(Math.cos(rotationRad)) + textureHeight * Math.abs(Math.sin(rotationRad)));\n                newTextureHeight = Math.ceil(textureWidth * Math.abs(Math.sin(rotationRad)) + textureHeight * Math.abs(Math.cos(rotationRad)));\n                // translate to the center of rectangle\n                ctx.translate(newTextureWidth / 2, newTextureHeight / 2);\n                ctx.rotate(rotationRad);\n                // translate to the new origin that is located in the left top center of the texture\n                ctx.translate(-textureWidth / 2, -textureHeight / 2);\n            }\n            for (var _i = 0, text_1 = text; _i < text_1.length; _i++) {\n                var line = text_1[_i];\n                if (alignment === ELabelAlignment.Center || alignment === ELabelAlignment.Right) {\n                    var lineWidth = measureTextWidth(line);\n                    x =\n                        alignment === ELabelAlignment.Right\n                            ? textureWidth - lineWidth - padding.right\n                            : (textureWidth - lineWidth) / 2;\n                }\n                ctx.fillText(line, Math.round(x), Math.round(y));\n                y += extraLineHeight;\n            }\n            ctx.strokeStyle = color;\n            ctx.restore();\n            var imageData = ctx.getImageData(0, 0, newTextureWidth, newTextureHeight);\n            return {\n                imageData: imageData,\n                textureWidth: newTextureWidth,\n                textureHeight: newTextureHeight\n            };\n        };\n        var measureTextHeight = function (fontSizePx) { return fontSizePx; };\n        var measureTextWidth = function (text) {\n            var textMeasure = ctx.measureText(text);\n            return Math.ceil(textMeasure.width);\n        };\n        var getFontString = function (fontStyle, fontWeight, fontSize, fontFamily) {\n            if (!fontWeight)\n                return fontStyle + \" \" + fontSize + \"px \" + fontFamily;\n            return fontStyle + \" \" + fontWeight + \" \" + fontSize + \"px \" + fontFamily;\n        };\n        self.onmessage = function (msg) {\n            var _a = msg.data, id = _a.id, payload = _a.payload, method = _a.method;\n            var text = payload.text, textStyle = payload.textStyle, rotation = payload.rotation, lineSpacing = payload.lineSpacing, backgroundColor = payload.backgroundColor, opacity = payload.opacity;\n            try {\n                var result = createTextTexture(text, textStyle, rotation, lineSpacing, backgroundColor, opacity);\n                var reply = {\n                    id: id,\n                    payload: result\n                };\n                self.postMessage(reply);\n            }\n            catch (err) {\n                self.postMessage({\n                    id: id,\n                    err: err,\n                    payload: undefined\n                });\n            }\n        };"
+        ], { type: "application/javascript" }));
+        var worker = new Worker(blobURL);
+        // Won't be needing this anymore
+        URL.revokeObjectURL(blobURL);
+        return worker;
+    };
+    return TextureWorkerWrapper;
+}());
+exports.textureWorker = new TextureWorkerWrapper();

package/Charting/Services/Workers/TextureWorkerSource.d.ts

@@ -0,0 +1 @@
+export {};

package/Charting/Services/Workers/TextureWorkerSource.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @ignore */
+var DEFAULT_HEIGHT = 1080;
+/** @ignore */
+var DEFAULT_WIDTH = 1920;
+var ELabelAlignment;
+(function (ELabelAlignment) {
+    ELabelAlignment["Auto"] = "Auto";
+    ELabelAlignment["Left"] = "Left";
+    ELabelAlignment["Right"] = "Right";
+    ELabelAlignment["Center"] = "Center";
+})(ELabelAlignment || (ELabelAlignment = {}));
+// @ts-ignore
+var canvas = new OffscreenCanvas(DEFAULT_WIDTH, DEFAULT_HEIGHT);
+// @ts-ignore
+var ctx = canvas.getContext("2d");
+/**
+ * Create a text texture supporting multiline and arbitrary rotation
+ * @param text
+ * @param textStyle
+ * @param rotation
+ * @param lineSpacing Expressed as a fraction of the font size. Default 1.1
+ * @param backgroundColor
+ * @param opacity
+ * @returns
+ */
+// tslint:disable-next-line: no-unused-expression
+var createTextTexture = function (text, textStyle, rotation, lineSpacing, backgroundColor, opacity) {
+    var fontStyle = textStyle.fontStyle, fontWeight = textStyle.fontWeight, fontFamily = textStyle.fontFamily, fontSizePx = textStyle.fontSize, padding = textStyle.padding, alignment = textStyle.alignment, color = textStyle.color;
+    // console.log("Creating label for", text[0], fontSizePx);
+    ctx.globalAlpha = opacity !== null && opacity !== void 0 ? opacity : 1;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = color;
+    ctx.font = getFontString(fontStyle, fontWeight, fontSizePx, fontFamily);
+    var textureWidth = 0;
+    // const fontSizePt = Math.ceil(fontSizePx * PX_TO_PT);
+    var lineHeight = measureTextHeight(fontSizePx);
+    var extraLineHeight = lineHeight * (lineSpacing !== null && lineSpacing !== void 0 ? lineSpacing : 1.1);
+    var textureHeight = lineHeight + padding.top + padding.bottom;
+    for (var index = 0; index < text.length; index++) {
+        var line = text[index];
+        var lineWidth = measureTextWidth(line) + padding.left + padding.right;
+        if (lineWidth > textureWidth) {
+            textureWidth = lineWidth;
+        }
+        if (index > 0) {
+            textureHeight += extraLineHeight;
+        }
+    }
+    var y = padding.top;
+    var x = padding.left;
+    if (!textureWidth || !textureHeight) {
+        return undefined;
+    }
+    var newTextureWidth = textureWidth;
+    var newTextureHeight = textureHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (backgroundColor) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    // Save state
+    ctx.save();
+    if (rotation) {
+        // convert to radians
+        var rotationRad = (rotation * Math.PI) / 180;
+        // We need to Math.ceil to fix rotation for WebGL1
+        newTextureWidth = Math.ceil(textureWidth * Math.abs(Math.cos(rotationRad)) + textureHeight * Math.abs(Math.sin(rotationRad)));
+        newTextureHeight = Math.ceil(textureWidth * Math.abs(Math.sin(rotationRad)) + textureHeight * Math.abs(Math.cos(rotationRad)));
+        // translate to the center of rectangle
+        ctx.translate(newTextureWidth / 2, newTextureHeight / 2);
+        ctx.rotate(rotationRad);
+        // translate to the new origin that is located in the left top center of the texture
+        ctx.translate(-textureWidth / 2, -textureHeight / 2);
+    }
+    for (var _i = 0, text_1 = text; _i < text_1.length; _i++) {
+        var line = text_1[_i];
+        if (alignment === ELabelAlignment.Center || alignment === ELabelAlignment.Right) {
+            var lineWidth = measureTextWidth(line);
+            x =
+                alignment === ELabelAlignment.Right
+                    ? textureWidth - lineWidth - padding.right
+                    : (textureWidth - lineWidth) / 2;
+        }
+        ctx.fillText(line, Math.round(x), Math.round(y));
+        y += extraLineHeight;
+    }
+    ctx.strokeStyle = color;
+    ctx.restore();
+    // Useful for debugging rotated textures
+    // ctx.beginPath();
+    // ctx.rect(0, 0, newTextureWidth, newTextureHeight);
+    // ctx.stroke();
+    var imageData = ctx.getImageData(0, 0, newTextureWidth, newTextureHeight);
+    // console.log("Returning label for", text[0], fontSizePx);
+    return {
+        imageData: imageData,
+        textureWidth: newTextureWidth,
+        textureHeight: newTextureHeight
+    };
+};
+var measureTextHeight = function (fontSizePx) { return fontSizePx; };
+// @ts-ignore
+var measureTextWidth = function (text) {
+    var textMeasure = ctx.measureText(text);
+    return Math.ceil(textMeasure.width);
+};
+var getFontString = function (fontStyle, fontWeight, fontSize, fontFamily) {
+    if (!fontWeight)
+        return "".concat(fontStyle, " ").concat(fontSize, "px ").concat(fontFamily);
+    return "".concat(fontStyle, " ").concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily);
+};
+// Handle incoming messages
+self.onmessage = function (msg) {
+    var _a = msg.data, id = _a.id, payload = _a.payload, method = _a.method;
+    var text = payload.text, textStyle = payload.textStyle, rotation = payload.rotation, lineSpacing = payload.lineSpacing, backgroundColor = payload.backgroundColor, opacity = payload.opacity;
+    try {
+        var result = createTextTexture(text, textStyle, rotation, lineSpacing, backgroundColor, opacity);
+        var reply = {
+            id: id,
+            payload: result
+        };
+        self.postMessage(reply);
+    }
+    catch (err) {
+        self.postMessage({
+            id: id,
+            err: err,
+            payload: undefined
+        });
+    }
+};

package/Charting/Themes/SciChartJSDarkTheme.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/Charting/Themes/SciChartJSDarkv2Theme.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/Charting/Themes/SciChartJSLightTheme.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

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

@@ -327,7 +327,7 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     onDpiChanged(args: TDpiChangedEventArgs): void;
     toJSON(): {
         type: EAnnotationType;
-        options: Required<Pick<IAnnotationBaseOptions, "opacity" | "id" | "annotationLayer" | "isHidden" | "resizeDirections" | "isEditable" | "x1" | "x2" | "y1" | "y2" | "xAxisId" | "xCoordinateMode" | "yAxisId" | "yCoordinateMode" | "isSelected" | "onDragStarted" | "onDragEnded" | "onDrag">>;
+        options: Required<Omit<IAnnotationBaseOptions, never>>;
     };
     /**
      * Returns annotationBorders

package/Charting/Visuals/Annotations/AnnotationBase.js

@@ -79,7 +79,7 @@ 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.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
         this.dragStarted = new EventHandler_1.EventHandler();
         this.dragEnded = new EventHandler_1.EventHandler();
         this.dragDelta = new EventHandler_1.EventHandler();
@@ -100,7 +100,7 @@ var AnnotationBase = /** @class */ (function () {
         if (options === null || options === void 0 ? void 0 : options.onDragStarted) {
             if (typeof options.onDragStarted === "string") {
                 this.typeMap.set("onDragStarted", options.onDragStarted);
-                this.dragStarted.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDragStarted));
+                this.dragStarted.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragStarted));
             }
             else {
                 this.dragStarted.subscribe(options.onDragStarted);
@@ -109,7 +109,7 @@ var AnnotationBase = /** @class */ (function () {
         if (options === null || options === void 0 ? void 0 : options.onDragEnded) {
             if (typeof options.onDragEnded === "string") {
                 this.typeMap.set("onDragEnded", options.onDragEnded);
-                this.dragEnded.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDragEnded));
+                this.dragEnded.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDragEnded));
             }
             else {
                 this.dragEnded.subscribe(options.onDragEnded);
@@ -118,7 +118,7 @@ var AnnotationBase = /** @class */ (function () {
         if (options === null || options === void 0 ? void 0 : options.onDrag) {
             if (typeof options.onDrag === "string") {
                 this.typeMap.set("onDrag", options.onDrag);
-                this.dragDelta.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onDrag));
+                this.dragDelta.subscribe((0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.onDrag));
             }
             else {
                 this.dragDelta.subscribe(options.onDrag);
@@ -132,8 +132,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (annotationCanvas) {
-            this.annotationLayerProperty = annotationCanvas;
-            this.notifyPropertyChanged(constants_1.PROPERTY.ANNOTATION_CANVAS);
+            if (this.annotationLayerProperty !== annotationCanvas) {
+                this.annotationLayerProperty = annotationCanvas;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ANNOTATION_CANVAS);
+            }
         },
         enumerable: false,
         configurable: true
@@ -145,8 +147,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (parentSurface) {
-            this.parentSurfaceProperty = parentSurface;
-            this.notifyPropertyChanged(constants_1.PROPERTY.PARENT_SURFACE);
+            if (this.parentSurfaceProperty !== parentSurface) {
+                this.parentSurfaceProperty = parentSurface;
+                this.notifyPropertyChanged(constants_1.PROPERTY.PARENT_SURFACE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -158,8 +162,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (isEditable) {
-            this.isEditableProperty = isEditable;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_EDITABLE);
+            if (this.isEditableProperty !== isEditable) {
+                this.isEditableProperty = isEditable;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_EDITABLE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -171,8 +177,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (isHidden) {
-            this.isHiddenProperty = isHidden;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_HIDDEN);
+            if (this.isHiddenProperty !== isHidden) {
+                this.isHiddenProperty = isHidden;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_HIDDEN);
+            }
         },
         enumerable: false,
         configurable: true
@@ -184,8 +192,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (xCoordinateMode) {
-            this.xCoordinateModeProperty = xCoordinateMode;
-            this.notifyPropertyChanged(constants_1.PROPERTY.X_COORDINATE_MODE);
+            if (this.xCoordinateModeProperty !== xCoordinateMode) {
+                this.xCoordinateModeProperty = xCoordinateMode;
+                this.notifyPropertyChanged(constants_1.PROPERTY.X_COORDINATE_MODE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -197,8 +207,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (yCoordinateMode) {
-            this.yCoordinateModeProperty = yCoordinateMode;
-            this.notifyPropertyChanged(constants_1.PROPERTY.Y_COORDINATE_MODE);
+            if (this.yCoordinateModeProperty !== yCoordinateMode) {
+                this.yCoordinateModeProperty = yCoordinateMode;
+                this.notifyPropertyChanged(constants_1.PROPERTY.Y_COORDINATE_MODE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -210,8 +222,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (x1) {
-            this.x1Property = x1;
-            this.notifyPropertyChanged(constants_1.PROPERTY.X1);
+            if (this.x1Property !== x1) {
+                this.x1Property = x1;
+                this.notifyPropertyChanged(constants_1.PROPERTY.X1);
+            }
         },
         enumerable: false,
         configurable: true
@@ -223,8 +237,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (x2) {
-            this.x2Property = x2;
-            this.notifyPropertyChanged(constants_1.PROPERTY.X2);
+            if (this.x2Property !== x2) {
+                this.x2Property = x2;
+                this.notifyPropertyChanged(constants_1.PROPERTY.X2);
+            }
         },
         enumerable: false,
         configurable: true
@@ -236,8 +252,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (y1) {
-            this.y1Property = y1;
-            this.notifyPropertyChanged(constants_1.PROPERTY.Y1);
+            if (this.y1Property !== y1) {
+                this.y1Property = y1;
+                this.notifyPropertyChanged(constants_1.PROPERTY.Y1);
+            }
         },
         enumerable: false,
         configurable: true
@@ -249,8 +267,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (y2) {
-            this.y2Property = y2;
-            this.notifyPropertyChanged(constants_1.PROPERTY.Y2);
+            if (this.y2Property !== y2) {
+                this.y2Property = y2;
+                this.notifyPropertyChanged(constants_1.PROPERTY.Y2);
+            }
         },
         enumerable: false,
         configurable: true
@@ -262,8 +282,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (xAxisId) {
-            this.xAxisIdProperty = xAxisId;
-            this.notifyPropertyChanged(constants_1.PROPERTY.XAXIS_ID);
+            if (this.xAxisIdProperty !== xAxisId) {
+                this.xAxisIdProperty = xAxisId;
+                this.notifyPropertyChanged(constants_1.PROPERTY.XAXIS_ID);
+            }
         },
         enumerable: false,
         configurable: true
@@ -275,8 +297,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (yAxisId) {
-            this.yAxisIdProperty = yAxisId;
-            this.notifyPropertyChanged(constants_1.PROPERTY.YAXIS_ID);
+            if (this.yAxisIdProperty !== yAxisId) {
+                this.yAxisIdProperty = yAxisId;
+                this.notifyPropertyChanged(constants_1.PROPERTY.YAXIS_ID);
+            }
         },
         enumerable: false,
         configurable: true
@@ -298,8 +322,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (value) {
-            this.resizeDirectionsProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.RESIZE_DIRECTIONS);
+            if (this.resizeDirectionsProperty !== value) {
+                this.resizeDirectionsProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.RESIZE_DIRECTIONS);
+            }
         },
         enumerable: false,
         configurable: true
@@ -311,8 +337,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (value) {
-            this.isSelectedProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_SELECTED);
+            if (this.isSelectedProperty !== value) {
+                this.isSelectedProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_SELECTED);
+            }
         },
         enumerable: false,
         configurable: true
@@ -324,8 +352,10 @@ var AnnotationBase = /** @class */ (function () {
         },
         /** @inheritDoc */
         set: function (opacity) {
-            this.opacityProperty = opacity;
-            this.notifyPropertyChanged(constants_1.PROPERTY.OPACITY);
+            if (this.opacityProperty !== opacity) {
+                this.opacityProperty = opacity;
+                this.notifyPropertyChanged(constants_1.PROPERTY.OPACITY);
+            }
         },
         enumerable: false,
         configurable: true
@@ -358,7 +388,7 @@ var AnnotationBase = /** @class */ (function () {
         this.deleteAdorner();
     };
     AnnotationBase.prototype.clickToSelect = function (args) {
-        var xyPoint = translate_1.translateFromCanvasToSeriesViewRect(args.mousePoint, this.parentSurface.seriesViewRect, true);
+        var xyPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect, true);
         if (!xyPoint) {
             return false;
         }
@@ -373,7 +403,7 @@ var AnnotationBase = /** @class */ (function () {
     };
     AnnotationBase.prototype.checkIsClickedOnAnnotation = function (x, y) {
         // We multiply by PIXEL_RATIO to get coordinates on the scaled canvas
-        var xyPoint = translate_1.translateFromCanvasToSeriesViewRect(new Point_1.Point(x * DpiHelper_1.DpiHelper.PIXEL_RATIO, y * DpiHelper_1.DpiHelper.PIXEL_RATIO), this.parentSurface.seriesViewRect, true);
+        var xyPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(x * DpiHelper_1.DpiHelper.PIXEL_RATIO, y * DpiHelper_1.DpiHelper.PIXEL_RATIO), this.parentSurface.seriesViewRect, true);
         if (!xyPoint)
             return false;
         return this.checkIsClickedOnAnnotationInternal(xyPoint.x, xyPoint.y);
@@ -450,8 +480,8 @@ var AnnotationBase = /** @class */ (function () {
         var x2 = this.isSvgAnnotation ? borders.x2 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.x2;
         var y1 = this.isSvgAnnotation ? borders.y1 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.y1;
         var y2 = this.isSvgAnnotation ? borders.y2 * DpiHelper_1.DpiHelper.PIXEL_RATIO : borders.y2;
-        var point1 = translate_1.translateFromSeriesViewRectToCanvas(new Point_1.Point(x1, y1), this.parentSurface.seriesViewRect, true);
-        var point2 = translate_1.translateFromSeriesViewRectToCanvas(new Point_1.Point(x2, y2), this.parentSurface.seriesViewRect, true);
+        var point1 = (0, translate_1.translateFromSeriesViewRectToCanvas)(new Point_1.Point(x1, y1), this.parentSurface.seriesViewRect, true);
+        var point2 = (0, translate_1.translateFromSeriesViewRectToCanvas)(new Point_1.Point(x2, y2), this.parentSurface.seriesViewRect, true);
         return {
             x1: point1.x / DpiHelper_1.DpiHelper.PIXEL_RATIO,
             x2: point2.x / DpiHelper_1.DpiHelper.PIXEL_RATIO,
@@ -501,7 +531,7 @@ var AnnotationBase = /** @class */ (function () {
                     : value * calculator.viewportDimension;
             }
             default: {
-                throw new Error("AnnotationBase.getCoordinate with CoordinateMode." + coordinateMode + " is not implemented");
+                throw new Error("AnnotationBase.getCoordinate with CoordinateMode.".concat(coordinateMode, " is not implemented"));
             }
         }
     };
@@ -599,7 +629,7 @@ var AnnotationBase = /** @class */ (function () {
         var viewRect = this.parentSurface.seriesViewRect;
         var translatedPoint = !translateToSeriesViewRect
             ? point
-            : translate_1.translateFromCanvasToSeriesViewRect(point, viewRect, true);
+            : (0, translate_1.translateFromCanvasToSeriesViewRect)(point, viewRect, true);
         if (!translatedPoint) {
             return undefined;
         }
@@ -614,7 +644,7 @@ var AnnotationBase = /** @class */ (function () {
     AnnotationBase.prototype.getXYCoordinatesFromValues = function (xyDataPoint) {
         var viewRect = this.parentSurface.seriesViewRect;
         var pointWithAbsoluteCoordinates = this.getAbsoluteCoordinates(xyDataPoint);
-        var translatedPoint = translate_1.translateFromSeriesViewRectToCanvas(pointWithAbsoluteCoordinates, viewRect);
+        var translatedPoint = (0, translate_1.translateFromSeriesViewRectToCanvas)(pointWithAbsoluteCoordinates, viewRect);
         if (!translatedPoint) {
             return undefined;
         }