scichart 3.0.317 → 3.1.333

package/Charting/Visuals/SciChartSurface.d.ts

@@ -29,6 +29,8 @@ import { ESurfaceType, SciChartSurfaceBase, TSciChartConfig } from "./SciChartSu
 import { TDpiChangedEventArgs } from "./TextureManager/DpiHelper";
 import { Point } from "../../Core/Point";
 import { EWatermarkPosition } from "../../types/WatermarkPosition";
+import { TChartTitleStyle } from "../../types/TextStyle";
+import { IChartTitleRenderer } from "../Services/TitleRenderer";
 export declare type TSciChart = TWasmContext;
 export declare type TWebAssemblyChart = {
     wasmContext: TSciChart;
@@ -97,6 +99,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Tell SciChart to load the Wasm and Data files from the local server, rather than from CDN.
      */
     static useWasmLocal(): void;
+    static isSubSurface(surface: SciChartSurface): surface is SciChartSubSurface;
     private static createTest;
     readonly renderSurface: RenderSurface;
     /**
@@ -218,7 +221,11 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /** Set true to position the watermark relative to the overall canvas, rather than the series area.   */
     watermarkRelativeToCanvas: boolean;
     protected animationList: IGenericAnimation[];
+    protected titleProperty: string | string[];
+    protected titleStyleProperty: Readonly<Required<TChartTitleStyle>>;
+    protected chartTitleRendererProperty: IChartTitleRenderer;
     protected paddingProperty: Thickness;
+    protected currentWebGlRenderContextProperty: WebGlRenderContext2D;
     private readonly sciChartRenderer;
     private layoutManagerProperty;
     private dataLabelLayoutManagerProperty;
@@ -272,6 +279,11 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally - gets or sets the {@link LayoutManager}
      */
     set layoutManager(value: LayoutManager);
+    /**
+     * Controls the rendering of {@link SiCharSurface.title}
+     */
+    get chartTitleRenderer(): IChartTitleRenderer;
+    set chartTitleRenderer(value: IChartTitleRenderer);
     /**
      * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
      */
@@ -280,6 +292,24 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
      */
     set dataLabelLayoutManager(value: IDataLabelLayoutManager);
+    /**
+     * Gets or sets the title for the SciChartSurface
+     */
+    get title(): string | string[];
+    /**
+     * Gets or sets the title for the SciChartSurface
+     */
+    set title(value: string | string[]);
+    /**
+     * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+     */
+    get titleStyle(): Readonly<Required<TChartTitleStyle>>;
+    /**
+     * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+     * @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
+     * instead of directly setting individual properties
+     */
+    set titleStyle(value: TChartTitleStyle);
     /**
      * Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left
      * @remarks
@@ -439,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

package/Charting/Visuals/SciChartSurface.js

@@ -91,7 +91,6 @@ var RenderSurface_1 = require("../Drawing/RenderSurface");
 var SolidBrushCache_1 = require("../Drawing/SolidBrushCache");
 var LayoutManager_1 = require("../LayoutManager/LayoutManager");
 var SciChartRenderer_1 = require("../Services/SciChartRenderer");
-var TextureWorker_1 = require("../Services/Workers/TextureWorker");
 var AdornerLayer_1 = require("./Annotations/AdornerLayer");
 var AnnotationBase_1 = require("./Annotations/AnnotationBase");
 var AxisBase2D_1 = require("./Axis/AxisBase2D");
@@ -109,9 +108,10 @@ var DpiHelper_1 = require("./TextureManager/DpiHelper");
 var UpdateSuspender_1 = require("./UpdateSuspender");
 var Point_1 = require("../../Core/Point");
 var SciChartDefaults_1 = require("./SciChartDefaults");
+var ChartTitleRenderer_1 = require("../Services/ChartTitleRenderer");
+var TextStyle_1 = require("../../types/TextStyle");
+var TextPosition_1 = require("../../types/TextPosition");
 exports.sciChartConfig = {};
-// To force the worker to be created before it is needed, so we know if it alive or not
-var t = TextureWorker_1.textureWorker;
 /**
  * @summary The {@link SciChartSurface} is the root 2D Chart control in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart Library}
@@ -170,6 +170,21 @@ var SciChartSurface = /** @class */ (function (_super) {
         /** Set true to position the watermark relative to the overall canvas, rather than the series area.   */
         _this.watermarkRelativeToCanvas = false;
         _this.animationList = [];
+        _this.titleStyleProperty = {
+            fontSize: 60,
+            fontFamily: "Arial",
+            color: SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.chartTitleColor,
+            fontWeight: "normal",
+            fontStyle: "normal",
+            lineSpacing: 1.1,
+            padding: Thickness_1.Thickness.fromString("10 4 10 4"),
+            multilineAlignment: TextPosition_1.EMultiLineAlignment.Center,
+            // rotation: 0,
+            alignment: TextStyle_1.ETextAlignment.Center,
+            position: TextStyle_1.ETitlePosition.Top,
+            placeWithinChart: false,
+            useNativeText: SciChartDefaults_1.SciChartDefaults.useNativeText
+        };
         _this.paddingProperty = Thickness_1.Thickness.fromNumber(10);
         _this.zoomStateProperty = ZoomState_1.EZoomState.AtExtents;
         _this.viewportBorderProperty = {
@@ -216,6 +231,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         _this.renderSurface = new RenderSurface_1.RenderSurface(webAssemblyContext, viewportSize, (_e = _this.domCanvas2D) === null || _e === void 0 ? void 0 : _e.id);
         _this.renderSurface.handleDraw = _this.onRenderSurfaceDraw;
         _this.sciChartRenderer = new SciChartRenderer_1.SciChartRenderer(_this);
+        _this.chartTitleRendererProperty = new ChartTitleRenderer_1.ChartTitleRenderer(_this.webAssemblyContext2D);
         _this.layoutManager = new LayoutManager_1.LayoutManager();
         // TODO: remove this
         if (_this.domCanvas2D) {
@@ -345,6 +361,9 @@ var SciChartSurface = /** @class */ (function (_super) {
     SciChartSurface.useWasmLocal = function () {
         SciChartSurface.configure(undefined);
     };
+    SciChartSurface.isSubSurface = function (surface) {
+        return surface.isSubSurface;
+    };
     SciChartSurface.createTest = function (divElement, options) {
         var _a, _b;
         var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
@@ -453,6 +472,22 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "chartTitleRenderer", {
+        /**
+         * Controls the rendering of {@link SiCharSurface.title}
+         */
+        get: function () {
+            return this.chartTitleRendererProperty;
+        },
+        set: function (value) {
+            var _a;
+            (_a = this.chartTitleRendererProperty) === null || _a === void 0 ? void 0 : _a.delete();
+            this.chartTitleRendererProperty = value;
+            this.invalidateElement();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartSurface.prototype, "dataLabelLayoutManager", {
         /**
          * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
@@ -470,6 +505,46 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "title", {
+        /**
+         * Gets or sets the title for the SciChartSurface
+         */
+        get: function () {
+            return this.titleProperty;
+        },
+        /**
+         * Gets or sets the title for the SciChartSurface
+         */
+        set: function (value) {
+            if (this.titleProperty !== value) {
+                this.titleProperty = value;
+                this.invalidateElement();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartSurface.prototype, "titleStyle", {
+        /**
+         * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+         */
+        get: function () {
+            return this.titleStyleProperty;
+        },
+        /**
+         * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
+         * @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
+         * instead of directly setting individual properties
+         */
+        set: function (value) {
+            if (this.titleStyleProperty !== value) {
+                this.titleStyleProperty = Object.assign({}, this.titleStyleProperty, value);
+                this.invalidateElement();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartSurface.prototype, "padding", {
         /**
          * Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left
@@ -552,6 +627,11 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @inheritDoc
      */
     SciChartSurface.prototype.applyTheme = function (themeProvider) {
+        // TODO move to base when title is implemented on 3d charts
+        var previousThemeProvider = this.previousThemeProvider;
+        if (this.titleStyle.color === previousThemeProvider.chartTitleColor) {
+            this.titleStyle = { color: themeProvider.chartTitleColor };
+        }
         _super.prototype.applyTheme.call(this, themeProvider);
         this.renderableSeries.asArray().forEach(function (rs) { return rs.applyTheme(themeProvider); });
         this.xAxes.asArray().forEach(function (axis) { return axis.applyTheme(themeProvider); });
@@ -586,7 +666,9 @@ var SciChartSurface = /** @class */ (function (_super) {
             var chart = _a[_i];
             chart.updateSubLayout();
         }
-        this.invalidateElement();
+        // Bypass the isSuspended check, otherwise the chart will go blank if it is resized while suspended
+        var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
+        this.renderSurface.invalidateElement(canvasId);
     };
     /**
      * @inheritDoc
@@ -604,6 +686,7 @@ var SciChartSurface = /** @class */ (function (_super) {
     // Step_5: Get context and pass drawing to SciChartRenderer
     SciChartSurface.prototype.doDrawingLoop = function (context) {
         context = context !== null && context !== void 0 ? context : this.renderSurface.getRenderContext();
+        this.currentWebGlRenderContextProperty = context;
         try {
             var sus = new UpdateSuspender_1.UpdateSuspender(this, false); // Don't want to invalidate on resume
             try {
@@ -640,6 +723,7 @@ var SciChartSurface = /** @class */ (function (_super) {
                 throw err;
             }
         }
+        this.currentWebGlRenderContextProperty = undefined;
     };
     /**
      * @inheritDoc
@@ -663,6 +747,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.watermarkProperties = (0, Deleter_1.deleteSafe)(this.watermarkProperties);
         this.watermarkPropertyPosition = (0, Deleter_1.deleteSafe)(this.watermarkPropertyPosition);
         this.chartModifiers.asArray().forEach(function (chm) { return chm.delete(); });
+        this.chartTitleRendererProperty = (0, Deleter_1.deleteSafe)(this.chartTitleRenderer);
         if (clearHtml && this.domChartRoot) {
             var style = this.domChartRoot.style;
             if (style) {
@@ -930,6 +1015,13 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "currentWebGlRenderContext", {
+        get: function () {
+            return this.currentWebGlRenderContextProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Is being called on each render, to run animations
      * @param timeElapsed
@@ -1092,6 +1184,8 @@ var SciChartSurface = /** @class */ (function (_super) {
         }
         var options = {
             id: this.id,
+            title: this.title,
+            titleStyle: this.titleStyle,
             canvasBorder: this.canvasBorder,
             heightAspect: this.heightAspect,
             widthAspect: this.widthAspect,
@@ -1144,6 +1238,12 @@ var SciChartSurface = /** @class */ (function (_super) {
         if (options === null || options === void 0 ? void 0 : options.autoColorMode) {
             this.autoColorMode = options.autoColorMode;
         }
+        if (options === null || options === void 0 ? void 0 : options.title) {
+            this.title = options.title;
+        }
+        if (options === null || options === void 0 ? void 0 : options.titleStyle) {
+            this.titleStyle = options.titleStyle;
+        }
     };
     /**
      * @inheritDoc
@@ -1610,7 +1710,9 @@ var SciChartSubSurface = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    SciChartSubSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) { };
+    SciChartSubSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) {
+        this.renderSurface.viewportSize = this.parentSurface.renderSurface.viewportSize;
+    };
     /**
      * Gets the sub-chart container
      */
@@ -1619,7 +1721,7 @@ var SciChartSubSurface = /** @class */ (function (_super) {
     };
     SciChartSubSurface.prototype.getSubChartRect = function () {
         var _a = this.renderSurface.viewportSize, width = _a.width, height = _a.height;
-        var _b = this.padding, top = _b.top, left = _b.left, bottom = _b.bottom, right = _b.right;
+        var _b = this.adjustedPadding, top = _b.top, left = _b.left, bottom = _b.bottom, right = _b.right;
         return new Rect_1.Rect(left, top, width - left - right, height - top - bottom);
     };
     /**

package/Charting/Visuals/TextureManager/DpiHelper.js

@@ -122,7 +122,7 @@ var DpiHelper = /** @class */ (function () {
         if (dpiScale === void 0) { dpiScale = DpiHelper.PIXEL_RATIO; }
         var dpiAdjusted = __assign({}, gridLineStyle);
         var roundedStrokeThickness = Math.round(gridLineStyle.strokeThickness * dpiScale);
-        dpiAdjusted.strokeDashArray = (_a = gridLineStyle.strokeDashArray) === null || _a === void 0 ? void 0 : _a.map(function (sd) { return sd * dpiScale; });
+        dpiAdjusted.strokeDashArray = (_a = gridLineStyle.strokeDashArray) === null || _a === void 0 ? void 0 : _a.map(function (sd) { return Math.round(sd * dpiScale); });
         dpiAdjusted.strokeThickness =
             roundedStrokeThickness > 0 || gridLineStyle.strokeThickness === 0 ? roundedStrokeThickness : 1;
         return dpiAdjusted;

package/Charting/Visuals/TextureManager/TextureManager.js

@@ -75,12 +75,17 @@ var TextureManager = /** @class */ (function () {
      * @returns
      */
     TextureManager.prototype.createTextTexture = function (text, textStyle, rotation, lineSpacing, backgroundColor, opacity) {
+        var _a;
         if (app_1.IS_TEST_ENV) {
             return { bitmapTexture: undefined, textureWidth: 1, textureHeight: 1 };
         }
         var fontStyle = textStyle.fontStyle, fontWeight = textStyle.fontWeight, fontFamily = textStyle.fontFamily, fontSizePx = textStyle.fontSize, padding = textStyle.padding, alignment = textStyle.alignment, color = textStyle.color;
+        // Save state
+        this.ctx.save();
         this.ctx.globalAlpha = opacity !== null && opacity !== void 0 ? opacity : 1;
-        this.ctx.textBaseline = "top";
+        this.ctx.textBaseline = "alphabetic";
+        // Switched this back to alphabetic because...reasons
+        // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textbaseline-alphabetic
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         if (backgroundColor) {
             this.ctx.fillStyle = backgroundColor;
@@ -90,51 +95,61 @@ var TextureManager = /** @class */ (function () {
         this.ctx.font = (0, font_1.getFontString)(fontStyle, fontWeight, fontSizePx, fontFamily);
         var textureWidth = 0;
         // const fontSizePt = Math.ceil(fontSizePx * PX_TO_PT);
-        var lineHeight = (0, exports.measureTextHeight)(fontSizePx);
-        var extraLineHeight = lineHeight * (lineSpacing !== null && lineSpacing !== void 0 ? lineSpacing : 1.1);
-        var textureHeight = lineHeight + padding.top + padding.bottom;
+        var textureHeight = padding.top + padding.bottom;
+        var maxLineHeight = 0;
+        var firstLineOffset = 0;
+        var lineHeights = [];
         for (var index = 0; index < text.length; index++) {
             var line = text[index];
-            var lineWidth = (0, exports.measureTextWidth)(this.ctx, line) + padding.left + padding.right;
+            var textMeasure = this.ctx.measureText(line);
+            var lineHeight = Math.round(textMeasure.actualBoundingBoxAscent + textMeasure.actualBoundingBoxDescent);
+            lineHeights.push(lineHeight);
+            if (lineHeight > maxLineHeight) {
+                maxLineHeight = lineHeight;
+            }
+            if (index === 0) {
+                firstLineOffset = textMeasure.actualBoundingBoxAscent;
+            }
+            var lineWidth = Math.round(textMeasure.width + padding.left + padding.right);
             if (lineWidth > textureWidth) {
                 textureWidth = lineWidth;
             }
-            if (index > 0) {
-                textureHeight += extraLineHeight;
-            }
+            textureHeight += lineHeight;
         }
-        var y = padding.top;
+        var lineSpacingPixels = Math.round(maxLineHeight * ((lineSpacing !== null && lineSpacing !== void 0 ? lineSpacing : 1.1) - 1));
+        textureHeight += (text.length - 1) * lineSpacingPixels;
+        var y = padding.top + firstLineOffset;
         var x = padding.left;
         if (!textureWidth || !textureHeight) {
             return { bitmapTexture: undefined, textureWidth: textureWidth, textureHeight: textureHeight };
         }
         var newTextureWidth = textureWidth;
         var newTextureHeight = textureHeight;
-        // Save state
-        this.ctx.save();
         if (rotation) {
             // convert to radians
             var rotationRad = (rotation * Math.PI) / 180;
             // We need to Math.ceil to fix rotation for WebGL1
-            newTextureWidth = Math.ceil(textureWidth * Math.abs(Math.cos(rotationRad)) + textureHeight * Math.abs(Math.sin(rotationRad)));
-            newTextureHeight = Math.ceil(textureWidth * Math.abs(Math.sin(rotationRad)) + textureHeight * Math.abs(Math.cos(rotationRad)));
+            newTextureWidth = Math.round(textureWidth * Math.abs(Math.cos(rotationRad)) + textureHeight * Math.abs(Math.sin(rotationRad)));
+            newTextureHeight = Math.round(textureWidth * Math.abs(Math.sin(rotationRad)) + textureHeight * Math.abs(Math.cos(rotationRad)));
             // translate to the center of rectangle
             this.ctx.translate(newTextureWidth / 2, newTextureHeight / 2);
             this.ctx.rotate(rotationRad);
             // translate to the new origin that is located in the left top center of the texture
             this.ctx.translate(-textureWidth / 2, -textureHeight / 2);
         }
-        for (var _i = 0, text_1 = text; _i < text_1.length; _i++) {
-            var line = text_1[_i];
-            if (alignment === LabelAlignment_1.ELabelAlignment.Center || alignment === LabelAlignment_1.ELabelAlignment.Right) {
+        var multilineAlignment = (_a = textStyle.multilineAlignment) !== null && _a !== void 0 ? _a : alignment;
+        var maxLineTextWidth = textureWidth - padding.right - padding.left;
+        for (var index = 0; index < text.length; index++) {
+            var line = text[index];
+            if (multilineAlignment === LabelAlignment_1.ELabelAlignment.Center || multilineAlignment === LabelAlignment_1.ELabelAlignment.Right) {
                 var lineWidth = (0, exports.measureTextWidth)(this.ctx, line);
                 x =
-                    alignment === LabelAlignment_1.ELabelAlignment.Right
+                    multilineAlignment === LabelAlignment_1.ELabelAlignment.Right
                         ? textureWidth - lineWidth - padding.right
-                        : (textureWidth - lineWidth) / 2;
+                        : (maxLineTextWidth - lineWidth) / 2 + padding.left;
             }
             this.ctx.fillText(line, Math.round(x), Math.round(y));
-            y += extraLineHeight;
+            y += lineHeights[index] + lineSpacingPixels;
         }
         this.ctx.strokeStyle = color;
         this.ctx.restore();

package/Charting3D/Visuals/SciChart3DSurface.js

@@ -512,7 +512,9 @@ var SciChart3DSurface = /** @class */ (function (_super) {
         this.webAssemblyContext3D.SCRT3DSetClearColor(0, 0, 0, 0);
     };
     SciChart3DSurface.prototype.detachSeries = function (renderableSeries) {
-        this.rootEntity.children.remove(renderableSeries.sceneEntity);
+        if (this.rootEntity) {
+            this.rootEntity.children.remove(renderableSeries.sceneEntity);
+        }
         renderableSeries.onDetach();
         this.invalidateElement();
     };
@@ -521,7 +523,9 @@ var SciChart3DSurface = /** @class */ (function (_super) {
         if (!renderableSeries.sceneEntity) {
             throw new Error("IRenderableSeries3D.sceneEntity must be set before attaching to SciChart3DSurface");
         }
-        this.rootEntity.children.add(renderableSeries.sceneEntity);
+        if (this.rootEntity) {
+            this.rootEntity.children.add(renderableSeries.sceneEntity);
+        }
         this.invalidateElement();
     };
     SciChart3DSurface.prototype.detachAxis = function (axis) {

package/Core/BuildStamp.d.ts

@@ -1,4 +1,4 @@
 import { TSciChart } from "../types/TSciChart";
 import { TSciChart3D } from "../types/TSciChart3D";
-export declare const libraryVersion = "3.0.317";
+export declare const libraryVersion = "3.1.333";
 export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;

package/Core/BuildStamp.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkBuildStamp = exports.libraryVersion = void 0;
-var buildStamp = "2023-03-16T00:00:00";
+var buildStamp = "2023-04-19T00:00:00";
 var result;
 // tslint:disable-next-line:no-var-requires
-exports.libraryVersion = "3.0.317";
+exports.libraryVersion = "3.1.333";
 var checkBuildStamp = function (wasmContext) {
     if (result !== undefined)
         return result;