scichart 3.0.317 → 3.1.333

package/Charting/Services/TitleRenderer.js

@@ -0,0 +1,249 @@
+"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");
+var TextureManager_1 = require("../Visuals/TextureManager/TextureManager");
+var TitleRendererBase = /** @class */ (function () {
+    function TitleRendererBase(webAssemblyContext) {
+        this.drawDebug = false;
+        this.useCache = true;
+        this.viewRectProperty = Rect_1.Rect.createZero();
+        /**
+         * The height taken by the text with normal(horizontal) orientation including padding
+         */
+        this.textHeight = 0;
+        /**
+         * The width taken by the text with normal(horizontal) orientation including padding
+         */
+        this.textWidth = 0;
+        /**
+         * The height taken by the text considering current orientation orientation including padding
+         */
+        this.desiredHeightProperty = 0;
+        /**
+         * 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);
+        DpiHelper_1.DpiHelper.dpiChanged.subscribe(this.onDpiChanged);
+    }
+    Object.defineProperty(TitleRendererBase.prototype, "viewRect", {
+        /**
+         * Defines a bounding {@link Rect} containing the title text
+         */
+        get: function () {
+            return this.viewRectProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // TODO consider if this class should be abstract
+    TitleRendererBase.prototype.measure = function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+    };
+    TitleRendererBase.prototype.layout = function (originRect) { };
+    TitleRendererBase.prototype.draw = function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+    };
+    TitleRendererBase.prototype.delete = function () {
+        this.resetCache();
+        DpiHelper_1.DpiHelper.dpiChanged.unsubscribe(this.onDpiChanged);
+    };
+    TitleRendererBase.prototype.resetCache = function () {
+        this.invalidateCache();
+        this.textStyle = undefined;
+        this.originalTextStyle = undefined;
+    };
+    TitleRendererBase.prototype.invalidateCache = function () {
+        var _a;
+        (0, Deleter_1.deleteSafe)((_a = this.texture) === null || _a === void 0 ? void 0 : _a.bitmapTexture);
+        this.texture = undefined;
+    };
+    TitleRendererBase.prototype.onDpiChanged = function (args) {
+        this.resetCache();
+    };
+    /**
+     * Performs rendering of the title
+     */
+    TitleRendererBase.prototype.drawInternal = function (renderContext, useNativeText, titlePosition) {
+        if (!this.text || this.text.length === 0) {
+            return;
+        }
+        if (useNativeText) {
+            this.drawWithNativeText(renderContext, titlePosition);
+        }
+        else {
+            this.drawWithTexture(renderContext, titlePosition);
+        }
+        // if (this.drawDebug) {
+        //     this.drawTitleDebugViewRect(renderContext);
+        // }
+    };
+    TitleRendererBase.prototype.drawWithNativeText = function (renderContext, position) {
+        var titleText = Array.isArray(this.text) ? this.text.join("\n") : this.text;
+        // @ts-ignore mismatch with TTextStyle
+        var nativeFont = renderContext.getFont(this.textStyle, true);
+        // calculate start coordinates for native text drawing;
+        // the start point is the beginning of alphabetic text baseline
+        var tx = this.viewRect.left + this.textStyle.padding.left;
+        var ty = this.viewRect.top + this.textStyle.padding.top + this.firstLineAscent;
+        var adjRotation = 0;
+        // let adjRotation = this.textStyle.rotation;
+        if (position === TextStyle_1.ETitlePosition.Left) {
+            adjRotation += -90;
+            tx = this.viewRect.left + this.textStyle.padding.top + this.firstLineAscent;
+            ty = this.viewRect.bottom - this.textStyle.padding.left;
+        }
+        else if (position === TextStyle_1.ETitlePosition.Right) {
+            adjRotation += 90;
+            tx = this.viewRect.right - this.textStyle.padding.top - this.firstLineAscent;
+            ty = this.viewRect.top + this.textStyle.padding.left;
+        }
+        var rotationRad = -(adjRotation * Math.PI) / 180;
+        var nativeMultilineAlignment = (0, TextPosition_1.convertMultiLineAlignment)(this.textStyle.multilineAlignment, this.webAssemblyContext);
+        var textColor = (0, parseColor_1.parseColorToUIntArgb)(this.textStyle.color);
+        nativeFont.DrawStringAdvanced(titleText, textColor, Math.round(tx), Math.round(ty), (0, NativeObject_1.getVector4)(this.webAssemblyContext, tx, ty, rotationRad, 0), nativeMultilineAlignment, this.nativeLineSpacing);
+    };
+    TitleRendererBase.prototype.drawWithTexture = function (renderContext, titlePosition) {
+        var _a = this.texture, bitmapTexture = _a.bitmapTexture, textureHeight = _a.textureHeight, textureWidth = _a.textureWidth;
+        if (bitmapTexture) {
+            try {
+                var nativeContext = renderContext.getNativeContext();
+                nativeContext.DrawTexture(bitmapTexture, Math.round(this.viewRect.left), Math.round(this.viewRect.top), textureWidth, textureHeight);
+                if (!this.useCache) {
+                    bitmapTexture.delete();
+                    this.texture = undefined;
+                }
+            }
+            catch (err) {
+                console.error("Error while drawing title: ", err);
+                // webgl context probably lost. Clear the cache
+                this.resetCache();
+            }
+        }
+    };
+    /**
+     * 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 || title.length === 0) {
+            return Rect_1.Rect.createZero();
+        }
+        var hasHorizontalPlacement = (0, TextStyle_1.getIsHorizontalPlacement)(titlePosition);
+        var alignmentDelta = this.getAlignmentAdjustmentDelta(hasHorizontalPlacement ? originRect.width : originRect.height, titlePosition, alignment);
+        switch (titlePosition) {
+            case TextStyle_1.ETitlePosition.Top:
+                return new Rect_1.Rect(originRect.x + alignmentDelta, originRect.y, this.textWidth, this.textHeight);
+            case TextStyle_1.ETitlePosition.Bottom:
+                return new Rect_1.Rect(originRect.x + alignmentDelta, originRect.bottom - this.textHeight, this.textWidth, this.textHeight);
+            case TextStyle_1.ETitlePosition.Left:
+                return new Rect_1.Rect(originRect.x, originRect.y + alignmentDelta, this.textHeight, this.textWidth);
+            case TextStyle_1.ETitlePosition.Right:
+                return new Rect_1.Rect(originRect.right - this.textHeight, originRect.y + alignmentDelta, this.textHeight, this.textWidth);
+            default:
+                return (0, TextStyle_1.handleInvalidChartTitlePosition)(titlePosition);
+        }
+    };
+    TitleRendererBase.prototype.drawTitleDebugViewRect = function (renderContext) {
+        var viewRect = this.viewRect;
+        var vecRects = (0, NativeObject_1.getVectorRectVertex)(this.webAssemblyContext);
+        var brush = new this.webAssemblyContext.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)("rgba(0,255,0,0.7)"), false);
+        var nativeRect = (0, createNativeRect_1.createNativeRect)(this.webAssemblyContext, 0, 0, viewRect.width, viewRect.height);
+        vecRects.push_back(nativeRect);
+        renderContext.drawRects(vecRects, brush, viewRect.left, viewRect.top);
+        brush.delete();
+    };
+    /**
+     * Calculates the offset of title text alignment defined by {@link TChartTitleStyle.alignment} or {@link TTextStyle.alignment}
+     */
+    TitleRendererBase.prototype.getAlignmentAdjustmentDelta = function (availableSpace, position, alignment) {
+        switch (alignment) {
+            case TextStyle_1.ETextAlignment.Center:
+                return availableSpace / 2 - this.textWidth / 2;
+            case TextStyle_1.ETextAlignment.Left:
+                return position === TextStyle_1.ETitlePosition.Left ? availableSpace - this.textWidth : 0;
+            case TextStyle_1.ETextAlignment.Right:
+                return position === TextStyle_1.ETitlePosition.Left ? 0 : availableSpace - this.textWidth;
+            default:
+                return (0, TextStyle_1.handleInvalidTextAlignment)(alignment);
+        }
+    };
+    return TitleRendererBase;
+}());
+exports.TitleRendererBase = TitleRendererBase;

