scichart 2.2.2417 → 3.0.0-beta.224

package/Charting/Visuals/Annotations/NativeTextAnnotation.js

@@ -0,0 +1,536 @@
+"use strict";
+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 (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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeTextAnnotation = exports.EWrapTo = void 0;
+var Guard_1 = require("../../../Core/Guard");
+var Point_1 = require("../../../Core/Point");
+var AnchorPoint_1 = require("../../../types/AnchorPoint");
+var TextPosition_1 = require("../../../types/TextPosition");
+var XyDirection_1 = require("../../../types/XyDirection");
+var colorUtil_1 = require("../../../utils/colorUtil");
+var parseColor_1 = require("../../../utils/parseColor");
+var pointUtil_1 = require("../../../utils/pointUtil");
+var text_1 = require("../../../utils/text");
+var translate_1 = require("../../../utils/translate");
+var NativeObject_1 = require("../Helpers/NativeObject");
+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");
+var EWrapTo;
+(function (EWrapTo) {
+    EWrapTo["ViewRect"] = "ViewRect";
+    EWrapTo["Annotation"] = "Annotation";
+})(EWrapTo = exports.EWrapTo || (exports.EWrapTo = {}));
+/**
+ * @summary The {@link NativeTextAnnotation} provides an {@link AnnotationBase | Annotation} which draws a text at
+ * specific x1 y1 over the {@link SciChartSurface}
+ * @description
+ * To add a {@link NativeTextAnnotation} to a {@link SciChartSurface}, use the following code:
+ * ```ts
+ * const sciChartSurface: SciChartSurface;
+ * const textAnnotation = new NativeTextAnnotation( { x1: 1, y1: 3, color: "#FF000077", text: "Hello SciChart"});
+ * sciChartSurface.annotations.add(textAnnotation);
+ * ```
+ * @remarks Uses the fast WebGL/WebAssembly {@link WebGL2RenderingContext} for rendering
+ */
+var NativeTextAnnotation = /** @class */ (function (_super) {
+    __extends(NativeTextAnnotation, _super);
+    /**
+     * Create an instance of a NativeTextAnnotation
+     * @param options Optional parameters of type {@link INativeTextAnnotationOptions} which configure the annotation upon construction
+     */
+    function NativeTextAnnotation(options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        _this = _super.call(this, options) || this;
+        /** @inheritDoc */
+        _this.type = IAnnotation_1.EAnnotationType.RenderContextNativeTextAnnotation;
+        _this.fontSizeProperty = 14;
+        _this.fontFamilyProperty = "Arial";
+        _this.textColorProperty = "#ffffff";
+        _this.rotationProperty = 0;
+        _this.textProperty = "";
+        _this.verticalAnchorPointProperty = AnchorPoint_1.EVerticalAnchorPoint.Top;
+        _this.horizontalAnchorPointProperty = AnchorPoint_1.EHorizontalAnchorPoint.Left;
+        _this.multiLineAlignmentProperty = TextPosition_1.EMultiLineAlignment.Center;
+        _this.lineSpacingProperty = 3;
+        _this.svgStringAdornerTemplate = function (x1, y1, x2, y2) {
+            var colorLine = _this.selectionBoxStroke;
+            var width = x2 - x1;
+            var height = y2 - y1;
+            var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"".concat(x1, "\" y=\"").concat(y1, "\" width=\"").concat(width, "\" height=\"").concat(height, "\" stroke=\"").concat(colorLine, "\" stroke-width=\"").concat(_this.selectionBoxThickness, "px\" fill=\"none\" />\n        ");
+            var grips = _this.getAdornerAnnotationBorders(false, true);
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
+                svg += _this.getAnnotationGripSvg(grips.x1, grips.y1);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
+                svg += _this.getAnnotationGripSvg(grips.x2, grips.y2);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y1)) {
+                svg += _this.getAnnotationGripSvg(grips.x2, grips.y1);
+            }
+            if (_this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y2)) {
+                svg += _this.getAnnotationGripSvg(grips.x1, grips.y2);
+            }
+            svg += "</svg>";
+            return svg;
+        };
+        _this.textColorProperty = (_a = options === null || options === void 0 ? void 0 : options.textColor) !== null && _a !== void 0 ? _a : _this.textColorProperty;
+        _this.fontSizeProperty = (_b = options === null || options === void 0 ? void 0 : options.fontSize) !== null && _b !== void 0 ? _b : _this.fontSizeProperty;
+        _this.fontFamilyProperty = (_c = options === null || options === void 0 ? void 0 : options.fontFamily) !== null && _c !== void 0 ? _c : _this.fontFamilyProperty;
+        _this.rotationProperty = (_d = options === null || options === void 0 ? void 0 : options.rotation) !== null && _d !== void 0 ? _d : _this.rotationProperty;
+        _this.textProperty = (_e = options === null || options === void 0 ? void 0 : options.text) !== null && _e !== void 0 ? _e : _this.textProperty;
+        _this.verticalAnchorPointProperty = (_f = options === null || options === void 0 ? void 0 : options.verticalAnchorPoint) !== null && _f !== void 0 ? _f : _this.verticalAnchorPointProperty;
+        _this.horizontalAnchorPointProperty = (_g = options === null || options === void 0 ? void 0 : options.horizontalAnchorPoint) !== null && _g !== void 0 ? _g : _this.horizontalAnchorPointProperty;
+        _this.multiLineAlignmentProperty = (_h = options === null || options === void 0 ? void 0 : options.multiLineAlignment) !== null && _h !== void 0 ? _h : _this.multiLineAlignmentProperty;
+        _this.wrapToProperty = (_j = options === null || options === void 0 ? void 0 : options.wrapTo) !== null && _j !== void 0 ? _j : _this.wrapToProperty;
+        _this.lineSpacingProperty = (_k = options === null || options === void 0 ? void 0 : options.lineSpacing) !== null && _k !== void 0 ? _k : _this.lineSpacingProperty;
+        return _this;
+    }
+    Object.defineProperty(NativeTextAnnotation.prototype, "textColor", {
+        /**
+         * Gets the color for the {@link NativeTextAnnotation}
+         */
+        get: function () {
+            return this.textColorProperty;
+        },
+        /**
+         * Sets the color for the {@link NativeTextAnnotation}
+         */
+        set: function (value) {
+            this.textColorProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.COLOR);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "fontSize", {
+        /**
+         * Gets the fontSize for the {@link NativeTextAnnotation}
+         */
+        get: function () {
+            return this.fontSizeProperty;
+        },
+        /**
+         * Sets the fontSize for the {@link NativeTextAnnotation}
+         */
+        set: function (value) {
+            this.fontSizeProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_FONT_SIZE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "fontFamily", {
+        /**
+         * Gets the fontSize for the {@link NativeTextAnnotation}
+         */
+        get: function () {
+            return this.fontFamilyProperty;
+        },
+        /**
+         * Sets the fontSize for the {@link NativeTextAnnotation}
+         */
+        set: function (value) {
+            this.fontFamilyProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_FONT_FAMILY);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "rotation", {
+        /**
+         * Gets the rotation for the {@link NativeTextAnnotation}
+         */
+        get: function () {
+            return this.rotationProperty;
+        },
+        /**
+         * Sets the labelPlacement for the {@link NativeTextAnnotation}
+         */
+        set: function (value) {
+            this.rotationProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.ROTATION);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "text", {
+        /**
+         * Gets the text for the {@link NativeTextAnnotation}
+         */
+        get: function () {
+            return this.textProperty;
+        },
+        /**
+         * Sets the text for the {@link NativeTextAnnotation}
+         */
+        set: function (value) {
+            this.textProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.TEXT);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "verticalAnchorPoint", {
+        /**
+         * Gets or sets vertical anchor point
+         */
+        get: function () {
+            return this.verticalAnchorPointProperty;
+        },
+        /**
+         * Gets or sets vertical anchor point
+         */
+        set: function (value) {
+            if (this.verticalAnchorPointProperty !== value) {
+                this.verticalAnchorPointProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.VERTICAL_ANCHOR_POINT);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "horizontalAnchorPoint", {
+        /**
+         * Gets or sets horizontal anchor point
+         */
+        get: function () {
+            return this.horizontalAnchorPointProperty;
+        },
+        /**
+         * Gets or sets horizontal anchor point
+         */
+        set: function (value) {
+            if (this.horizontalAnchorPointProperty !== value) {
+                this.horizontalAnchorPointProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.HORIZONTAL_ANCHOR_POINT);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "multiLineAlignment", {
+        /**
+         * Gets or sets the horizontal alignment mode for multiline text
+         */
+        get: function () {
+            return this.multiLineAlignmentProperty;
+        },
+        /**
+         * Gets or sets the horizontal alignment mode for multiline text
+         */
+        set: function (value) {
+            if (this.multiLineAlignmentProperty !== value) {
+                this.multiLineAlignmentProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.MULTILINE_ALIGNMENT);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "wrapTo", {
+        /**
+         * Gets or sets the text wrapping mode.  A pure number will be treated as a pixel width.  Default is undefined meaning no wrap
+         */
+        get: function () {
+            return this.wrapToProperty;
+        },
+        /**
+         * Gets or sets the text wrapping mode.  A pure number will be treated as a pixel width.  Default is undefined meaning no wrap
+         */
+        set: function (value) {
+            if (this.wrapToProperty !== value) {
+                this.wrapToProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.WRAP_TO);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NativeTextAnnotation.prototype, "lineSpacing", {
+        /**
+         * The spacing between lines.  Default 3
+         * If a whole number then treated as pixels.  If between 0 and 1 then treated as a fraction of line height
+         */
+        get: function () {
+            return this.lineSpacingProperty;
+        },
+        /**
+         * The spacing between lines.  Default 3
+         * If a whole number then treated as pixels.  If between 0 and 1 then treated as a fraction of line height
+         */
+        set: function (value) {
+            this.lineSpacingProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.LINE_SPACING);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** @inheritDoc */
+    NativeTextAnnotation.prototype.delete = function () { };
+    /** @inheritDoc */
+    NativeTextAnnotation.prototype.onAttach = function (scs) {
+        _super.prototype.onAttach.call(this, scs);
+    };
+    /** Calculate the center point for a rotation */
+    NativeTextAnnotation.prototype.getRotationCenter = function (x, y, bounds) {
+        return new Point_1.Point(x, y);
+    };
+    /** @inheritDoc */
+    NativeTextAnnotation.prototype.drawWithContext = function (renderContext, xCalc, yCalc, viewRect) {
+        Guard_1.Guard.notNull(renderContext, "renderContext");
+        Guard_1.Guard.notNull(xCalc, "xCalc");
+        Guard_1.Guard.notNull(yCalc, "yCalc");
+        var x1 = this.getX1Coordinate(xCalc, yCalc);
+        var y1 = this.getY1Coordinate(xCalc, yCalc);
+        var style = {
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize
+        };
+        var colorNum = (0, parseColor_1.parseColorToUIntArgb)(this.textColor);
+        colorNum = (0, colorUtil_1.uintArgbColorOverrideOpacity)(colorNum, this.opacity);
+        var font;
+        var rotationVector;
+        var rotationRads = -(this.rotation * Math.PI) / 180;
+        font = renderContext.getFont(style, this.rotation !== 0, false);
+        var textBounds = (0, NativeObject_1.getTextBounds)(this.parentSurface.webAssemblyContext2D);
+        var text = this.text;
+        if (this.wrapTo) {
+            var wrapWidth = Infinity;
+            if (typeof this.wrapTo === "number") {
+                wrapWidth = this.wrapTo;
+            }
+            else if (this.wrapTo === EWrapTo.ViewRect) {
+                if (this.horizontalAnchorPoint === AnchorPoint_1.EHorizontalAnchorPoint.Left) {
+                    wrapWidth = this.parentSurface.seriesViewRect.width - x1;
+                }
+                else if (this.horizontalAnchorPoint === AnchorPoint_1.EHorizontalAnchorPoint.Center) {
+                    wrapWidth = 2 * Math.min(x1, this.parentSurface.seriesViewRect.width - x1);
+                }
+                else if (this.horizontalAnchorPoint === AnchorPoint_1.EHorizontalAnchorPoint.Right) {
+                    wrapWidth = x1;
+                }
+            }
+            else if (this.wrapTo === EWrapTo.Annotation) {
+                var x2 = this.getX2Coordinate(xCalc, yCalc);
+                if (x2 > x1) {
+                    wrapWidth = x2 - x1;
+                }
+            }
+            text = (0, text_1.wrapNativeText)(this.text, wrapWidth, font, textBounds);
+        }
+        var spacing = this.lineSpacing;
+        font.CalculateStringBounds(text !== null && text !== void 0 ? text : "", textBounds, spacing);
+        if (spacing < 1) {
+            spacing =
+                this.lineSpacing * (textBounds.GetLineBounds(0).m_fHeight - textBounds.GetLineBounds(0).m_fOffsetY);
+            font.CalculateStringBounds(text !== null && text !== void 0 ? text : "", textBounds, spacing);
+        }
+        var rotationCenter = this.getRotationCenter(x1 + viewRect.x, y1 + viewRect.y, textBounds);
+        rotationVector = (0, NativeObject_1.getVector4)(this.parentSurface.webAssemblyContext2D, rotationCenter.x, rotationCenter.y, rotationRads, 0);
+        if (this.horizontalAnchorPointProperty === AnchorPoint_1.EHorizontalAnchorPoint.Center) {
+            x1 -= textBounds.m_fWidth / 2;
+        }
+        else if (this.horizontalAnchorPointProperty === AnchorPoint_1.EHorizontalAnchorPoint.Right) {
+            x1 -= textBounds.m_fWidth;
+        }
+        if (this.verticalAnchorPointProperty === AnchorPoint_1.EVerticalAnchorPoint.Center) {
+            y1 += textBounds.GetLineBounds(0).m_fHeight / 2;
+            y1 -=
+                ((textBounds.GetLineBounds(0).m_fHeight - textBounds.GetLineBounds(0).m_fOffsetY) *
+                    (textBounds.GetLinesCount() - 1)) /
+                    2;
+        }
+        else if (this.verticalAnchorPointProperty === AnchorPoint_1.EVerticalAnchorPoint.Top) {
+            y1 += textBounds.GetLineBounds(0).m_fHeight;
+        }
+        else if (textBounds.GetLinesCount() > 1) {
+            y1 += textBounds.GetLineBounds(0).m_fOffsetY;
+            y1 -=
+                (textBounds.GetLineBounds(0).m_fHeight - textBounds.GetLineBounds(0).m_fOffsetY) *
+                    (textBounds.GetLinesCount() - 1);
+        }
+        var x = x1 + viewRect.x;
+        var y = y1 + viewRect.y;
+        var borderX1 = x1;
+        var borderY1 = y1 - textBounds.GetLineBounds(0).m_fHeight;
+        var borderX2 = x1 + textBounds.m_fWidth;
+        var borderY2 = borderY1 + textBounds.m_fHeight;
+        if (this.rotation !== 0) {
+            var sin_1 = Math.sin(rotationRads);
+            var cos_1 = Math.cos(rotationRads);
+            var rc_1 = this.getRotationCenter(x1, y1, textBounds);
+            var transform = function (a, b) {
+                var ta = (a - rc_1.x) * cos_1 + (b - rc_1.y) * sin_1;
+                var tb = (b - rc_1.y) * cos_1 - (a - rc_1.x) * sin_1;
+                return { x: ta, y: tb };
+            };
+            var x1y1 = transform(borderX1, borderY1);
+            var x2y1 = transform(borderX2, borderY1);
+            var x1y2 = transform(borderX1, borderY2);
+            var x2y2 = transform(borderX2, borderY2);
+            borderX1 = Math.min(x1y1.x, x2y1.x, x1y2.x, x2y2.x) + rc_1.x;
+            borderX2 = Math.max(x1y1.x, x2y1.x, x1y2.x, x2y2.x) + rc_1.x;
+            borderY1 = Math.min(x1y1.y, x2y1.y, x1y2.y, x2y2.y) + rc_1.y;
+            borderY2 = Math.max(x1y1.y, x2y1.y, x1y2.y, x2y2.y) + rc_1.y;
+        }
+        this.setAnnotationBorders(borderX1, borderX2, borderY1, borderY2);
+        var alignMode = (0, TextPosition_1.convertMultiLineAlignment)(this.multiLineAlignment, this.parentSurface.webAssemblyContext2D);
+        font.DrawStringAdvanced(text, colorNum, Math.round(x), Math.round(y), rotationVector, alignMode, spacing);
+        this.updateAdornerInner();
+    };
+    NativeTextAnnotation.prototype.onDragStarted = function (args) {
+        _super.prototype.onDragStarted.call(this, args);
+        var _a = this.getAnnotationBorders(false, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+        var _b = annotationHelpers_1.annotationHelpers.calcNewApex(x1, y1, x2, y2, this.isVerticalChart), x1y1 = _b.x1y1, x2y1 = _b.x2y1, x1y2 = _b.x1y2, x2y2 = _b.x2y2;
+        var xyMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(new Point_1.Point(args.mousePoint.x, args.mousePoint.y), this.parentSurface.seriesViewRect);
+        if (x1y1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y1)) {
+            var dist = (0, pointUtil_1.calcDistance)(x1y1.x, x1y1.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
+                return true;
+            }
+        }
+        if (x2y1 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y1)) {
+            var dist = (0, pointUtil_1.calcDistance)(x2y1.x, x2y1.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y1;
+                return true;
+            }
+        }
+        if (x1y2 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x1y2)) {
+            var dist = (0, pointUtil_1.calcDistance)(x1y2.x, x1y2.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y2;
+                return true;
+            }
+        }
+        if (x2y2 && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.x2y2)) {
+            var dist = (0, pointUtil_1.calcDistance)(x2y2.x, x2y2.y, xyMousePoint.x, xyMousePoint.y);
+            if (dist < this.annotationsGripsRadius * DpiHelper_1.DpiHelper.PIXEL_RATIO) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y2;
+                return true;
+            }
+        }
+        if (xyMousePoint && this.canDragPoint(AnnotationBase_1.EDraggingGripPoint.Body)) {
+            if (this.clickToSelect(args)) {
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Body;
+                return true;
+            }
+        }
+        return false;
+    };
+    NativeTextAnnotation.prototype.calcDragDistance = function (xyValues) {
+        if (!this.prevValue) {
+            this.prevValue = xyValues;
+            return;
+        }
+        if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.Body) {
+            this.x1 = this.x1 - (this.prevValue.x - xyValues.x);
+            this.x2 = this.x2 - (this.prevValue.x - xyValues.x);
+            this.y1 = this.y1 - (this.prevValue.y - xyValues.y);
+            this.y2 = this.y2 - (this.prevValue.y - xyValues.y);
+        }
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y1) {
+            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
+                this.x1 -= this.prevValue.x - xyValues.x;
+            }
+            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
+                this.y1 -= this.prevValue.y - xyValues.y;
+            }
+            else {
+                this.x1 -= this.prevValue.x - xyValues.x;
+                this.y1 -= this.prevValue.y - xyValues.y;
+            }
+        }
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y2) {
+            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
+                this.x2 -= this.prevValue.x - xyValues.x;
+            }
+            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
+                this.y2 -= this.prevValue.y - xyValues.y;
+            }
+            else {
+                this.x2 -= this.prevValue.x - xyValues.x;
+                this.y2 -= this.prevValue.y - xyValues.y;
+            }
+        }
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x2y1) {
+            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
+                this.x2 -= this.prevValue.x - xyValues.x;
+            }
+            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
+                this.y1 -= this.prevValue.y - xyValues.y;
+            }
+            else {
+                this.x2 -= this.prevValue.x - xyValues.x;
+                this.y1 -= this.prevValue.y - xyValues.y;
+            }
+        }
+        else if (this.adornerDraggingPoint === AnnotationBase_1.EDraggingGripPoint.x1y2) {
+            if (this.resizeDirections === XyDirection_1.EXyDirection.XDirection) {
+                this.x1 -= this.prevValue.x - xyValues.x;
+            }
+            else if (this.resizeDirections === XyDirection_1.EXyDirection.YDirection) {
+                this.y2 -= this.prevValue.y - xyValues.y;
+            }
+            else {
+                this.x1 -= this.prevValue.x - xyValues.x;
+                this.y2 -= this.prevValue.y - xyValues.y;
+            }
+        }
+        this.prevValue = xyValues;
+    };
+    /**
+     * @instance
+     */
+    NativeTextAnnotation.prototype.onDpiChanged = function (args) {
+        _super.prototype.onDpiChanged.call(this, args);
+        this.notifyPropertyChanged(constants_1.PROPERTY.STROKE);
+    };
+    NativeTextAnnotation.prototype.toJSON = function () {
+        var json = _super.prototype.toJSON.call(this);
+        var options = {
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            textColor: this.textColor,
+            rotation: this.rotation,
+            text: this.text
+        };
+        Object.assign(json.options, options);
+        return json;
+    };
+    NativeTextAnnotation.prototype.checkIsClickedOnAnnotationInternal = function (x, y) {
+        var _a = this.getAnnotationBorders(true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+        return (0, pointUtil_1.testIsInBounds)(x, y, x1, y2, x2, y1);
+    };
+    NativeTextAnnotation.prototype.updateAdornerInner = function () {
+        var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
+        this.deleteAdorner();
+        if (this.isSelected) {
+            var _a = this.getAdornerAnnotationBorders(), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
+            var svgString = this.svgStringAdornerTemplate(x1, y1, x2, y2);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
+        }
+    };
+    return NativeTextAnnotation;
+}(RenderContextAnnotationBase_1.RenderContextAnnotationBase));
+exports.NativeTextAnnotation = NativeTextAnnotation;

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

@@ -75,8 +75,10 @@ export declare class OverviewCustomResizableAnnotation extends CustomAnnotation
      * 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;
     /**
      * Handles the dragging event. Updates the coordinates after dragging or resizing
      * @param xyValues {@link Point}
@@ -85,7 +87,7 @@ export declare class OverviewCustomResizableAnnotation extends CustomAnnotation
     /**
      * @inheritDoc
      */
-    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
     /**
      * Creates or updates an adorner for the annotation
      */

package/Charting/Visuals/Annotations/OverviewCustomResizableAnnotation.js

@@ -32,8 +32,9 @@ var CustomAnnotation_1 = require("./CustomAnnotation");
 var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
     __extends(OverviewCustomResizableAnnotation, _super);
     function OverviewCustomResizableAnnotation(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.minWidthProperty = 10;
         _this.minHeightProperty = 10;
         _this.adornerSvgStringTemplateProperty =
@@ -191,24 +192,24 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
         if (isResizableHorizontally) {
             // Left
             if ((0, pointUtil_1.testIsInBounds)(xMousePoint, yMousePoint, x1 - constants_1.ADORNER_GRIP_RADIUS, y2, x1 + constants_1.ADORNER_GRIP_RADIUS, y1)) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point1;
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y1;
                 return true;
             }
             else if ((0, pointUtil_1.testIsInBounds)(xMousePoint, yMousePoint, x2 - constants_1.ADORNER_GRIP_RADIUS, y2, x2 + constants_1.ADORNER_GRIP_RADIUS, y1)) {
                 // Right
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point2;
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y2;
                 return true;
             }
         }
         // Top
         if (isResizableVertically) {
             if ((0, pointUtil_1.testIsInBounds)(xMousePoint, yMousePoint, x1, y1 + constants_1.ADORNER_GRIP_RADIUS, x2, y1 - constants_1.ADORNER_GRIP_RADIUS)) {
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point3;
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x2y1;
                 return true;
             }
             else if ((0, pointUtil_1.testIsInBounds)(xMousePoint, yMousePoint, x1, y2 + constants_1.ADORNER_GRIP_RADIUS, x2, y2 - constants_1.ADORNER_GRIP_RADIUS)) {
                 // Bottom
-                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.Point4;
+                this.adornerDraggingPoint = AnnotationBase_1.EDraggingGripPoint.x1y2;
                 return true;
             }
         }
@@ -222,10 +223,12 @@ var OverviewCustomResizableAnnotation = /** @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
      */
-    OverviewCustomResizableAnnotation.prototype.update = function (xCalc, yCalc) {
+    OverviewCustomResizableAnnotation.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         // create svg if there is none
-        this.create(xCalc, yCalc);
+        this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
         this.svg.style.display = this.isHidden ? "none" : "block";
         this.svg.style.opacity = this.opacity.toString();
         var x1Coord = this.getX1Coordinate(xCalc, yCalc);
@@ -247,8 +250,10 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
             // calculate and adjust size accordingly to coordinates
             var width = Math.abs(x2Coord - x1Coord);
             var height = Math.abs(y2Coord - y1Coord);
-            this.setSvgAttribute("x", x1Coord < x2Coord ? x1Coord : x2Coord);
-            this.setSvgAttribute("y", y1Coord < y2Coord ? y1Coord : y2Coord);
+            var svgXCoord = (x1Coord < x2Coord ? x1Coord : x2Coord) + xCoordSvgTrans;
+            var svgYCoord = (y1Coord < y2Coord ? y1Coord : y2Coord) + yCoordSvgTrans;
+            this.setSvgAttribute("x", svgXCoord);
+            this.setSvgAttribute("y", svgYCoord);
             this.setSvgAttribute("width", width);
             this.setSvgAttribute("height", height);
             this.svgDOMRect = this.svg.getBoundingClientRect();
@@ -324,7 +329,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
                 break;
             }
             // left grab point
-            case AnnotationBase_1.EDraggingGripPoint.Point1: {
+            case AnnotationBase_1.EDraggingGripPoint.x1y1: {
                 if (isResizableHorizontally) {
                     if (horizontalCalc.hasFlippedCoordinates) {
                         this.adjustLeftSideToLimits(x2Coord, xyValues, horizontalCalc);
@@ -336,7 +341,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
                 break;
             }
             // Right grab point
-            case AnnotationBase_1.EDraggingGripPoint.Point2: {
+            case AnnotationBase_1.EDraggingGripPoint.x2y2: {
                 if (isResizableHorizontally) {
                     if (horizontalCalc.hasFlippedCoordinates) {
                         this.adjustRightSideToLimits(x1Coord, xyValues, horizontalCalc);
@@ -348,7 +353,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
                 break;
             }
             // Top grab point
-            case AnnotationBase_1.EDraggingGripPoint.Point3: {
+            case AnnotationBase_1.EDraggingGripPoint.x2y1: {
                 if (isResizableVertically) {
                     if (verticalCalc.hasFlippedCoordinates) {
                         this.adjustTopSideToLimits(y2Coord, xyValues, verticalCalc);
@@ -360,7 +365,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
                 break;
             }
             // Bottom grab point
-            case AnnotationBase_1.EDraggingGripPoint.Point4: {
+            case AnnotationBase_1.EDraggingGripPoint.x1y2: {
                 if (isResizableVertically) {
                     if (verticalCalc.hasFlippedCoordinates) {
                         this.adjustBottomSideToLimits(y1Coord, xyValues, verticalCalc);
@@ -378,7 +383,7 @@ var OverviewCustomResizableAnnotation = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    OverviewCustomResizableAnnotation.prototype.create = function (xCalc, yCalc) {
+    OverviewCustomResizableAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
         if (this.svg) {
             return;
         }