scichart 3.3.560 → 3.3.567

package/Charting/Visuals/SciChartSurfaceBase.js

@@ -14,8 +14,44 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLocateFile = exports.copyToCanvas = exports.getMasterCanvas = exports.createChartDestination = exports.SciChartSurfaceBase = exports.ESurfaceType = exports.DebugForDpi = void 0;
+exports.getLocateFile = exports.getMasterCanvas = exports.createChartDestination = exports.SciChartSurfaceBase = exports.ESurfaceType = exports.DebugForDpi = void 0;
 var classFactory_1 = require("../../Builder/classFactory");
 var licenseManager2D_1 = require("../../Charting/Visuals/licenseManager2D");
 var licenseManager3D_1 = require("../../Charting3D/Visuals/licenseManager3D");
@@ -32,6 +68,7 @@ var BaseType_1 = require("../../types/BaseType");
 var array_1 = require("../../utils/array");
 var guid_1 = require("../../utils/guid");
 var MemoryUsageHelper_1 = require("../../utils/MemoryUsageHelper");
+var perfomance_1 = require("../../utils/perfomance");
 var ChartModifierBase_1 = require("../ChartModifiers/ChartModifierBase");
 var SciChartJSDarkv2Theme_1 = require("../Themes/SciChartJSDarkv2Theme");
 var DpiHelper_1 = require("./TextureManager/DpiHelper");