package/Charting/Themes/IThemeProvider.d.ts

@@ -234,6 +234,11 @@ export interface IThemeProvider {
      * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
      */
     axisTitleColor: string;
+    /**
+     * The default Chart Title color applied as an HTML color code
+     * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
+     */
+    chartTitleColor: string;
     /**
      * The default shadow effect color applied to drop-shadows
      * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
@@ -468,6 +473,11 @@ export interface IThemePartial {
      * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
      */
     axisTitleColor?: string;
+    /**
+     * The default Chart Title color applied as an HTML color code
+     * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
+     */
+    chartTitleColor?: string;
     /**
      * The default shadow effect color applied to drop-shadows
      * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
@@ -536,6 +546,7 @@ export declare abstract class ThemeProvider implements IThemeProvider {
     abstract impulseFillBrush: string;
     abstract defaultColorMapBrush: TGradientStop[];
     abstract axisTitleColor: string;
+    abstract chartTitleColor: string;
     abstract shadowEffectColor: string;
     abstract planeBorderColor: string;
     abstract axisPlaneBackgroundFill: string;
@@ -745,6 +756,11 @@ export declare abstract class ThemeProvider implements IThemeProvider {
          * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
          */
         axisTitleColor?: string;
+        /**
+         * The default Chart Title color applied as an HTML color code
+         * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```
+         */
+        chartTitleColor?: string;
         /**
          * The default shadow effect color applied to drop-shadows
          * @remarks Acceptable values include RGB format e.g. ```#FF0000```, RGBA format e.g. ```#FF000077`` and RGBA format e.g. ```rgba(255,0,0,0.5)```

package/Charting/Themes/SciChartJSDarkTheme.d.ts

@@ -122,6 +122,8 @@ export declare class SciChartJSDarkTheme extends ThemeProvider {
     /** @inheritDoc */
     axisTitleColor: string;
     /** @inheritDoc */
+    chartTitleColor: string;
+    /** @inheritDoc */
     shadowEffectColor: string;
     /** @inheritDoc */
     planeBorderColor: string;

package/Charting/Themes/SciChartJSDarkTheme.js

@@ -144,6 +144,8 @@ var SciChartJSDarkTheme = /** @class */ (function (_super) {
         /** @inheritDoc */
         _this.axisTitleColor = "#C8C7C3FF";
         /** @inheritDoc */
+        _this.chartTitleColor = "#C8C7C3FF";
+        /** @inheritDoc */
         _this.shadowEffectColor = "#000000FF";
         /** @inheritDoc */
         _this.planeBorderColor = "#333333FF";

package/Charting/Themes/SciChartJSLightTheme.d.ts

@@ -126,6 +126,8 @@ export declare class SciChartJSLightTheme extends ThemeProvider {
     /** @inheritDoc */
     axisTitleColor: string;
     /** @inheritDoc */
+    chartTitleColor: string;
+    /** @inheritDoc */
     shadowEffectColor: string;
     /** @inheritDoc */
     planeBorderColor: string;

package/Charting/Themes/SciChartJSLightTheme.js

@@ -148,6 +148,8 @@ var SciChartJSLightTheme = /** @class */ (function (_super) {
         /** @inheritDoc */
         _this.axisTitleColor = "#777777FF";
         /** @inheritDoc */
+        _this.chartTitleColor = "#777777FF";
+        /** @inheritDoc */
         _this.shadowEffectColor = "#A0AABAFA";
         /** @inheritDoc */
         _this.planeBorderColor = "#EEEEEEFF";

package/Charting/Visuals/Annotations/NativeTextAnnotation.js

@@ -360,11 +360,7 @@ var NativeTextAnnotation = /** @class */ (function (_super) {
             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;
+            y1 -= textBounds.m_fHeight / 2 - textBounds.GetLineBounds(0).m_fHeight;
         }
         else if (this.verticalAnchorPointProperty === AnchorPoint_1.EVerticalAnchorPoint.Top) {
             y1 += textBounds.GetLineBounds(0).m_fHeight;

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -297,7 +297,8 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
             return;
         var borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
         var borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
-        this.svgDOMRect = this.svg.getBoundingClientRect();
+        // @ts-ignore
+        this.svgDOMRect = this.svg.getBBox();
         var borderX2 = borderX1 + this.svgDOMRect.width;
         var borderY2 = borderY1 + this.svgDOMRect.height;
         if (this.verticalAnchorPoint === AnchorPoint_1.EVerticalAnchorPoint.Bottom) {

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -114,7 +114,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             color: SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.tickTextBrush,
             fontWeight: "normal",
             fontStyle: "normal",
-            padding: Thickness_1.Thickness.fromString("2 4 0 4"),
+            padding: Thickness_1.Thickness.fromString("2 4 2 4"),
             alignment: LabelAlignment_1.ELabelAlignment.Auto
         };
         _this.isInnerAxisProperty = false;
@@ -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;
@@ -1226,5 +1217,5 @@ var AxisBase2D = /** @class */ (function (_super) {
 exports.AxisBase2D = AxisBase2D;
 /** @ignore */
 var getPenForLines = function (penCache, stroke, strokeThickness, strokeDashArray) {
-    return (0, Pen2DCache_1.createPenInCache)(penCache, stroke, strokeThickness, 1, strokeDashArray);
+    return (0, Pen2DCache_1.createPenInCache)(penCache, stroke, strokeThickness, 1, strokeDashArray, false);
 };

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

@@ -7,6 +7,7 @@ import { Thickness } from "../../../Core/Thickness";
 import { EAutoRange } from "../../../types/AutoRange";
 import { EAxisType } from "../../../types/AxisType";
 import { ELabelAlignment } from "../../../types/LabelAlignment";
+import { EMultiLineAlignment } from "../../../types/TextPosition";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { TickCoordinatesProvider } from "../../Numerics/TickCoordinateProviders/TickCoordinatesProvider";
 import { TickProvider } from "../../Numerics/TickProviders/TickProvider";
@@ -58,8 +59,15 @@ export declare type TTextStyle = {
      * If you are using text labels rather than just numbers, or when using native text, you may want to increase the bottom padding.
      */
     padding?: Thickness;
-    /** Horizontal label alignment for vertical axes.  Default Auto */
+    /**
+     * Horizontal label alignment for vertical axes. Default Auto.
+     * @privateRemarks This property should only be used for axis labels.
+     * So the current type definition should be changed in future versions, specifically this property may be renamed or removed.
+     * In other cases, e.g. for multiline text alignment use TTextStyle.multilineAlignment
+     */
     alignment?: ELabelAlignment;
+    /** Horizontal text alignment for multiline text. */
+    multilineAlignment?: EMultiLineAlignment;
 };
 /**
  * Interface to minimal set of parameters which define an {@link AxisCore | Axis} in SciChart

package/Charting/Visuals/Axis/AxisRenderer.js

@@ -262,7 +262,7 @@ var AxisRenderer = /** @class */ (function () {
                 try {
                     if (nativeFont) {
                         var tx = xCoord + viewRect.left + padding.left;
-                        var ty = yCoord + viewRect.top + lineHeight - padding.bottom;
+                        var ty = yCoord + viewRect.top + lineHeight + padding.top;
                         var rx = tx;
                         var ry = ty - lineHeight;
                         if (rotationRad !== 0) {
@@ -323,7 +323,7 @@ var AxisRenderer = /** @class */ (function () {
                 try {
                     if (nativeFont) {
                         var tx = xCoord + viewRect.left + padding.left;
-                        var ty = yCoord + viewRect.top + lineHeight - padding.bottom;
+                        var ty = yCoord + viewRect.top + lineHeight + padding.top;
                         nativeFont.DrawStringAdvanced(labelText !== null && labelText !== void 0 ? labelText : "", textColor, Math.round(tx), Math.round(ty), (0, NativeObject_1.getVector4)(this.webAssemblyContext, tx, ty, rotationRad, 0), multiLineAlignment, nativeLineSpacing);
                     }
                     else {

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

@@ -1,27 +1,28 @@
 import { Rect } from "../../../Core/Rect";
 import { EAxisAlignment } from "../../../types/AxisAlignment";
-import { TSciChart } from "../../../types/TSciChart";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
-import { TextureManager } 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 {
-    viewRect: Rect;
-    text: string | string[];
+export declare class AxisTitleRenderer extends TitleRendererBase<TTextStyle> {
     lineSpacing: number;
-    private webAssemblyContext;
-    private desiredHeightProperty;
-    private desiredWidthProperty;
-    private textureManager;
-    constructor(webAssemblyContext: TSciChart);
-    measure(textStyle: TTextStyle, isHorizontal: boolean): void;
+    /** For internal use */
+    parentSurface: SciChartSurface;
+    private previousText;
+    private previousLineSpacing;
+    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): import("../TextureManager/TextureManager").TTextureObject;
-    draw(renderContext: WebGlRenderContext2D, textStyle: TTextStyle, axisAlignment: EAxisAlignment, debugRendering: boolean): void;
+    protected getTitleTexture(): import("../TextureManager/TextureManager").TTextureObject;
+    draw(renderContext: WebGlRenderContext2D): void;
 }