scichart 3.1.329 → 3.1.333

package/Charting/Services/ChartTitleRenderer.d.ts

@@ -26,10 +26,6 @@ export declare class ChartTitleRenderer extends TitleRendererBase<TChartTitleSty
      */
     draw(renderContext: WebGlRenderContext2D): void;
     protected getTitleTexture(): import("../Visuals/TextureManager/TextureManager").TTextureObject;
-    /**
-     * Calculates width and hight of the title text
-     */
-    protected getTextSize(title: string | string[], textStyle: TChartTitleStyle, renderContext: WebGlRenderContext2D): void;
     /**
      * Calculates the {@link ChartTitleRenderer.titleOffset}
      */

package/Charting/Services/ChartTitleRenderer.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartTitleRenderer = void 0;
 var Thickness_1 = require("../../Core/Thickness");
 var TextStyle_1 = require("../../types/TextStyle");
-var text_1 = require("../../utils/text");
 var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
 var TitleRenderer_1 = require("./TitleRenderer");
 /**
@@ -60,12 +59,15 @@ var ChartTitleRenderer = /** @class */ (function (_super) {
         var shouldUpdateTextSize = title !== this.text ||
             !(0, TextStyle_1.areEqualTextStyles)(originalTextStyle, this.originalTextStyle) ||
             ((_a = this.originalTextStyle) === null || _a === void 0 ? void 0 : _a.position) !== originalTextStyle.position;
-        this.text = title;
-        if (title) {
-            if (!this.useCache || !this.texture || shouldUpdateTextSize) {
+        if (title && title.length > 0) {
+            if (!this.useCache || (!this.texture && !originalTextStyle.useNativeText) || shouldUpdateTextSize) {
                 // recalculate cached text size info or texture
+                this.invalidateCache();
+                this.text = title;
                 this.originalTextStyle = __assign({}, originalTextStyle);
                 this.textStyle = (0, TextStyle_1.adjustTextStyle)(originalTextStyle);
+                this.useNativeTextProperty = originalTextStyle.useNativeText;
+                this.titlePosition = originalTextStyle.position;
                 this.getTextSize(title, this.textStyle, renderContext);
             }
             else {
@@ -81,7 +83,7 @@ var ChartTitleRenderer = /** @class */ (function (_super) {
      * @param chartViewRect - the container area which is used as an origin for title layout calculation
      */
     ChartTitleRenderer.prototype.layout = function (chartViewRect) {
-        if (!this.text) {
+        if (!this.text || this.text.length === 0) {
             this.viewRectProperty = undefined;
             return;
         }
@@ -91,14 +93,14 @@ var ChartTitleRenderer = /** @class */ (function (_super) {
      * Performs rendering of the title
      */
     ChartTitleRenderer.prototype.draw = function (renderContext) {
-        if (!this.text) {
+        if (!this.text || this.text.length === 0) {
             return;
         }
         if (SciChartSurfaceBase_1.DebugForDpi) {
             console.log("ChartTitleRenderer.draw fontSize: ".concat(this.textStyle.fontSize));
         }
         var _a = this.textStyle, useNativeText = _a.useNativeText, position = _a.position, lineSpacing = _a.lineSpacing;
-        this.drawInternal(renderContext, useNativeText, position, lineSpacing);
+        this.drawInternal(renderContext, useNativeText, position);
         if (this.drawDebug) {
             this.drawTitleDebugViewRect(renderContext);
         }
@@ -113,7 +115,6 @@ var ChartTitleRenderer = /** @class */ (function (_super) {
         else if (position === TextStyle_1.ETitlePosition.Right) {
             adjRotation += 90;
         }
-        // TODO try using rotation property here
         var titleText = Array.isArray(this.text) ? this.text : this.text.split("\n");
         var texture = this.textureManager.createTextTexture(titleText, 
         // @ts-ignore mismatch with TTextStyle
@@ -122,39 +123,11 @@ var ChartTitleRenderer = /** @class */ (function (_super) {
         adjRotation, this.textStyle.lineSpacing);
         return texture;
     };
-    /**
-     * Calculates width and hight of the title text
-     */
-    ChartTitleRenderer.prototype.getTextSize = function (title, textStyle, renderContext) {
-        if (title === void 0) { title = ""; }
-        var hasHorizontalPlacement = (0, TextStyle_1.getIsHorizontalPlacement)(textStyle.position);
-        if (textStyle.useNativeText) {
-            // @ts-ignore mismatch with TTextStyle
-            var nativeFont = renderContext.getFont(textStyle, !hasHorizontalPlacement);
-            var titleString = Array.isArray(title) ? title.join("\n") : title;
-            var _a = (0, text_1.getNativeTextSize)(titleString, nativeFont, textStyle, this.webAssemblyContext), textHeight = _a.textHeight, textWidth = _a.textWidth, nativeLineSpacing = _a.nativeLineSpacing, firstLineAscent = _a.firstLineAscent;
-            this.textHeight = textHeight;
-            this.textWidth = textWidth;
-            this.nativeLineSpacing = nativeLineSpacing;
-            this.firstLineAscent = firstLineAscent;
-            this.desiredHeightProperty = hasHorizontalPlacement ? this.textHeight : this.textWidth;
-            this.desiredWidthProperty = hasHorizontalPlacement ? this.textWidth : this.textHeight;
-        }
-        else {
-            // current title texture doesn't include paddings, so they should be added here
-            var texture = this.getTitleTexture();
-            this.texture = texture;
-            this.desiredHeightProperty = texture.textureHeight;
-            this.desiredWidthProperty = texture.textureWidth;
-            this.textHeight = hasHorizontalPlacement ? this.desiredHeightProperty : this.desiredWidthProperty;
-            this.textWidth = hasHorizontalPlacement ? this.desiredWidthProperty : this.desiredHeightProperty;
-        }
-    };
     /**
      * Calculates the {@link ChartTitleRenderer.titleOffset}
      */
     ChartTitleRenderer.prototype.getTitleOffset = function (title, textStyle) {
-        if (!title || textStyle.placeWithinChart) {
+        if (!this.text || this.text.length === 0 || textStyle.placeWithinChart) {
             return Thickness_1.Thickness.fromNumber(0);
         }
         var height = this.textHeight;

package/Charting/Services/TitleRenderer.d.ts

@@ -28,7 +28,7 @@ export declare class TitleRendererBase<TextStyleType extends TTextStyle | TChart
     /**
      * Current title
      */
-    text: string | string[];
+    protected text: string | string[];
     protected viewRectProperty: Rect;
     protected webAssemblyContext: TSciChart;
     protected textureManager: TextureManager;
@@ -65,6 +65,8 @@ export declare class TitleRendererBase<TextStyleType extends TTextStyle | TChart
     protected nativeLineSpacing: number;
     /** The height of the first line above baseline for native text, calculated during measure*/
     protected firstLineAscent: number;
+    protected useNativeTextProperty: boolean;
+    protected titlePosition: ETitlePosition;
     constructor(webAssemblyContext: TSciChart);
     measure(...params: any[]): void;
     layout(originRect: Rect): void;
@@ -76,9 +78,14 @@ export declare class TitleRendererBase<TextStyleType extends TTextStyle | TChart
     /**
      * Performs rendering of the title
      */
-    protected drawInternal(renderContext: WebGlRenderContext2D, useNativeText: boolean, titlePosition: ETitlePosition, lineSpacing: number): void;
+    protected drawInternal(renderContext: WebGlRenderContext2D, useNativeText: boolean, titlePosition: ETitlePosition): void;
     protected drawWithNativeText(renderContext: WebGlRenderContext2D, position: ETitlePosition): void;
     protected drawWithTexture(renderContext: WebGlRenderContext2D, titlePosition: ETitlePosition): void;
+    /**
+     * Calculates width and hight of the title text
+     */
+    protected getTextSize(title: string | string[], textStyle: TChartTitleStyle, renderContext: WebGlRenderContext2D): void;
+    protected getTitleTexture(): TTextureObject;
     /**
      * Calculates the {@link TitleRenderer.viewRect}
      */

package/Charting/Services/TitleRenderer.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TitleRendererBase = void 0;
+var app_1 = require("../../constants/app");
 var Deleter_1 = require("../../Core/Deleter");
 var Rect_1 = require("../../Core/Rect");
 var TextPosition_1 = require("../../types/TextPosition");
 var TextStyle_1 = require("../../types/TextStyle");
 var parseColor_1 = require("../../utils/parseColor");
+var text_1 = require("../../utils/text");
 var createNativeRect_1 = require("../Visuals/Helpers/createNativeRect");
 var NativeObject_1 = require("../Visuals/Helpers/NativeObject");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
@@ -31,6 +33,7 @@ var TitleRendererBase = /** @class */ (function () {
          * The width taken by the text considering current orientation orientation including padding
          */
         this.desiredWidthProperty = 0;
+        this.useNativeTextProperty = false;
         this.webAssemblyContext = webAssemblyContext;
         this.textureManager = new TextureManager_1.TextureManager(webAssemblyContext);
         this.onDpiChanged = this.onDpiChanged.bind(this);
@@ -66,12 +69,11 @@ var TitleRendererBase = /** @class */ (function () {
     };
     TitleRendererBase.prototype.resetCache = function () {
         this.invalidateCache();
+        this.textStyle = undefined;
+        this.originalTextStyle = undefined;
     };
     TitleRendererBase.prototype.invalidateCache = function () {
         var _a;
-        this.text = undefined;
-        this.textStyle = undefined;
-        this.originalTextStyle = undefined;
         (0, Deleter_1.deleteSafe)((_a = this.texture) === null || _a === void 0 ? void 0 : _a.bitmapTexture);
         this.texture = undefined;
     };
@@ -81,8 +83,8 @@ var TitleRendererBase = /** @class */ (function () {
     /**
      * Performs rendering of the title
      */
-    TitleRendererBase.prototype.drawInternal = function (renderContext, useNativeText, titlePosition, lineSpacing) {
-        if (!this.text) {
+    TitleRendererBase.prototype.drawInternal = function (renderContext, useNativeText, titlePosition) {
+        if (!this.text || this.text.length === 0) {
             return;
         }
         if (useNativeText) {
@@ -138,12 +140,69 @@ var TitleRendererBase = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Calculates width and hight of the title text
+     */
+    TitleRendererBase.prototype.getTextSize = function (title, textStyle, renderContext) {
+        if (title === void 0) { title = ""; }
+        if (!title || title.length === 0) {
+            this.desiredHeightProperty = 0;
+            this.desiredWidthProperty = 0;
+            this.textHeight = 0;
+            this.textWidth = 0;
+            return;
+        }
+        var hasHorizontalPlacement = (0, TextStyle_1.getIsHorizontalPlacement)(this.titlePosition);
+        if (this.useNativeTextProperty) {
+            // @ts-ignore mismatch with TTextStyle
+            var nativeFont = renderContext.getFont(textStyle, !hasHorizontalPlacement);
+            var titleString = Array.isArray(title) ? title.join("\n") : title;
+            var _a = (0, text_1.getNativeTextSize)(titleString, nativeFont, textStyle, this.webAssemblyContext), textHeight = _a.textHeight, textWidth = _a.textWidth, nativeLineSpacing = _a.nativeLineSpacing, firstLineAscent = _a.firstLineAscent;
+            this.textHeight = textHeight;
+            this.textWidth = textWidth;
+            this.nativeLineSpacing = nativeLineSpacing;
+            this.firstLineAscent = firstLineAscent;
+            this.desiredHeightProperty = hasHorizontalPlacement ? this.textHeight : this.textWidth;
+            this.desiredWidthProperty = hasHorizontalPlacement ? this.textWidth : this.textHeight;
+        }
+        else {
+            // current title texture doesn't include paddings, so they should be added here
+            var texture = this.getTitleTexture();
+            this.texture = texture;
+            this.desiredHeightProperty = texture.textureHeight;
+            this.desiredWidthProperty = texture.textureWidth;
+            this.textHeight = hasHorizontalPlacement ? this.desiredHeightProperty : this.desiredWidthProperty;
+            this.textWidth = hasHorizontalPlacement ? this.desiredWidthProperty : this.desiredHeightProperty;
+        }
+        if (app_1.IS_TEST_ENV) {
+            if (hasHorizontalPlacement) {
+                this.desiredHeightProperty =
+                    (0, TextureManager_1.measureTextHeight)(textStyle.fontSize) + this.textStyle.padding.top + this.textStyle.padding.bottom;
+                this.desiredWidthProperty = 0;
+            }
+            else {
+                this.desiredHeightProperty = 0;
+                this.desiredWidthProperty =
+                    (0, TextureManager_1.measureTextHeight)(textStyle.fontSize) + this.textStyle.padding.top + this.textStyle.padding.bottom;
+            }
+        }
+    };
+    TitleRendererBase.prototype.getTitleTexture = function () {
+        // TODO this is not used at the moment; consider unifying logic for Chart Title Renderer and Axis Title Renderer
+        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) },
+        );
+        return texture;
+    };
     /**
      * Calculates the {@link TitleRenderer.viewRect}
      */
     TitleRendererBase.prototype.getViewRect = function (title, originRect, titlePosition, alignment) {
         if (title === void 0) { title = ""; }
-        if (!title) {
+        if (!title || title.length === 0) {
             return Rect_1.Rect.createZero();
         }
         var hasHorizontalPlacement = (0, TextStyle_1.getIsHorizontalPlacement)(titlePosition);

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/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 { TitleRendererBase } from "../../Services/TitleRenderer";
+import { SciChartSurface } from "../SciChartSurface";
 import { TTextStyle } 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<TTextStyle> {
     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: TTextStyle, 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,55 @@ 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;
-        }
-        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;
-        return texture;
-    };
-    AxisTitleRenderer.prototype.draw = function (renderContext, textStyle, axisAlignment, debugRendering) {
-        if (!this.text)
+        if (!this.text) {
+            this.viewRectProperty = rect;
             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();
+        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;
+        // let adjRotation = this.textStyle.rotation;
+        if (position === TextStyle_1.ETitlePosition.Left) {
+            adjRotation += -90;
         }
-        if (!this.useCache) {
-            (0, Deleter_1.deleteSafe)(bitmapTexture);
-            this.texture = undefined;
+        else if (position === TextStyle_1.ETitlePosition.Right) {
+            adjRotation += 90;
         }
+        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) {
+        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.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/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/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