scichart 3.3.560 → 3.3.567

package/Builder/buildSurface.d.ts

@@ -34,7 +34,7 @@ export interface ISciChart2DDefinition {
      * A function, or name of a registered OnCreated function that will be run after the chart is built,
      * receiving the sciChartSurface as a parameter
      */
-    onCreated?: ((surface: SciChartSurface) => void) | string;
+    onCreated?: ((surface: SciChartSurface) => Promise<void>) | string;
     /**
      * Subcharts to be added to this surface
      */

package/Builder/buildSurface.js

@@ -70,6 +70,7 @@ var buildSeries_1 = require("./buildSeries");
 var chartBuilder_1 = require("./chartBuilder");
 var classFactory_1 = require("./classFactory");
 var ThemeProviderType_1 = require("../types/ThemeProviderType");
+var perfomance_1 = require("../utils/perfomance");
 // register themes
 (0, classFactory_1.registerType)(BaseType_1.EBaseType.ThemeProvider, ThemeProviderType_1.EThemeProviderType.Light, function () { return new SciChartJSLightTheme_1.SciChartJSLightTheme(); }, true);
 (0, classFactory_1.registerType)(BaseType_1.EBaseType.ThemeProvider, ThemeProviderType_1.EThemeProviderType.DarkV2, function () { return new SciChartJSDarkv2Theme_1.SciChartJSDarkv2Theme(); }, true);
@@ -102,9 +103,10 @@ var ThemeProviderType_1 = require("../types/ThemeProviderType");
  * @param definition the {@link ISciChart2DDefinition}
  */
 var build2DChart = function (divElementId, definition) { return __awaiter(void 0, void 0, void 0, function () {
-    var wasmChart, wasmContext, sciChartSurface;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var wasmChart, wasmContext, sciChartSurface, mark;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
                 if (typeof definition === "string") {
                     definition = JSON.parse(definition, chartBuilder_1.chartReviver);
@@ -112,24 +114,35 @@ var build2DChart = function (divElementId, definition) { return __awaiter(void 0
                 if (!(definition === null || definition === void 0 ? void 0 : definition.createSingle)) return [3 /*break*/, 2];
                 return [4 /*yield*/, SciChartSurface_1.SciChartSurface.createSingle(divElementId, definition === null || definition === void 0 ? void 0 : definition.surface)];
             case 1:
-                wasmChart = _a.sent();
+                wasmChart = _b.sent();
                 return [3 /*break*/, 4];
             case 2: return [4 /*yield*/, SciChartSurface_1.SciChartSurface.create(divElementId, definition === null || definition === void 0 ? void 0 : definition.surface)];
             case 3:
-                wasmChart = _a.sent();
-                _a.label = 4;
+                wasmChart = _b.sent();
+                _b.label = 4;
             case 4:
                 wasmContext = wasmChart.wasmContext, sciChartSurface = wasmChart.sciChartSurface;
+                mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.SetupStart, { contextId: sciChartSurface.id });
                 configure2DSurface(definition, sciChartSurface, wasmContext);
-                if (definition.onCreated) {
-                    if (typeof definition.onCreated === "string") {
-                        sciChartSurface.onCreatedName = definition.onCreated;
-                        // @ts-ignore
-                        definition.onCreated = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OnCreateFunction, definition.onCreated);
-                    }
-                    // @ts-ignore
-                    definition.onCreated(sciChartSurface);
+                if (!definition.onCreated) return [3 /*break*/, 6];
+                if (typeof definition.onCreated === "string") {
+                    sciChartSurface.onCreatedName = definition.onCreated;
+                    definition.onCreated = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OnCreateFunction, definition.onCreated);
                 }
+                return [4 /*yield*/, definition.onCreated(sciChartSurface)];
+            case 5:
+                _b.sent();
+                _b.label = 6;
+            case 6:
+                // TODO consider if this makes sense:
+                // if suspended, allows to execute onCreated before doing actual rendering
+                // if (definition.surface?.createSuspended ?? SciChartDefaults.createSuspended) {
+                //     sciChartSurface.resume();
+                // }
+                perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.SetupEnd, {
+                    contextId: sciChartSurface.id,
+                    relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
+                });
                 return [2 /*return*/, { wasmContext: wasmContext, sciChartSurface: sciChartSurface }];
         }
     });

package/Charting/ChartModifiers/CursorModifier.js

@@ -253,6 +253,9 @@ var CursorModifier = /** @class */ (function (_super) {
      * @inheritDoc
      */
     CursorModifier.prototype.modifierMouseMove = function (args) {
+        // If this is on a subchart, only respond to events from the active subchart
+        if (this.parentSurface.isSubSurface && !args.isActiveSubChartEvent)
+            return;
         this.activePointerEvents.set(args.pointerId, args);
         _super.prototype.modifierMouseMove.call(this, args);
         var translatedMousePoint;

package/Charting/ChartModifiers/RolloverModifier.js

@@ -275,6 +275,9 @@ var RolloverModifier = /** @class */ (function (_super) {
      * @inheritDoc
      */
     RolloverModifier.prototype.modifierMouseMove = function (args) {
+        // If this is on a subchart, only respond to events from the active subchart
+        if (this.parentSurface.isSubSurface && !args.isActiveSubChartEvent)
+            return;
         this.activePointerEvents.set(args.pointerId, args);
         _super.prototype.modifierMouseMove.call(this, args);
         var translatedMousePoint;

package/Charting/Model/XyDataSeries.js

@@ -19,6 +19,7 @@ exports.XyDataSeries = void 0;
 var Guard_1 = require("../../Core/Guard");
 var NumberArray_1 = require("../../types/NumberArray");
 var appendDoubleVectorFromJsArray_1 = require("../../utils/ccall/appendDoubleVectorFromJsArray");
+var perfomance_1 = require("../../utils/perfomance");
 var BaseDataSeries_1 = require("./BaseDataSeries");
 var IDataSeries_1 = require("./IDataSeries");
 /**
@@ -103,7 +104,9 @@ var XyDataSeries = /** @class */ (function (_super) {
      * @param metadata The array of point metadata
      */
     XyDataSeries.prototype.appendRange = function (xValues, yValues, metadata) {
+        var _a;
         if (!this.getIsDeleted()) {
+            var startMark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DataUpdateStart, { contextId: this.id });
             Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
             Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
             Guard_1.Guard.arraysSameLength(xValues, "xValues", yValues, "yValues");
@@ -121,6 +124,10 @@ var XyDataSeries = /** @class */ (function (_super) {
             this.doubleVectorProvider.appendArray(this.webAssemblyContext, nativeX, xValues);
             this.doubleVectorProvider.appendArray(this.webAssemblyContext, nativeY, yValues);
             this.notifyDataChanged(IDataSeries_1.EDataChangeType.Append, null, xValues.length);
+            perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DataUpdateEnd, {
+                relatedId: (_a = startMark === null || startMark === void 0 ? void 0 : startMark.detail) === null || _a === void 0 ? void 0 : _a.relatedId,
+                contextId: this.id
+            });
         }
     };
     /**

package/Charting/Services/SciChartRenderer.d.ts

@@ -16,6 +16,7 @@ export declare class SciChartRenderer {
      */
     static resampleSeries(xAxis: AxisBase2D, rs: IRenderableSeries, seriesViewRect: Rect): TSeriesRenderPassInfo;
     private static calculateResamplingHash;
+    isInvalidated: boolean;
     private sciChartSurface;
     private previousTime;
     private prevRect;

package/Charting/Services/SciChartRenderer.js

@@ -30,6 +30,8 @@ var WatermarkPosition_1 = require("../../types/WatermarkPosition");
 var NativeObject_1 = require("../Visuals/Helpers/NativeObject");
 var createNativeRect_1 = require("../Visuals/Helpers/createNativeRect");
 var parseColor_1 = require("../../utils/parseColor");
+var logger_1 = require("../../utils/logger");
+var perfomance_1 = require("../../utils/perfomance");
 /**
  * A class used internally in SciChart to perform layout, arrangement, data-preparation and rendering on the Cartesian 2D {@link SciChartSurface}
  */
@@ -39,6 +41,7 @@ var SciChartRenderer = /** @class */ (function () {
      * @param sciChartSurface The {@link SciChartSurface} that we are rendering
      */
     function SciChartRenderer(sciChartSurface) {
+        this.isInvalidated = false;
         this.sciChartSurface = sciChartSurface;
     }
     /**
@@ -107,10 +110,15 @@ var SciChartRenderer = /** @class */ (function () {
      */
     SciChartRenderer.prototype.render = function (renderContext) {
         var _this = this;
+        var _a;
         if (this.sciChartSurface.isDeleted) {
             return;
         }
-        //console.log("render start");
+        var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.RenderStart, {
+            contextId: this.sciChartSurface.id
+        });
+        logger_1.Logger.debug("render start");
+        this.isInvalidated = false;
         var nativeContext = renderContext.getNativeContext();
         var wasmContext = this.sciChartSurface.webAssemblyContext2D;
         var oldBlendMode;
@@ -140,7 +148,7 @@ var SciChartRenderer = /** @class */ (function () {
         this.layoutTitle(seriesViewRect);
         this.scheduleTitleDraw(renderContext);
         // Step 4 prepare render data
-        var _a = this.prepareAxesRenderData(), xAxesById = _a.xAxesById, yAxesById = _a.yAxesById;
+        var _b = this.prepareAxesRenderData(), xAxesById = _b.xAxesById, yAxesById = _b.yAxesById;
         var renderPassInfo = this.prepareSeriesRenderData(seriesViewRect, xAxesById);
         // Draw seriesViewRect border
         renderContext.enqueueLayeredDraw(function () {
@@ -198,6 +206,10 @@ var SciChartRenderer = /** @class */ (function () {
         else if (renderContext.doDraw) {
             this.updateWatermark(renderContext, this.sciChartSurface.parentSurface.seriesViewRect);
         }
+        perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.RenderEnd, {
+            contextId: this.sciChartSurface.id,
+            relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
+        });
         // Step 10 Call OnParentSurfaceRendered
         this.onParentSurfaceRendered();
         if (!app_1.IS_TEST_ENV) {
@@ -207,6 +219,7 @@ var SciChartRenderer = /** @class */ (function () {
         if (this.sciChartSurface.isRunningAnimation) {
             setTimeout(this.sciChartSurface.invalidateElement, 0);
         }
+        logger_1.Logger.debug("render end");
     };
     SciChartRenderer.prototype.drawRenderContextAnnotations = function (annotations, xAxisById, yAxisById, annotationLayer, renderContext, seriesViewRect) {
         annotations
@@ -445,7 +458,10 @@ var SciChartRenderer = /** @class */ (function () {
                 cm.onParentSurfaceRendered();
             });
         });
-        this.sciChartSurface.rendered.raiseEvent();
+        // TODO add another event handler for multichart
+        if (!this.sciChartSurface.isCopyCanvasSurface || this.sciChartSurface.isSubSurface) {
+            this.sciChartSurface.rendered.raiseEvent(this.isInvalidated);
+        }
     };
     SciChartRenderer.prototype.updateWatermark = function (renderContext, seriesViewRect) {
         var chartHeight = this.sciChartSurface.isCopyCanvasSurface

package/Charting/Visuals/I2DSurfaceOptions.d.ts

@@ -39,6 +39,11 @@ export interface I2DSurfaceOptions extends ISurfaceOptionsBase {
      * The title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
      */
     titleStyle?: TChartTitleStyle;
+    /**
+     * @experimental
+     *  Optional - enabling prevents chart rendering until {@link SciChartSurface.resume} is called on the surface instance
+     */
+    createSuspended?: boolean;
 }
 export interface I2DSubSurfaceOptions extends I2DSurfaceOptions {
     /**

package/Charting/Visuals/RenderableSeries/DrawingProviders/BaseSeriesDrawingProvider.js

@@ -124,8 +124,9 @@ var BaseSeriesDrawingProvider = /** @class */ (function (_super) {
             }
             this.palettingState.palettedColors.clear();
             this.palettingState.palettedColors.reserve(count);
+            var hasPSIndexes = pointSeries && pointSeries.indexes.size() > 0;
             for (var index = startIndex; index < startIndex + count; index++) {
-                var originalDataIndex = pointSeries ? pointSeries.indexes.get(index) : index;
+                var originalDataIndex = hasPSIndexes ? pointSeries.indexes.get(index) : index;
                 if (originalDataIndex < 0)
                     originalDataIndex = 0;
                 else if (originalDataIndex >= dataSeries.count())
@@ -222,8 +223,9 @@ var BaseSeriesDrawingProvider = /** @class */ (function (_super) {
             }
             // Override stroke and fill colors
             var hashCode = 0;
+            var hasPSIndexes = pointSeries && pointSeries.indexes.size() > 0;
             for (var index = startIndex; index < startIndex + count; index++) {
-                var originalDataIndex = pointSeries ? pointSeries.indexes.get(index) : index;
+                var originalDataIndex = hasPSIndexes ? pointSeries.indexes.get(index) : index;
                 if (originalDataIndex < 0)
                     originalDataIndex = 0;
                 else if (originalDataIndex >= dataSeries.count())

package/Charting/Visuals/SciChartDefaults.d.ts

@@ -40,4 +40,9 @@ export declare class SciChartDefaults {
      * Do not set lower than 1024kb or higher than 32MB (1024 x 32). Values outside this range will be clamped
      */
     static wasmBufferSizesKb: number;
+    /**
+     * Defines if newly created charts should be rendered as soon as possible after initialization.
+     * Setting to `true` will require surfaces to be "resumed" in order to perform actual rendering.
+     */
+    static createSuspended: boolean;
 }

package/Charting/Visuals/SciChartDefaults.js

@@ -45,6 +45,11 @@ var SciChartDefaults = /** @class */ (function () {
      * Do not set lower than 1024kb or higher than 32MB (1024 x 32). Values outside this range will be clamped
      */
     SciChartDefaults.wasmBufferSizesKb = 1024 * 8;
+    /**
+     * Defines if newly created charts should be rendered as soon as possible after initialization.
+     * Setting to `true` will require surfaces to be "resumed" in order to perform actual rendering.
+     */
+    SciChartDefaults.createSuspended = false;
     return SciChartDefaults;
 }());
 exports.SciChartDefaults = SciChartDefaults;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.d.ts

@@ -82,7 +82,7 @@ export declare class SciChartPieSurface extends DeletableEntity implements ISciC
      * An event handler which notifies its subscribers when a render operation has finished. Use this
      * to time render performance, or to update elements of the chart or your UI on redraw.
      */
-    rendered: EventHandler<void>;
+    rendered: EventHandler<boolean>;
     protected widthAspect: number;
     protected heightAspect: number;
     protected labelProviderProperty: PieLabelProvider;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -55,6 +55,7 @@ var PieLabelProvider_1 = require("../Axis/LabelProvider/PieLabelProvider");
 var SciChartPieLegend_1 = require("../Legend/SciChartPieLegend");
 var sciChartInitCommon_1 = require("../sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
+var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var constants_1 = require("./constants");
 var constants_2 = require("./PieSegment/constants");
 /** @ignore */
@@ -136,10 +137,12 @@ var SciChartPieSurface = /** @class */ (function (_super) {
         _this.domSvgContainer = canvases.domSvgContainer;
         _this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
         _this.domDivContainer = canvases.domDivContainer;
-        var width = _this.domCanvas2D.width;
-        var height = _this.domCanvas2D.height;
+        var width = _this.domCanvas2D.width / DpiHelper_1.DpiHelper.PIXEL_RATIO;
+        var height = _this.domCanvas2D.height / DpiHelper_1.DpiHelper.PIXEL_RATIO;
         _this.viewRect = new Rect_1.Rect(0, 0, width, height);
-        _this.resizeSubscriptionToken = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, _this);
+        _this.resizeSubscriptionToken = sciChartInitCommon_1.default.subscribeToResize(
+        // @ts-ignore
+        canvases.domCanvas2D, canvases.aspect, _this);
         _this.drawChart = _this.drawChart.bind(_this);
         _this.deleteInternals = _this.deleteInternals.bind(_this);
         _this.invalidateElement = _this.invalidateElement.bind(_this);

package/Charting/Visuals/SciChartSurface.d.ts

@@ -16,6 +16,7 @@ import { IChartModifierBase } from "../ChartModifiers/ChartModifierBase";
 import { RenderSurface } from "../Drawing/RenderSurface";
 import { WebGlRenderContext2D } from "../Drawing/WebGlRenderContext2D";
 import { LayoutManager } from "../LayoutManager/LayoutManager";
+import { SciChartRenderer } from "../Services/SciChartRenderer";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { ECoordinateMode } from "./Annotations/AnnotationBase";
 import { AxisBase2D } from "./Axis/AxisBase2D";
@@ -199,13 +200,13 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     watermarkPosition: EWatermarkPosition;
     /** Set true to position the watermark relative to the overall canvas, rather than the series area.   */
     watermarkRelativeToCanvas: boolean;
+    sciChartRenderer: SciChartRenderer;
     protected animationList: IGenericAnimation[];
     protected titleProperty: string | string[];
     protected titleStyleProperty: Readonly<Required<TChartTitleStyle>>;
     protected chartTitleRendererProperty: IChartTitleRenderer;
     protected paddingProperty: Thickness;
     protected currentWebGlRenderContextProperty: WebGlRenderContext2D;
-    private sciChartRenderer;
     private layoutManagerProperty;
     private dataLabelLayoutManagerProperty;
     private zoomStateProperty;
@@ -326,6 +327,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Gets or sets the {@link EAutoColorMode} which determines when resolution of AUTO_COLOR should occur
      */
     set autoColorMode(autoColorMode: EAutoColorMode);
+    get isInvalidated(): boolean;
     /**
      * @inheritDoc
      */
@@ -337,7 +339,9 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /**
      * @inheritDoc
      */
-    invalidateElement(): void;
+    invalidateElement(options?: {
+        force?: boolean;
+    }): void;
     doDrawingLoop(context?: WebGlRenderContext2D): void;
     /**
      * @inheritDoc
@@ -499,6 +503,14 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * @param excludeData if set true, data values will not be included in the json.
      */
     toJSON(excludeData?: boolean): ISciChart2DDefinition;
+    /**
+     * Triggers the rerendering of the surface and after the chart rerendering is completed,
+     * returns its serialized state retrieved with {@link SciChartSurface.toJSON}.
+     *
+     * @param excludeData - if set true, data values will not be included in the json.
+     * @returns JSON-like object {@link ISciChart2DDefinition}
+     */
+    getNextState(excludeData?: boolean): Promise<ISciChart2DDefinition>;
     protected applyOptions(options: I2DSurfaceOptions): void;
     /**
      * @inheritDoc

package/Charting/Visuals/SciChartSurface.js

@@ -114,6 +114,8 @@ var TextPosition_1 = require("../../types/TextPosition");
 var Globals_1 = require("../../Core/Globals");
 var createMaster3d_1 = require("../../Charting3D/Visuals/createMaster3d");
 var LayoutMangerType_1 = require("../../types/LayoutMangerType");
+var logger_1 = require("../../utils/logger");
+var perfomance_1 = require("../../utils/perfomance");
 exports.sciChartConfig = {};
 /**
  * @summary The {@link SciChartSurface} is the root 2D Chart control in SciChart's High Performance Real-time
@@ -283,6 +285,7 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @param options Optional - Optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
     SciChartSurface.create = function (divElement, options) {
+        var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationStart, { contextId: options === null || options === void 0 ? void 0 : options.id });
         (0, chartBuilder_1.ensureRegistrations)();
         options = SciChartSurface.resolveOptions(options);
         if (app_1.IS_TEST_ENV) {
@@ -290,7 +293,12 @@ var SciChartSurface = /** @class */ (function (_super) {
         }
         else {
             return (0, createMaster_1.createMultichart)(divElement, options).then(function (result) {
+                var _a;
                 result.sciChartSurface.applyOptions(options);
+                perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationEnd, {
+                    contextId: result.sciChartSurface.id,
+                    relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
+                });
                 return result;
             });
         }
@@ -310,6 +318,7 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @param options - optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
     SciChartSurface.createSingle = function (divElement, options) {
+        var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationStart, { contextId: options === null || options === void 0 ? void 0 : options.id });
         (0, chartBuilder_1.ensureRegistrations)();
         options = SciChartSurface.resolveOptions(options);
         if (app_1.IS_TEST_ENV) {
@@ -317,7 +326,12 @@ var SciChartSurface = /** @class */ (function (_super) {
         }
         else {
             return (0, createSingle_1.createSingleInternal)(divElement, options).then(function (result) {
+                var _a;
                 result.sciChartSurface.applyOptions(options);
+                perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationEnd, {
+                    contextId: result.sciChartSurface.id,
+                    relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
+                });
                 return result;
             });
         }
@@ -434,6 +448,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         subSurface.mouseManager.unsubscribe();
         this.subChartsProperty.push(subSurface);
         this.onAttachSubSurface(subSurface);
+        subSurface.setIsInitialized();
         return subSurface;
     };
     /**
@@ -635,6 +650,14 @@ var SciChartSurface = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartSurface.prototype, "isInvalidated", {
+        get: function () {
+            var _a;
+            return (_a = this.sciChartRenderer) === null || _a === void 0 ? void 0 : _a.isInvalidated;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -653,6 +676,7 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @inheritDoc
      */
     SciChartSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) {
+        logger_1.Logger.debug("changeViewportSize");
         if (!pixelWidth || !pixelHeight || this.isDeleted) {
             return;
         }
@@ -679,18 +703,22 @@ var SciChartSurface = /** @class */ (function (_super) {
             chart.updateSubLayout();
         }
         // 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);
+        this.invalidateElement({ force: true });
     };
     /**
      * @inheritDoc
      */
-    SciChartSurface.prototype.invalidateElement = function () {
+    SciChartSurface.prototype.invalidateElement = function (options) {
+        var _a, _b;
+        logger_1.Logger.debug("Invalidating ".concat((_b = (_a = this.domChartRoot) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.id, ": force=").concat(options === null || options === void 0 ? void 0 : options.force, " isSuspended=").concat(this.isSuspended, " isInitialized=").concat(this.isInitialized, "."));
         // When isSuspended (see suspendUpdates() function) ignore drawing
-        if (this.isSuspended || this.isDeleted) {
-            // Logger.log("SciChartSurface.isSuspended = true. Ignoring invalidateElement() call");
+        if (!(options === null || options === void 0 ? void 0 : options.force) && (this.isSuspended || this.isDeleted || !this.isInitialized)) {
             return;
         }
+        perfomance_1.PerformanceDebugHelper.mark(this.sciChartRenderer.isInvalidated
+            ? perfomance_1.EPerformanceMarkType.Invalidate
+            : perfomance_1.EPerformanceMarkType.LeadingInvalidate, { contextId: this.id });
+        this.sciChartRenderer.isInvalidated = true;
         // console.trace("Invalidating ", this.domChartRoot.id);
         var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
         this.renderSurface.invalidateElement(canvasId);
@@ -722,6 +750,7 @@ var SciChartSurface = /** @class */ (function (_super) {
             }
             finally {
                 sus.resume();
+                sus.delete();
             }
             this.sciChartRenderer.render(context);
         }
@@ -786,6 +815,8 @@ var SciChartSurface = /** @class */ (function (_super) {
      */
     SciChartSurface.prototype.onDpiChanged = function (args) {
         var _a, _b;
+        perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DpiChange, { contextId: this.id });
+        logger_1.Logger.debug("onDpiChanged");
         this.renderableSeries.asArray().forEach(function (rs) { return rs.onDpiChanged(args); });
         this.xAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
         this.yAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
@@ -1212,6 +1243,7 @@ var SciChartSurface = /** @class */ (function (_super) {
             loader: this.loaderJson,
             drawSeriesBehindAxis: this.drawSeriesBehindAxis,
             disableAspect: this.disableAspect,
+            createSuspended: this.createSuspended,
             autoColorMode: this.autoColorMode,
             touchAction: this.touchActionProperty
         };
@@ -1228,6 +1260,26 @@ var SciChartSurface = /** @class */ (function (_super) {
         };
         return definition;
     };
+    /**
+     * Triggers the rerendering of the surface and after the chart rerendering is completed,
+     * returns its serialized state retrieved with {@link SciChartSurface.toJSON}.
+     *
+     * @param excludeData - if set true, data values will not be included in the json.
+     * @returns JSON-like object {@link ISciChart2DDefinition}
+     */
+    SciChartSurface.prototype.getNextState = function (excludeData) {
+        if (excludeData === void 0) { excludeData = false; }
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.nextStateRender({ resumeBefore: true, invalidateOnResume: true, suspendAfter: true })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, this.toJSON(excludeData)];
+                }
+            });
+        });
+    };
     SciChartSurface.prototype.applyOptions = function (options) {
         _super.prototype.applyOptions.call(this, options);
         if (options === null || options === void 0 ? void 0 : options.layoutManager) {

package/Charting/Visuals/SciChartSurfaceBase.d.ts

@@ -18,7 +18,7 @@ import { IAnnotation } from "./Annotations/IAnnotation";
 import { AxisCore } from "./Axis/AxisCore";
 import { ISciChartLoader } from "./loader";
 import { INotifyOnDpiChanged, TDpiChangedEventArgs } from "./TextureManager/DpiHelper";
-import { ISuspendable, IUpdateSuspender } from "./UpdateSuspender";
+import { ISuspendable, IUpdateSuspender, UpdateSuspender } from "./UpdateSuspender";
 export declare type TSciChartDestination = {
     canvasElementId: string;
     width: number;
@@ -110,7 +110,7 @@ export interface ISciChartSurfaceBase extends IDeletable, IThemeable {
      * An event handler which notifies its subscribers when a render operation has finished. Use this
      * to time render performance, or to update elements of the chart or your UI on redraw.
      */
-    rendered: EventHandler<void>;
+    rendered: EventHandler<boolean>;
 }
 /**
  * Enum constants to specify SciChartSurface type
@@ -257,11 +257,12 @@ export declare abstract class SciChartSurfaceBase extends DeletableEntity implem
      */
     readonly modifierAnnotations: ObservableArray<IAnnotation>;
     adornerLayer: AdornerLayer;
+    abstract isInvalidated: boolean;
     /**
      * An event handler which notifies its subscribers when a render operation has finished. Use this
      * to time render performance, or to update elements of the chart or your UI on redraw.
      */
-    rendered: EventHandler<void>;
+    rendered: EventHandler<boolean>;
     protected destinations: TSciChartDestination[];
     protected themeProviderProperty: IThemeProvider;
     protected previousThemeProviderProperty: IThemeProvider;
@@ -274,6 +275,8 @@ export declare abstract class SciChartSurfaceBase extends DeletableEntity implem
     protected heightAspect: number;
     protected disableAspect: boolean;
     protected loaderJson: any;
+    protected suspender: UpdateSuspender;
+    protected createSuspended: boolean;
     private sharedWasmContext;
     private readonly suspendableIdProperty;
     private seriesViewRectProperty;
@@ -343,6 +346,7 @@ export declare abstract class SciChartSurfaceBase extends DeletableEntity implem
      * @inheritDoc
      */
     resumeUpdates(suspender: IUpdateSuspender): void;
+    resume(): void;
     /**
      * @inheritDoc
      */
@@ -408,7 +412,20 @@ export declare abstract class SciChartSurfaceBase extends DeletableEntity implem
      * @inheritDoc
      */
     onDpiChanged(args: TDpiChangedEventArgs): void;
+    /**
+     * Creates a promise which resolves when the chart is updated to the next fully rendered state
+     *
+     * @remarks
+     * If the surface is initialized with `createSingle` the promise resolves after the main `render` function is executed.
+     * Otherwise, if it is initialized with `create` - the promise resolves after image data is copied to the 2D canvas.
+     */
+    nextStateRender(options?: {
+        resumeBefore?: boolean;
+        suspendAfter?: boolean;
+        invalidateOnResume?: boolean;
+    }): Promise<unknown>;
     get chartModifierGroups(): string[];
+    protected enableRenderListener(): void;
     protected clearRootElement(clearHtml: boolean): void;
     protected applyOptions(options: ISurfaceOptionsBase): void;
     /**
@@ -451,7 +468,5 @@ export declare const createChartDestination: (canvas: HTMLCanvasElement) => {
 };
 /** @ignore */
 export declare const getMasterCanvas: () => HTMLCanvasElement;
-export declare type TGetDestinationFn = (destinationId: string) => TSciChartDestination;
-export declare const copyToCanvas: (sourceCanvas: HTMLCanvasElement, getDestinationById: TGetDestinationFn) => (destinationId: string) => void;
 /** @ignore */
 export declare const getLocateFile: (sciChartConfig: TSciChartConfig) => (path: string, prefix: string) => string;