scichart 3.1.329 → 3.1.346

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -569,6 +569,7 @@ var AxisBase2D = /** @class */ (function (_super) {
      */
     AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
         this.parentSurface = parentSurface;
+        this.axisTitleRenderer.parentSurface = parentSurface;
         this.setIsXAxis(isXAxis);
         this.isPrimaryAxisProperty = isPrimaryAxis;
     };
@@ -585,7 +586,7 @@ var AxisBase2D = /** @class */ (function (_super) {
                 console.log("Measure. fontSize: ".concat(this.labelStyle.fontSize, ", dpiAdjusted: ").concat(this.dpiAdjustedLabelStyle.fontSize));
             }
             this.axisRenderer.measure(this.isHorizontalAxis, this.dpiAdjustedLabelStyle, majorTickLabels, this.getTicksMaxSize(), this.labelProvider, this.drawLabels, drawTicks);
-            this.axisTitleRenderer.measure(this.dpiAdjustedAxisTitleStyle, this.isHorizontalAxis);
+            this.axisTitleRenderer.measure(this.axisTitle, this.dpiAdjustedAxisTitleStyle, this.axisAlignment);
         }
         else {
             this.axisRenderer.desiredHeight = 0;
@@ -648,7 +649,6 @@ var AxisBase2D = /** @class */ (function (_super) {
                 var viewTitleRect = _this.axisTitleRenderer.viewRect;
                 var brush = _this.solidBrushCacheAxisBackground.newBrush(_this.backgroundColorProperty, false);
                 var nativeAxisRect = void 0;
-                var nativeTitleRect = void 0;
                 // Empty space covering for axis coloring
                 // let shift: number = 0;
                 // let additionalSize: number = 0;
@@ -675,17 +675,11 @@ var AxisBase2D = /** @class */ (function (_super) {
                 //     nativeAxisRect = createNativeRect(this.webAssemblyContext2D, 0, 0 - shift, viewAxisRect.width, viewAxisRect.height + additionalSize);
                 //     nativeTitleRect = createNativeRect(this.webAssemblyContext2D, 0, 0 - shift, viewTitleRect.width, viewTitleRect.height + additionalSize);
                 // }
-                nativeAxisRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewAxisRect.width, viewAxisRect.height);
+                nativeAxisRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, _this.viewRect.width, _this.viewRect.height);
                 if (nativeAxisRect) {
                     var vecRects = (0, NativeObject_1.getVectorRectVertex)(_this.webAssemblyContext2D);
                     vecRects.push_back(nativeAxisRect);
-                    renderContext.drawRects(vecRects, brush, viewAxisRect.left, viewAxisRect.top);
-                }
-                nativeTitleRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewTitleRect.width, viewTitleRect.height);
-                if (nativeTitleRect) {
-                    var vecRects = (0, NativeObject_1.getVectorRectVertex)(_this.webAssemblyContext2D);
-                    vecRects.push_back(nativeTitleRect);
-                    renderContext.drawRects(vecRects, brush, viewTitleRect.left, viewTitleRect.top);
+                    renderContext.drawRects(vecRects, brush, _this.viewRect.x, _this.viewRect.y);
                 }
             }
             // Draw axis labels
@@ -703,7 +697,7 @@ var AxisBase2D = /** @class */ (function (_super) {
                 _this.axisRenderer.drawTicks(renderContext, _this.axisAlignment, _this.isInnerAxis, tickObject.majorTickCoords, _this.offset, penForMajorTickLines, majorTickStyle);
             }
             // Draw axis title
-            _this.axisTitleRenderer.draw(renderContext, _this.dpiAdjustedAxisTitleStyle, _this.axisAlignment, _this.parentSurface.debugRendering);
+            _this.axisTitleRenderer.draw(renderContext);
             if (_this.labelProvider.useNativeText && _this.parentSurface.renderNativeAxisLabelsImmediately) {
                 renderContext.endFonts(true);
             }
@@ -1105,9 +1099,6 @@ var AxisBase2D = /** @class */ (function (_super) {
      * @inheritDoc
      */
     AxisBase2D.prototype.notifyPropertyChanged = function (propertyName) {
-        if (propertyName === constants_1.PROPERTY.AXIS_TITLE && this.axisTitleRenderer) {
-            this.axisTitleRenderer.text = this.axisTitle;
-        }
         if (propertyName === constants_1.PROPERTY.IS_XAXIS) {
             if (this.axisAlignmentProperty === undefined) {
                 this.axisAlignmentProperty = this.isXAxisProperty ? AxisAlignment_1.EAxisAlignment.Bottom : AxisAlignment_1.EAxisAlignment.Right;

package/Charting/Visuals/Axis/AxisCore.d.ts

@@ -69,6 +69,10 @@ export declare type TTextStyle = {
     /** Horizontal text alignment for multiline text. */
     multilineAlignment?: EMultiLineAlignment;
 };
+export declare type TAxisTitleStyle = TTextStyle & {
+    /** Text rotation in degrees. */
+    rotation?: number;
+};
 /**
  * Interface to minimal set of parameters which define an {@link AxisCore | Axis} in SciChart
  */
@@ -82,7 +86,7 @@ export interface IAxisParams {
      * axis.visibleRange = new NumberRange(15, 25);
      * ```
      * @remarks
-     * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+     * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
      * for {@link CategoryAxis} types.
      */
     visibleRange: NumberRange;
@@ -147,6 +151,8 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
     visibleRangeChanged: EventHandler<VisibleRangeChangedArgs>;
     /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
     isMeasured: boolean;
+    /** If the diff of the visibleRange is 0, this growby fraction will be applied */
+    ZeroRangeGrowBy: number;
     /**
      * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
@@ -246,7 +252,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
     /**
      * Internal backing property for {@link AxisCore.axisTitleStyle}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
-    protected axisTitleStyleProperty: TTextStyle;
+    protected axisTitleStyleProperty: TAxisTitleStyle;
     /**
      * Internal backing property for {@link AxisCore.tickProvider}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
@@ -401,7 +407,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * axis.visibleRange = new NumberRange(15, 25);
      * ```
      * @remarks
-     * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+     * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
      * for {@link CategoryAxis} types.
      */
     get visibleRange(): NumberRange;
@@ -414,7 +420,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * axis.visibleRange = new NumberRange(15, 25);
      * ```
      * @remarks
-     * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+     * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
      * for {@link CategoryAxis} types.
      */
     set visibleRange(visibleRange: NumberRange);
@@ -597,12 +603,12 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      */
     set drawLabels(drawLabels: boolean);
     /**
-     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with @{link AxisCore.visibleRange | VisibleRange}
+     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with {@link AxisCore.visibleRange | VisibleRange}
      * 0..10 will render from 10 to 0
      */
     get flippedCoordinates(): boolean;
     /**
-     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with @{link AxisCore.visibleRange | VisibleRange}
+     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with {@link AxisCore.visibleRange | VisibleRange}
      * 0..10 will render from 10 to 0
      */
     set flippedCoordinates(flippedCoordinates: boolean);
@@ -669,17 +675,17 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
     /**
      * Gets the {@link axisTitleStyle} adjusted for current DPI / Browser zoom level
      */
-    get dpiAdjustedAxisTitleStyle(): TTextStyle;
+    get dpiAdjustedAxisTitleStyle(): TAxisTitleStyle;
     /**
      * @summary Gets or sets the Axis Title style
-     * @remarks See {@link TTextStyle} for the type which contains style options
+     * @remarks See {@link TAxisTitleStyle} for the type which contains style options
      */
-    get axisTitleStyle(): TTextStyle;
+    get axisTitleStyle(): TAxisTitleStyle;
     /**
      * @summary Gets or sets the Axis Title style
-     * @remarks See {@link TTextStyle} for the type which contains style options
+     * @remarks See {@link TAxisTitleStyle} for the type which contains style options
      */
-    set axisTitleStyle(textStyle: TTextStyle);
+    set axisTitleStyle(textStyle: TAxisTitleStyle);
     /**
      * Gets or sets the Axis title string
      * Use an array to create a multiLine title

package/Charting/Visuals/Axis/AxisCore.js

@@ -24,8 +24,6 @@ var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var constants_1 = require("./constants");
 var VisibleRangeChangedArgs_1 = require("./VisibleRangeChangedArgs");
-/** @ignore */
-var ZeroRangeGrowBy = 0.01;
 /**
  * The base class for Axis within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}.
  * @description
@@ -52,6 +50,8 @@ var AxisCore = /** @class */ (function () {
         this.visibleRangeChanged = new EventHandler_1.EventHandler();
         /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
         this.isMeasured = false;
+        /** If the diff of the visibleRange is 0, this growby fraction will be applied */
+        this.ZeroRangeGrowBy = 0.01;
         /**
          * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
          */
@@ -357,7 +357,7 @@ var AxisCore = /** @class */ (function () {
          * axis.visibleRange = new NumberRange(15, 25);
          * ```
          * @remarks
-         * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+         * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
          * for {@link CategoryAxis} types.
          */
         get: function () {
@@ -372,7 +372,7 @@ var AxisCore = /** @class */ (function () {
          * axis.visibleRange = new NumberRange(15, 25);
          * ```
          * @remarks
-         * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+         * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
          * for {@link CategoryAxis} types.
          */
         set: function (visibleRange) {
@@ -670,14 +670,14 @@ var AxisCore = /** @class */ (function () {
     });
     Object.defineProperty(AxisCore.prototype, "flippedCoordinates", {
         /**
-         * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with @{link AxisCore.visibleRange | VisibleRange}
+         * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with {@link AxisCore.visibleRange | VisibleRange}
          * 0..10 will render from 10 to 0
          */
         get: function () {
             return this.flippedCoordinatesProperty;
         },
         /**
-         * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with @{link AxisCore.visibleRange | VisibleRange}
+         * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with {@link AxisCore.visibleRange | VisibleRange}
          * 0..10 will render from 10 to 0
          */
         set: function (flippedCoordinates) {
@@ -817,14 +817,14 @@ var AxisCore = /** @class */ (function () {
     Object.defineProperty(AxisCore.prototype, "axisTitleStyle", {
         /**
          * @summary Gets or sets the Axis Title style
-         * @remarks See {@link TTextStyle} for the type which contains style options
+         * @remarks See {@link TAxisTitleStyle} for the type which contains style options
          */
         get: function () {
             return this.axisTitleStyleProperty;
         },
         /**
          * @summary Gets or sets the Axis Title style
-         * @remarks See {@link TTextStyle} for the type which contains style options
+         * @remarks See {@link TAxisTitleStyle} for the type which contains style options
          */
         set: function (textStyle) {
             this.axisTitleStyleProperty = __assign(__assign({}, this.axisTitleStyle), textStyle);
@@ -1006,7 +1006,12 @@ var AxisCore = /** @class */ (function () {
     AxisCore.prototype.coerceZeroVisibleRange = function (range) {
         Guard_1.Guard.notNull(range, "range");
         if (range.isZero()) {
-            return range.growBy(new NumberRange_1.NumberRange(ZeroRangeGrowBy, ZeroRangeGrowBy));
+            if (range.min === 0) {
+                return new NumberRange_1.NumberRange(-1, 1);
+            }
+            else {
+                return range.growBy(new NumberRange_1.NumberRange(this.ZeroRangeGrowBy, this.ZeroRangeGrowBy));
+            }
         }
         return range;
     };

package/Charting/Visuals/Axis/AxisTitleRenderer.d.ts

@@ -1,32 +1,28 @@
 import { Rect } from "../../../Core/Rect";
 import { EAxisAlignment } from "../../../types/AxisAlignment";
-import { TSciChart } from "../../../types/TSciChart";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
-import { TextureManager, TTextureObject } from "../TextureManager/TextureManager";
-import { TTextStyle } from "./AxisCore";
+import { TitleRendererBase } from "../../Services/TitleRenderer";
+import { SciChartSurface } from "../SciChartSurface";
+import { TAxisTitleStyle } from "./AxisCore";
 /**
  * Draws an axis title using our WebGL Rendering engine
  */
-export declare class AxisTitleRenderer {
-    useCache: boolean;
-    viewRect: Rect;
-    text: string | string[];
+export declare class AxisTitleRenderer extends TitleRendererBase<TAxisTitleStyle> {
     lineSpacing: number;
+    /** For internal use */
+    parentSurface: SciChartSurface;
     private previousText;
-    private textStyle;
     private previousLineSpacing;
-    private texture;
-    private webAssemblyContext;
-    private desiredHeightProperty;
-    private desiredWidthProperty;
-    private textureManager;
-    constructor(webAssemblyContext: TSciChart);
-    measure(textStyle: TTextStyle, isHorizontal: boolean): void;
+    private previousNativeTextMode;
+    private previousAxisAlignment;
+    measure(text: string | string[], textStyle: TAxisTitleStyle, axisAlignment: EAxisAlignment): void;
+    get useNativeText(): boolean;
+    set useNativeText(value: boolean);
     get desiredHeight(): number;
     set desiredHeight(value: number);
     get desiredWidth(): number;
     set desiredWidth(value: number);
     layout(rect: Rect): void;
-    getTitleTexture(text: string | string[], textStyle: TTextStyle, textureManager: TextureManager): TTextureObject;
-    draw(renderContext: WebGlRenderContext2D, textStyle: TTextStyle, axisAlignment: EAxisAlignment, debugRendering: boolean): void;
+    protected getTitleTexture(): import("../TextureManager/TextureManager").TTextureObject;
+    draw(renderContext: WebGlRenderContext2D): void;
 }

package/Charting/Visuals/Axis/AxisTitleRenderer.js

@@ -1,63 +1,70 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
+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 __assign.apply(this, arguments);
-};
+    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.AxisTitleRenderer = void 0;
-var Deleter_1 = require("../../../Core/Deleter");
-var Rect_1 = require("../../../Core/Rect");
-var Thickness_1 = require("../../../Core/Thickness");
-var AxisAlignment_1 = require("../../../types/AxisAlignment");
-var parseColor_1 = require("../../../utils/parseColor");
-var WebGlPen_1 = require("../../Drawing/WebGlPen");
-var TextureManager_1 = require("../TextureManager/TextureManager");
-/** @ignore */
-var PADDING = {
-    // TOP: 13,
-    // BOTTOM: 8,
-    NO_TITLE: 0
-};
+var LabelAlignment_1 = require("../../../types/LabelAlignment");
+var TextStyle_1 = require("../../../types/TextStyle");
+var TitleRenderer_1 = require("../../Services/TitleRenderer");
 /**
  * Draws an axis title using our WebGL Rendering engine
  */
-var AxisTitleRenderer = /** @class */ (function () {
-    function AxisTitleRenderer(webAssemblyContext) {
-        this.useCache = true;
-        this.viewRect = Rect_1.Rect.createZero();
-        this.text = "";
-        this.lineSpacing = 1.1;
-        this.desiredHeightProperty = 0;
-        this.desiredWidthProperty = 0;
-        this.webAssemblyContext = webAssemblyContext;
-        this.textureManager = new TextureManager_1.TextureManager(webAssemblyContext);
+var AxisTitleRenderer = /** @class */ (function (_super) {
+    __extends(AxisTitleRenderer, _super);
+    function AxisTitleRenderer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.lineSpacing = 1.1;
+        return _this;
     }
-    AxisTitleRenderer.prototype.measure = function (textStyle, isHorizontal) {
-        var _a, _b, _c, _d;
-        var lines = Array.isArray(this.text) ? this.text.length : 1;
-        var lineWithSpacing = lines > 1 ? 1 + this.lineSpacing * (lines - 1) : lines;
-        if (isHorizontal) {
-            this.desiredHeightProperty = this.text
-                ? lineWithSpacing * (0, TextureManager_1.measureTextHeight)(textStyle.fontSize) +
-                    ((_a = textStyle === null || textStyle === void 0 ? void 0 : textStyle.padding) === null || _a === void 0 ? void 0 : _a.bottom) +
-                    ((_b = textStyle === null || textStyle === void 0 ? void 0 : textStyle.padding) === null || _b === void 0 ? void 0 : _b.top)
-                : PADDING.NO_TITLE;
-        }
-        else {
-            this.desiredWidthProperty = this.text
-                ? lineWithSpacing * (0, TextureManager_1.measureTextHeight)(textStyle.fontSize) +
-                    ((_c = textStyle === null || textStyle === void 0 ? void 0 : textStyle.padding) === null || _c === void 0 ? void 0 : _c.left) +
-                    ((_d = textStyle === null || textStyle === void 0 ? void 0 : textStyle.padding) === null || _d === void 0 ? void 0 : _d.right)
-                : PADDING.NO_TITLE;
+    AxisTitleRenderer.prototype.measure = function (text, textStyle, axisAlignment) {
+        if (text === void 0) { text = ""; }
+        this.text = text;
+        var shouldUpdateTextSize = !this.useCache ||
+            (!this.texture && !this.useNativeText) ||
+            this.text !== this.previousText ||
+            this.lineSpacing !== this.previousLineSpacing ||
+            axisAlignment !== this.previousAxisAlignment ||
+            this.previousNativeTextMode !== this.useNativeText ||
+            !checkAreEqualTextStyles(textStyle, this.textStyle);
+        if (shouldUpdateTextSize) {
+            this.invalidateCache();
+            this.previousLineSpacing = this.lineSpacing;
+            this.previousNativeTextMode = this.useNativeText;
+            this.previousAxisAlignment = axisAlignment;
+            this.previousText = text;
+            this.textStyle = textStyle;
+            this.titlePosition = TextStyle_1.ETitlePosition[axisAlignment];
+            this.textStyle = textStyle;
+            // @ts-ignore mismatch with TTextStyle
+            this.textStyle.lineSpacing = this.lineSpacing;
+            var renderContext = this.parentSurface.currentWebGlRenderContext;
+            // @ts-ignore mismatch with TTextStyle
+            this.getTextSize(text, this.textStyle, renderContext);
         }
     };
+    Object.defineProperty(AxisTitleRenderer.prototype, "useNativeText", {
+        get: function () {
+            return this.useNativeTextProperty;
+        },
+        set: function (value) {
+            this.useNativeTextProperty = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AxisTitleRenderer.prototype, "desiredHeight", {
         get: function () {
             return this.desiredHeightProperty;
@@ -79,76 +86,49 @@ var AxisTitleRenderer = /** @class */ (function () {
         configurable: true
     });
     AxisTitleRenderer.prototype.layout = function (rect) {
-        this.viewRect = rect;
-    };
-    AxisTitleRenderer.prototype.getTitleTexture = function (text, textStyle, textureManager) {
-        if (this.useCache &&
-            this.texture &&
-            text === this.previousText &&
-            this.lineSpacing === this.previousLineSpacing &&
-            checkAreEqualTextStyles(textStyle, this.textStyle)) {
-            return this.texture;
+        if (!this.text) {
+            this.viewRectProperty = rect;
+            return;
         }
-        this.previousLineSpacing = this.lineSpacing;
-        this.previousText = text;
-        this.textStyle = textStyle;
-        var lines = Array.isArray(text) ? text : [text];
-        var texture = textureManager.createTextTexture(lines, __assign(__assign({}, textStyle), { padding: new Thickness_1.Thickness(0, 0, 0, 0) }), 0, this.lineSpacing);
-        this.texture = texture;
+        var alignment = convertLabelAlignmentToTextAlignment(this.textStyle.alignment);
+        this.viewRectProperty = this.getViewRect(this.text, rect, this.titlePosition, alignment);
+    };
+    AxisTitleRenderer.prototype.getTitleTexture = function () {
+        var position = this.titlePosition;
+        var adjRotation = (0, TitleRenderer_1.getAdjustedRotation)(this.textStyle.rotation, position);
+        var titleText = Array.isArray(this.text) ? this.text : this.text.split("\n");
+        var texture = this.textureManager.createTextTexture(titleText, 
+        // @ts-ignore mismatch with TTextStyle
+        this.textStyle, 
+        // { ...this.textStyle, padding: new Thickness(0, 0, 0, 0) },
+        adjRotation, this.lineSpacing);
         return texture;
     };
-    AxisTitleRenderer.prototype.draw = function (renderContext, textStyle, axisAlignment, debugRendering) {
-        if (!this.text)
-            return;
-        var nativeContext = renderContext.getNativeContext();
-        var _a = this.getTitleTexture(this.text, textStyle, this.textureManager), bitmapTexture = _a.bitmapTexture, textureHeight = _a.textureHeight, textureWidth = _a.textureWidth;
-        var padding = textStyle.padding;
-        if (axisAlignment === AxisAlignment_1.EAxisAlignment.Top || axisAlignment === AxisAlignment_1.EAxisAlignment.Bottom) {
-            var deltaToCenter = (this.viewRect.width - textureWidth) / 2;
-            var xPositionCenter = this.viewRect.x + deltaToCenter;
-            var yPosition = this.viewRect.y + (padding === null || padding === void 0 ? void 0 : padding.top);
-            // (axisAlignment === EAxisAlignment.Bottom ? padding?.top : padding?.bottom);
-            nativeContext.DrawTexture(bitmapTexture, Math.round(xPositionCenter), Math.round(yPosition), textureWidth, textureHeight);
-            // for debugging width and height measure
-            if (debugRendering) {
-                var pen = new WebGlPen_1.WebGlPen(new this.webAssemblyContext.SCRTPen((0, parseColor_1.parseColorToUIntArgb)("Red"), 1, true));
-                renderContext.drawRect(new Rect_1.Rect(xPositionCenter, yPosition, textureWidth, textureHeight), Rect_1.Rect.create(0, 0, 999, 999), pen);
-                pen.delete();
-            }
-            // End debug
-        }
-        if (axisAlignment === AxisAlignment_1.EAxisAlignment.Left) {
-            nativeContext.PushMatrix();
-            nativeContext.Rotate(-90);
-            var deltaToCenter = (this.viewRect.height - textureWidth) / 2;
-            var xPositionCenter = -(this.viewRect.y + this.viewRect.height) + deltaToCenter;
-            nativeContext.Translate(Math.round(xPositionCenter), Math.round(this.viewRect.x + (padding === null || padding === void 0 ? void 0 : padding.left)));
-            nativeContext.DrawTexture(bitmapTexture, 0, 0, textureWidth, textureHeight);
-            nativeContext.PopMatrix();
-        }
-        if (axisAlignment === AxisAlignment_1.EAxisAlignment.Right) {
-            nativeContext.PushMatrix();
-            nativeContext.Rotate(90);
-            var deltaToCenter = (this.viewRect.height - textureWidth) / 2;
-            var xPositionCenter = this.viewRect.y + deltaToCenter;
-            nativeContext.Translate(Math.round(xPositionCenter), Math.round(-(this.viewRect.x + this.viewRect.width) + (padding === null || padding === void 0 ? void 0 : padding.right)));
-            nativeContext.DrawTexture(bitmapTexture, 0, 0, textureWidth, textureHeight);
-            nativeContext.PopMatrix();
-        }
-        if (!this.useCache) {
-            (0, Deleter_1.deleteSafe)(bitmapTexture);
-            this.texture = undefined;
-        }
+    AxisTitleRenderer.prototype.draw = function (renderContext) {
+        return this.drawInternal(renderContext, this.useNativeText, this.titlePosition);
     };
     return AxisTitleRenderer;
-}());
+}(TitleRenderer_1.TitleRendererBase));
 exports.AxisTitleRenderer = AxisTitleRenderer;
 var checkAreEqualTextStyles = function (style1, style2) {
+    if (!style1 || !style2) {
+        return false;
+    }
     return (style1.color === style2.color &&
         style1.fontFamily === style2.fontFamily &&
         style1.fontSize === style2.fontSize &&
         style1.fontStyle === style2.fontStyle &&
         style1.fontWeight === style2.fontWeight &&
+        style1.alignment === style2.alignment &&
+        style1.rotation === style2.rotation &&
         style1.multilineAlignment === style2.multilineAlignment &&
         ((style1.padding === undefined && style2.padding === undefined) || style1.padding.equals(style2.padding)));
 };
+// TODO consider refactoring
+// helper function used to unify title renderer types & interfaces
+var convertLabelAlignmentToTextAlignment = function (alignment) {
+    if (alignment === LabelAlignment_1.ELabelAlignment.Auto) {
+        return TextStyle_1.ETextAlignment.Center;
+    }
+    return TextStyle_1.ETextAlignment[alignment];
+};

package/Charting/Visuals/Axis/IAxisCoreOptions.d.ts

@@ -19,7 +19,7 @@ export interface IAxisCoreOptions {
      * axis.visibleRange = new NumberRange(15, 25);
      * ```
      * @remarks
-     * The visibleRange is a data-value for {@link NumericAxis}, @{link NumericAxis3D} but refers to an **index** to the data
+     * The visibleRange is a data-value for {@link NumericAxis}, {@link NumericAxis3D} but refers to an **index** to the data
      * for {@link CategoryAxis} types.
      */
     visibleRange?: NumberRange;
@@ -152,7 +152,7 @@ export interface IAxisCoreOptions {
      */
     axisBandsFill?: string;
     /**
-     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with @{link AxisCore.visibleRange | VisibleRange}
+     * When true, axis coordinates are flipped, e.g. a {@link NumericAxis} with {@link AxisCore.visibleRange | VisibleRange}
      * 0..10 will render from 10 to 0
      */
     flippedCoordinates?: boolean;

package/Charting/Visuals/Axis/LabelProvider/LabelCache.js

@@ -113,6 +113,7 @@ var pruneCache = function () {
 };
 var checkTextStyleEqual = function (style1, style2) {
     return (style1.alignment === style2.alignment &&
+        style1.multilineAlignment === style2.multilineAlignment &&
         style1.color === style2.color &&
         style1.fontFamily === style2.fontFamily &&
         style1.fontSize === style2.fontSize &&

package/Charting/Visuals/RenderableSeries/HitTest/BandSeriesHitTestProvider.js

@@ -128,10 +128,17 @@ var BandSeriesHitTestProvider = /** @class */ (function (_super) {
         }
         if (dataSeries.dataDistributionCalculator.isSortedAscending && nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();
-            var xValue = xNativeValues.get(nearestPointIndex);
-            var xHitValue = xCoordinateCalculator.getDataValue(xHitCoord);
-            if (!(nearestPointIndex === dataSeriesCount - 1 && xHitValue >= xValue) &&
-                !(nearestPointIndex === 0 && xHitValue <= xValue)) {
+            var nearestXCoord = xCoordinateCalculator.getCoordinate(xCoordinateCalculator.isCategoryCoordinateCalculator
+                ? nearestPointIndex
+                : xNativeValues.get(nearestPointIndex));
+            if (!(nearestPointIndex === dataSeriesCount - 1 &&
+                (xCoordinateCalculator.hasFlippedCoordinates
+                    ? xHitCoord >= nearestXCoord
+                    : xHitCoord <= nearestXCoord)) &&
+                !(nearestPointIndex === 0 &&
+                    (xCoordinateCalculator.hasFlippedCoordinates
+                        ? xHitCoord <= nearestXCoord
+                        : xHitCoord >= nearestXCoord))) {
                 var hitRes = hitTestHelpers_1.hitTestHelpers.testIsHitForLine(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, 0);
                 hitTestInfo.point2dataSeriesIndex = hitRes.secondPointIndex;
                 if (hitRes.secondPointIndex !== undefined) {

package/Charting/Visuals/RenderableSeries/HitTest/BaseHitTestProvider.js

@@ -84,10 +84,17 @@ var BaseHitTestProvider = /** @class */ (function () {
         hitTestInfo.isHit = hitTestInfo.isWithinDataBounds;
         if (dataSeries.dataDistributionCalculator.isSortedAscending && nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();
-            var xValue = xNativeValues.get(nearestPointIndex);
-            var xHitValue = xCoordinateCalculator.getDataValue(xHitCoord);
-            if (!(nearestPointIndex === dataSeriesCount - 1 && xHitValue >= xValue) &&
-                !(nearestPointIndex === 0 && xHitValue <= xValue)) {
+            var nearestXCoord = xCoordinateCalculator.getCoordinate(xCoordinateCalculator.isCategoryCoordinateCalculator
+                ? nearestPointIndex
+                : xNativeValues.get(nearestPointIndex));
+            if (!(nearestPointIndex === dataSeriesCount - 1 &&
+                (xCoordinateCalculator.hasFlippedCoordinates
+                    ? xHitCoord >= nearestXCoord
+                    : xHitCoord <= nearestXCoord)) &&
+                !(nearestPointIndex === 0 &&
+                    (xCoordinateCalculator.hasFlippedCoordinates
+                        ? xHitCoord <= nearestXCoord
+                        : xHitCoord >= nearestXCoord))) {
                 var hitRes = hitTestHelpers_1.hitTestHelpers.testIsHitForLine(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, 0);
                 hitTestInfo.point2dataSeriesIndex = hitRes.secondPointIndex;
                 hitTestInfo.point2xValue = xNativeValues.get(hitRes.secondPointIndex);

package/Charting/Visuals/RenderableSeries/HitTest/LineSeriesHitTestProvider.js

@@ -60,10 +60,17 @@ var LineSeriesHitTestProvider = /** @class */ (function (_super) {
         var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
         if (nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();
-            var xValue = xNativeValues.get(nearestPointIndex);
-            var xHitValue = xCoordinateCalculator.getDataValue(xHitCoord);
-            if ((nearestPointIndex === dataSeriesCount - 1 && xHitValue >= xValue) ||
-                (nearestPointIndex === 0 && xHitValue <= xValue)) {
+            var nearestXCoord = xCoordinateCalculator.getCoordinate(xCoordinateCalculator.isCategoryCoordinateCalculator
+                ? nearestPointIndex
+                : xNativeValues.get(nearestPointIndex));
+            if ((nearestPointIndex === dataSeriesCount - 1 &&
+                (xCoordinateCalculator.hasFlippedCoordinates
+                    ? xHitCoord >= nearestXCoord
+                    : xHitCoord <= nearestXCoord)) ||
+                (nearestPointIndex === 0 &&
+                    (xCoordinateCalculator.hasFlippedCoordinates
+                        ? xHitCoord <= nearestXCoord
+                        : xHitCoord >= nearestXCoord))) {
                 hitTestInfo.isHit = hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, hitTestRadius);
             }
             else {

package/Charting/Visuals/SciChartSurface.d.ts

@@ -225,6 +225,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     protected titleStyleProperty: Readonly<Required<TChartTitleStyle>>;
     protected chartTitleRendererProperty: IChartTitleRenderer;
     protected paddingProperty: Thickness;
+    protected currentWebGlRenderContextProperty: WebGlRenderContext2D;
     private readonly sciChartRenderer;
     private layoutManagerProperty;
     private dataLabelLayoutManagerProperty;
@@ -468,6 +469,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Gets the SciChartSurface Canvas Bottom Border
      */
     get bottomCanvasBorder(): number;
+    get currentWebGlRenderContext(): WebGlRenderContext2D;
     /**
      * Is being called on each render, to run animations
      * @param timeElapsed