@@ -153,6 +190,9 @@ var SciChartSurfaceBase = /** @class */ (function (_super) {
         catch (err) {
             console.warn(err);
         }
+        if (perfomance_1.PerformanceDebugHelper.enableDebug) {
+            _this.enableRenderListener();
+        }
         return _this;
     }
     /**
@@ -360,13 +400,22 @@ var SciChartSurfaceBase = /** @class */ (function (_super) {
     SciChartSurfaceBase.prototype.resumeUpdates = function (suspender) {
         if (suspender.shouldResumeTarget) {
             this.invalidateElement();
+            if (suspender === this.suspender) {
+                this.suspender = undefined;
+            }
         }
     };
+    SciChartSurfaceBase.prototype.resume = function () {
+        var _a;
+        (_a = this.suspender) === null || _a === void 0 ? void 0 : _a.resume();
+    };
     /**
      * @inheritDoc
      */
     SciChartSurfaceBase.prototype.suspendUpdates = function () {
-        return new UpdateSuspender_1.UpdateSuspender(this);
+        this.suspender = new UpdateSuspender_1.UpdateSuspender(this);
+        this.addDeletable(this.suspender);
+        return this.suspender;
     };
     /**
      * @inheritDoc
@@ -464,6 +513,47 @@ var SciChartSurfaceBase = /** @class */ (function (_super) {
         this.modifierAnnotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
         this.invalidateElement();
     };
+    /**
+     * 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.
+     */
+    SciChartSurfaceBase.prototype.nextStateRender = function (options) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var listener = function (isInvalidated) {
+                            try {
+                                if (!isInvalidated) {
+                                    if (options === null || options === void 0 ? void 0 : options.suspendAfter) {
+                                        var nextSuspender = _this.suspendUpdates();
+                                        resolve(nextSuspender);
+                                    }
+                                    else {
+                                        resolve(null);
+                                    }
+                                    _this.rendered.unsubscribe(listener);
+                                }
+                            }
+                            catch (err) {
+                                console.error(err);
+                                reject(err);
+                            }
+                        };
+                        _this.rendered.subscribe(listener);
+                        if (options === null || options === void 0 ? void 0 : options.resumeBefore) {
+                            _this.resume();
+                            if (options === null || options === void 0 ? void 0 : options.invalidateOnResume) {
+                                _this.invalidateElement();
+                            }
+                        }
+                    })];
+            });
+        });
+    };
     Object.defineProperty(SciChartSurfaceBase.prototype, "chartModifierGroups", {
         get: function () {
             var arr = this.chartModifiers
@@ -475,6 +565,14 @@ var SciChartSurfaceBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SciChartSurfaceBase.prototype.enableRenderListener = function () {
+        var _this = this;
+        var listener = function (isInvalidated) {
+            perfomance_1.PerformanceDebugHelper.mark(isInvalidated ? perfomance_1.EPerformanceMarkType.Rendered : perfomance_1.EPerformanceMarkType.FullStateRendered, { contextId: _this.id });
+        };
+        this.rendered.subscribe(listener);
+        this.addDeletable({ delete: function () { return _this.rendered.unsubscribe(listener); } });
+    };
     SciChartSurfaceBase.prototype.clearRootElement = function (clearHtml) {
         if (clearHtml && this.domChartRoot) {
             var style = this.domChartRoot.style;
@@ -659,22 +757,6 @@ var getMasterCanvas = function () {
     return SciChartSurfaceBase.domMasterCanvas;
 };
 exports.getMasterCanvas = getMasterCanvas;
-var copyToCanvas = function (sourceCanvas, getDestinationById) { return function (destinationId) {
-    var destination = getDestinationById(destinationId);
-    var destinationCanvas = destination === null || destination === void 0 ? void 0 : destination.sciChartSurface.domCanvas2D;
-    if (destinationCanvas) {
-        var destinationCanvasContext = destinationCanvas.getContext("2d");
-        destinationCanvasContext.clearRect(0, 0, destinationCanvasContext.canvas.width, destinationCanvasContext.canvas.height);
-        destinationCanvasContext.drawImage(sourceCanvas, 0, 0);
-        // destinationCanvasContext.drawImage(sourceCanvas,
-        //     0, 0,
-        //     sourceCanvas.width,
-        //     sourceCanvas.height,
-        //     0, 0,
-        //     destinationCanvas.clientWidth, destinationCanvas.clientHeight);
-    }
-}; };
-exports.copyToCanvas = copyToCanvas;
 /** @ignore */
 var getLocateFile = function (sciChartConfig) { return function (path, prefix) {
     if (path.endsWith(".wasm") && sciChartConfig.wasmUrl) {

package/Charting/Visuals/UpdateSuspender.d.ts

@@ -1,4 +1,6 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { Dictionary } from "../../Core/Dictionary";
+import { IDeletable } from "../../Core/IDeletable";
 /**
  * Types which implement ISuspendable can have updates suspended/resumed. Useful for batch operations.
  */
@@ -30,7 +32,7 @@ export interface ISuspendable {
 /**
  * Defines the interface to an {@link UpdateSuspender}, a class which allows nested suspend/resume operations on an {@link ISuspendable} target
  */
-export interface IUpdateSuspender {
+export interface IUpdateSuspender extends IDeletable {
     /**
      * Gets or sets a value indicating whether the target will resume when the
      * {@link IUpdateSuspender.resume} function is called is disposed. Default is True
@@ -52,7 +54,7 @@ declare type SuspendedInstance = {
 /**
  * A class which allows nested suspend/resume operations on an {@link ISuspendable} target
  */
-export declare class UpdateSuspender implements IUpdateSuspender {
+export declare class UpdateSuspender extends DeletableEntity implements IUpdateSuspender {
     /**
      * USED INTERNALLY: A map of string Id to Suspended instances
      */
@@ -71,7 +73,7 @@ export declare class UpdateSuspender implements IUpdateSuspender {
      */
     static using(target: ISuspendable, batchOperation: () => void): void;
     private readonly resumeTargetProperty;
-    private readonly targetProperty;
+    private targetProperty;
     /**
      * Creates an instance of an {@link UpdateSuspender}
      * @param target The target that we want to suspend. Multiple nested suspend/resumes are permitted
@@ -90,6 +92,8 @@ export declare class UpdateSuspender implements IUpdateSuspender {
      * Call this to resume drawing on the target {@link ISuspendable}
      */
     resume(): void;
+    delete(): void;
+    protected remove(): void;
     private increment;
     private decrement;
 }

package/Charting/Visuals/UpdateSuspender.js

@@ -1,12 +1,29 @@
 "use strict";
+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 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.UpdateSuspender = void 0;
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Dictionary_1 = require("../../Core/Dictionary");
 var Guard_1 = require("../../Core/Guard");
 /**
  * A class which allows nested suspend/resume operations on an {@link ISuspendable} target
  */
-var UpdateSuspender = /** @class */ (function () {
+var UpdateSuspender = /** @class */ (function (_super) {
+    __extends(UpdateSuspender, _super);
     /**
      * Creates an instance of an {@link UpdateSuspender}
      * @param target The target that we want to suspend. Multiple nested suspend/resumes are permitted
@@ -14,14 +31,20 @@ var UpdateSuspender = /** @class */ (function () {
      */
     function UpdateSuspender(target, shouldResumeTarget) {
         if (shouldResumeTarget === void 0) { shouldResumeTarget = true; }
-        this.resumeTargetProperty = shouldResumeTarget;
-        this.targetProperty = target;
-        if (!UpdateSuspender.suspendedInstances.containsKey(this.targetProperty.suspendableId)) {
-            UpdateSuspender.suspendedInstances.add(target.suspendableId, { id: target.suspendableId, suspendable: target, suspendCount: 1 });
+        var _this = _super.call(this) || this;
+        _this.resumeTargetProperty = shouldResumeTarget;
+        _this.targetProperty = target;
+        if (!UpdateSuspender.suspendedInstances.containsKey(_this.targetProperty.suspendableId)) {
+            UpdateSuspender.suspendedInstances.add(target.suspendableId, {
+                id: target.suspendableId,
+                suspendable: target,
+                suspendCount: 1
+            });
         }
         else {
-            this.increment(target);
+            _this.increment(target);
         }
+        return _this;
     }
     /**
      * Get whether the provided {@link ISuspendable} instance is suspended or not
@@ -73,10 +96,17 @@ var UpdateSuspender = /** @class */ (function () {
     UpdateSuspender.prototype.resume = function () {
         this.targetProperty.decrementSuspend();
         if (this.decrement(this.targetProperty) === 0) {
-            UpdateSuspender.suspendedInstances.remove(this.targetProperty.suspendableId);
+            this.remove();
             this.targetProperty.resumeUpdates(this);
         }
     };
+    UpdateSuspender.prototype.delete = function () {
+        this.remove();
+        this.targetProperty = undefined;
+    };
+    UpdateSuspender.prototype.remove = function () {
+        UpdateSuspender.suspendedInstances.remove(this.targetProperty.suspendableId);
+    };
     UpdateSuspender.prototype.increment = function (target) {
         UpdateSuspender.suspendedInstances.item(target.suspendableId).suspendCount++;
     };
@@ -91,5 +121,5 @@ var UpdateSuspender = /** @class */ (function () {
      */
     UpdateSuspender.suspendedInstances = new Dictionary_1.Dictionary();
     return UpdateSuspender;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.UpdateSuspender = UpdateSuspender;

package/Charting/Visuals/copyCanvasUtils.d.ts

@@ -0,0 +1,5 @@
+import type { TSciChartDestination } from "./SciChartSurfaceBase";
+/** @ignore */
+export declare type TGetDestinationFn = (destinationId: string) => TSciChartDestination;
+/** @ignore */
+export declare const copyToCanvas: (sourceCanvas: HTMLCanvasElement, getDestinationById: TGetDestinationFn) => (destinationId: string) => void;

package/Charting/Visuals/copyCanvasUtils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyToCanvas = void 0;
+var logger_1 = require("../../utils/logger");
+/** @ignore */
+var copyToCanvas = function (sourceCanvas, getDestinationById) { return function (destinationId) {
+    logger_1.Logger.debug("copyToCanvas");
+    var destination = getDestinationById(destinationId);
+    var sciChartSurface = destination === null || destination === void 0 ? void 0 : destination.sciChartSurface;
+    var destinationCanvas = destination === null || destination === void 0 ? void 0 : destination.sciChartSurface.domCanvas2D;
+    if (destinationCanvas) {
+        var destinationCanvasContext = destinationCanvas.getContext("2d");
+        destinationCanvasContext.clearRect(0, 0, destinationCanvasContext.canvas.width, destinationCanvasContext.canvas.height);
+        destinationCanvasContext.drawImage(sourceCanvas, 0, 0);
+        // destinationCanvasContext.drawImage(sourceCanvas,
+        //     0, 0,
+        //     sourceCanvas.width,
+        //     sourceCanvas.height,
+        //     0, 0,
+        //     destinationCanvas.clientWidth, destinationCanvas.clientHeight);
+        sciChartSurface.rendered.raiseEvent(sciChartSurface.isInvalidated);
+    }
+}; };
+exports.copyToCanvas = copyToCanvas;

package/Charting/Visuals/createMaster.js

@@ -54,6 +54,9 @@ var NativeObject_1 = require("./Helpers/NativeObject");
 var LabelCache_1 = require("./Axis/LabelProvider/LabelCache");
 var MemoryUsageHelper_1 = require("../../utils/MemoryUsageHelper");
 var WebGlHelper_1 = require("../../Core/WebGlHelper");
+var logger_1 = require("../../utils/logger");
+var copyCanvasUtils_1 = require("./copyCanvasUtils");
+var perfomance_1 = require("../../utils/perfomance");
 // Global variables
 /** @ignore */
 var sciChartMaster = {
@@ -85,8 +88,15 @@ var createMultichart = function (divElement, options) { return __awaiter(void 0,
                 sciChartSurface_1 = createChildSurface(divElementId, canvases, options === null || options === void 0 ? void 0 : options.theme);
                 return [2 /*return*/, new Promise(function (resolve) {
                         setTimeout(function () {
+                            var _a;
+                            if ((_a = options === null || options === void 0 ? void 0 : options.createSuspended) !== null && _a !== void 0 ? _a : SciChartDefaults_1.SciChartDefaults.createSuspended) {
+                                // // @ts-ignore
+                                // sciChartSurface.createSuspended = true;
+                                sciChartSurface_1.suspendUpdates();
+                            }
                             loader.removeChartLoader(canvases.domDivContainer, loaderDiv);
                             loaderDiv = undefined;
+                            sciChartSurface_1.setIsInitialized();
                             resolve({ wasmContext: wasmContext_1, sciChartSurface: sciChartSurface_1 });
                         }, 0);
                     })];
@@ -115,10 +125,12 @@ var getSharedWasmContext = function () { return __awaiter(void 0, void 0, void 0
 }); };
 exports.getSharedWasmContext = getSharedWasmContext;
 var initializeChartEngine2D = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var master;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var mark, master;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
+                mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.EngineInitStart);
                 WebGlHelper_1.WebGlHelper.initialize();
                 if (!(!sciChartMaster.wasmContext || !sciChartMaster.createChildSurface || !sciChartMaster.getChildSurfaces)) return [3 /*break*/, 2];
                 if (!sciChartMasterPromise) {
@@ -127,14 +139,16 @@ var initializeChartEngine2D = function () { return __awaiter(void 0, void 0, voi
                 }
                 return [4 /*yield*/, sciChartMasterPromise];
             case 1:
-                master = _a.sent();
+                master = _b.sent();
                 sciChartMaster.wasmContext = master.wasmContext;
                 (0, BuildStamp_1.checkBuildStamp)(master.wasmContext);
                 sciChartMaster.createChildSurface = master.createChildSurface;
                 sciChartMaster.getChildSurfaces = master.getChildSurfaces;
                 (0, exports.monitorWebGL)(master.wasmContext);
-                _a.label = 2;
-            case 2: return [2 /*return*/, sciChartMasterPromise];
+                _b.label = 2;
+            case 2:
+                perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.EngineInitEnd, { relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId });
+                return [2 /*return*/, sciChartMasterPromise];
         }
     });
 }); };
@@ -232,7 +246,7 @@ var createMaster = function () {
             var frameRenderer2D = new wasmContext.SCRTFrameRenderer2D();
             /// create an object that native side can trigger the copy to from...
             var canvasCopyObj = wasmContext.SCRTCopyToDestinationInterface.implement({
-                CopyToDestination: (0, SciChartSurfaceBase_1.copyToCanvas)(SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas, getDestinationById)
+                CopyToDestination: (0, copyCanvasUtils_1.copyToCanvas)(SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas, getDestinationById)
             });
             var getChildSurfaces = function () { return Globals_1.sciChartDestinations.map(function (el) { return el.sciChartSurface; }); };
             // Create of replace child surface
@@ -297,19 +311,21 @@ var createMaster = function () {
             wasmContext.canvas = canvas;
             var chartInitializer = {
                 InitializeChart: function () {
+                    logger_1.Logger.debug("InitializeChart");
                     resolve({ getChildSurfaces: getChildSurfaces, createChildSurface: createChildSurface, wasmContext: wasmContext });
                 },
                 Draw: function (canvasId) {
+                    logger_1.Logger.debug("Draw", canvasId);
                     var dest = Globals_1.sciChartDestinations.find(function (d) { return d.canvasElementId === canvasId; });
                     if (dest) {
                         dest.sciChartSurface.renderSurface.onRenderTimeElapsed();
                     }
                 },
                 Update: function (deltaTime) {
-                    // Logger.log("sciChartInitCommon.ts Update");
+                    logger_1.Logger.debug("sciChartInitCommon.ts Update", deltaTime);
                 },
                 ShutDownChart: function () {
-                    // Logger.log("sciChartInitCommon.ts ShutDownChart");
+                    logger_1.Logger.debug("sciChartInitCommon.ts ShutDownChart");
                 }
             };
             var chartInitObj = wasmContext.SCRTSampleChartInterface.implement(chartInitializer);

package/Charting/Visuals/createSingle.js

@@ -18,6 +18,7 @@ var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Globals_1 = require("../../Core/Globals");
 var LabelCache_1 = require("./Axis/LabelProvider/LabelCache");
 var createMaster_1 = require("./createMaster");
+var perfomance_1 = require("../../utils/perfomance");
 // Global variables
 /** @ignore */
 var createSingleInternal = function (divElement, options) {
@@ -26,6 +27,7 @@ var createSingleInternal = function (divElement, options) {
         var canvases = sciChartInitCommon_1.default.initCanvas(divElement, options === null || options === void 0 ? void 0 : options.widthAspect, options === null || options === void 0 ? void 0 : options.heightAspect, undefined, options === null || options === void 0 ? void 0 : options.disableAspect, options === null || options === void 0 ? void 0 : options.touchAction);
         var loader = (_a = options === null || options === void 0 ? void 0 : options.loader) !== null && _a !== void 0 ? _a : new loader_1.DefaultSciChartLoader();
         var loaderDiv = loader.addChartLoader(canvases.domDivContainer, options === null || options === void 0 ? void 0 : options.theme);
+        perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.EngineInitStart);
         var webGLSupport = WebGlHelper_1.WebGlHelper.getWebGlSupport();
         // console.log("webGLSupport", webGLSupport);
         if (webGLSupport === WebGlHelper_1.EWebGLSupport.WebGL2 || webGLSupport === WebGlHelper_1.EWebGLSupport.WebGL1) {
@@ -41,6 +43,12 @@ var createSingleInternal = function (divElement, options) {
                 // if (process.env.NODE_ENV !== "production") {
                 var revocable = (0, DeletableEntity_1.createWasmContextRevocableProxy)(wasmContext);
                 var customResolve = function (res) {
+                    var _a;
+                    if ((_a = options === null || options === void 0 ? void 0 : options.createSuspended) !== null && _a !== void 0 ? _a : SciChartDefaults_1.SciChartDefaults.createSuspended) {
+                        // // @ts-ignore
+                        // sciChartSurface.createSuspended = true;
+                        res.sciChartSurface.suspendUpdates();
+                    }
                     res.sciChartSurface.addDeletable({
                         delete: function () {
                             revocable.revoke();
@@ -107,6 +115,7 @@ var initDrawEngineSingleChart = function (wasmContext, canvases, resolve, theme)
                 var unsub = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, scs, canvases.disableAspect);
                 scs.addDeletable(unsub);
                 scs.addDeletable((0, NativeObject_1.freeCache)(wasmContext));
+                scs.setIsInitialized();
                 resolve({ wasmContext: wasmContext, sciChartSurface: scs });
             }, 0);
         },
@@ -127,5 +136,6 @@ var initDrawEngineSingleChart = function (wasmContext, canvases, resolve, theme)
     wasmContext.SCRTSetGlobalSampleChartInterface(chartInitObj);
     // @ts-ignore
     wasmContext.callMain();
+    perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.EngineInitEnd, { contextId: scs === null || scs === void 0 ? void 0 : scs.id });
 };
 exports.initDrawEngineSingleChart = initDrawEngineSingleChart;

package/Charting/Visuals/licenseManager2D.d.ts

@@ -35,7 +35,7 @@ interface ILicenseCookie {
 }
 export declare const getLicenseCookie: () => ILicenseCookie;
 export declare const forceReapplyLicense2D: () => void;
-export declare const applyLicense: (licenseContext: TLicenseContext, sciChartSurface: ISciChartSurfaceBase) => void;
+export declare const applyLicense: (licenseContext: TLicenseContext, sciChartSurface?: ISciChartSurfaceBase) => void;
 export declare type TLicenseContext = {
     SCRTCredentials: {
         GetLicenseType: () => SCRTLicenseType;

package/Charting/Visuals/licenseManager2D.js

@@ -433,7 +433,7 @@ var applyLicense2D = function (licenseContext, sciChartSurface, isSingle) {
         shouldApplyLicense2D = false;
 };
 var applyLicense = function (licenseContext, sciChartSurface) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     debug("applyLicense running");
     var licenseKey = "";
     var lt = licenseContext.SCRTCredentials.GetLicenseType();
@@ -467,7 +467,7 @@ var applyLicense = function (licenseContext, sciChartSurface) {
             }
             else {
                 var errorMsg = licenseContext.SCRTCredentials.GetLicenseErrors();
-                if ((window && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.hostname) && !window.location.hostname.includes("localhost")) ||
+                if ((window && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.hostname) && !((_c = (_b = window.location) === null || _b === void 0 ? void 0 : _b.hostname) === null || _c === void 0 ? void 0 : _c.includes("localhost"))) ||
                     !errorMsg.startsWith("License is not valid for this domain")) {
                     if (isDebug) {
                         debug("Runtime license is invalid: " + errorMsg);
@@ -566,7 +566,7 @@ var applyLicense = function (licenseContext, sciChartSurface) {
             console.log("Defaulting to SciChart Community Edition. Usage constitutes acceptance of our EULA and terms at https://www.scichart.com/community-licensing. See https://store.scichart.com for commercial licensing options.");
             var daysRemaining = licenseContext.SCRTCredentials.GetLicenseDaysRemaining();
             console.log("The community license is valid for 6 months from the date the version in use was released.  This version ".concat(BuildStamp_1.libraryVersion, " has ").concat(daysRemaining, " day").concat(daysRemaining === 1 ? "" : "s", " remaining"));
-            if (!app_1.IS_TEST_ENV && ((_b = document === null || document === void 0 ? void 0 : document.location) === null || _b === void 0 ? void 0 : _b.hostname.startsWith("localhost")) && useLicenseWizard) {
+            if (!app_1.IS_TEST_ENV && ((_d = document === null || document === void 0 ? void 0 : document.location) === null || _d === void 0 ? void 0 : _d.hostname.startsWith("localhost")) && useLicenseWizard) {
                 console.log("SciChart is looking for a paid developer activation from the scichart licensing wizard... To disable this call SciChartSurface.UseCommunityLicense()");
             }
             communityNotice = true;

package/Charting/Visuals/sciChartInitCommon.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var WebGlHelper_1 = require("../../Core/WebGlHelper");
+var perfomance_1 = require("../../utils/perfomance");
 var SciChartSurfaceBase_1 = require("./SciChartSurfaceBase");
 var DpiHelper_1 = require("./TextureManager/DpiHelper");
 var ECanvasType;
@@ -211,10 +212,12 @@ var subscribeToResize = function (chartRoot, aspect, sciChartSurface, disableAsp
                 newHeight = maxHeight;
             }
             var isNotZero = newWidth !== 0 && newHeight !== 0;
-            var isChanged = sciChartSurface.domCanvas2D.width !== newWidth || sciChartSurface.domCanvas2D.height !== newHeight;
+            var isChanged = sciChartSurface.domCanvas2D.width !== newWidth * DpiHelper_1.DpiHelper.PIXEL_RATIO ||
+                sciChartSurface.domCanvas2D.height !== newHeight * DpiHelper_1.DpiHelper.PIXEL_RATIO;
             if (isNotZero && isChanged) {
                 // We use setTimeout to fix "ResizeObserver loop limit exceeded" issue which occurs in Electron app
                 setTimeout(function () {
+                    perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.Resize, { contextId: sciChartSurface.id });
                     sciChartSurface.changeViewportSize(newWidth, newHeight);
                 }, 0);
             }
@@ -224,7 +227,7 @@ var subscribeToResize = function (chartRoot, aspect, sciChartSurface, disableAsp
             _loop_1(entry);
         }
     });
-    resizeObserver.observe(chartRoot);
+    resizeObserver.observe(chartRoot, { box: "border-box" });
     // Return an IDeletable which will unsubscribe
     var unsub = { delete: function () { return resizeObserver.disconnect(); } };
     return unsub;

package/Charting3D/Visuals/SciChart3DRenderer.d.ts

@@ -23,6 +23,7 @@ export declare class SciChart3DRenderer {
      * @param scs the {@link SciChart3DSurface} we are drawing
      */
     static tryPerformAutoRangeOn(axis: AxisBase3D, scs: SciChart3DSurface): void;
+    isInvalidated: boolean;
     private readonly scs;
     private wasmContext;
     private prevRect;

package/Charting3D/Visuals/SciChart3DRenderer.js

@@ -16,6 +16,7 @@ var Guard_1 = require("../../Core/Guard");
 var Rect_1 = require("../../Core/Rect");
 var AutoRange_1 = require("../../types/AutoRange");
 var WatermarkPosition_1 = require("../../types/WatermarkPosition");
+var perfomance_1 = require("../../utils/perfomance");
 var AxisCubeDescriptor_1 = require("./Primitives/AxisCubeDescriptor");
 var RenderPassInfo3D_1 = require("./Primitives/RenderPassInfo3D");
 var SceneDescriptor_1 = require("./Primitives/SceneDescriptor");
@@ -24,6 +25,7 @@ var SceneDescriptor_1 = require("./Primitives/SceneDescriptor");
  */
 var SciChart3DRenderer = /** @class */ (function () {
     function SciChart3DRenderer(scs, wasmContext) {
+        this.isInvalidated = false;
         Guard_1.Guard.notNull(scs, "scs");
         this.scs = scs;
         this.wasmContext = wasmContext;
@@ -76,6 +78,7 @@ var SciChart3DRenderer = /** @class */ (function () {
      * The main render loop
      */
     SciChart3DRenderer.prototype.render = function () {
+        var _a;
         if (this.scs.isDeleted || !this.scs.isInitialized) {
             return;
         }
@@ -83,6 +86,8 @@ var SciChart3DRenderer = /** @class */ (function () {
         if (!this.isSurfaceValid(this.scs)) {
             throw Error("SciChart3DSurface is not valid");
         }
+        var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.RenderStart, { contextId: this.scs.id });
+        this.isInvalidated = false;
         // Enable/disable hit test as required.
         this.scs.webAssemblyContext3D.SCRTSetIsSelectionBufferEnabled(this.scs.isHitTestEnabled);
         // Step 1: Update the current active SceneWorld and camera
@@ -97,7 +102,7 @@ var SciChart3DRenderer = /** @class */ (function () {
         var tsrCamera = sceneWorld.GetMainCamera();
         var typescriptCamera = this.scs.camera;
         typescriptCamera.updateEngineCamera(tsrCamera);
-        var _a = this.scs.viewportManager, width = _a.width, height = _a.height;
+        var _b = this.scs.viewportManager, width = _b.width, height = _b.height;
         var viewRect = new Rect_1.Rect(0, 0, width, height);
         this.scs.setSeriesViewRect(viewRect);
         // Animation Step
@@ -124,6 +129,10 @@ var SciChart3DRenderer = /** @class */ (function () {
         svgAnnotations.forEach(function (svg) { return svg.update(undefined, undefined, 0, 0); });
         // We add the same padding as we have for 2D 6px
         this.updateWatermark();
+        perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.RenderEnd, {
+            contextId: this.scs.id,
+            relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
+        });
         // Step 6: Notify that scene is about to be drawn
         this.scs.onSciChartRendered();
         // Invalidate for the animations

package/Charting3D/Visuals/SciChart3DSurface.d.ts

@@ -294,6 +294,7 @@ export declare class SciChart3DSurface extends SciChartSurfaceBase {
      * @inheritDoc
      */
     get surfaceType(): ESurfaceType;
+    get isInvalidated(): boolean;
     /**
      * Called after the {@link SciChart3DSurface} has rendered.
      */