scichart 3.1.346 → 3.2.0-beta

package/Charting/Visuals/SciChartSurfaceBase.d.ts

@@ -1,3 +1,4 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { EventHandler } from "../../Core/EventHandler";
 import { IDeletable } from "../../Core/IDeletable";
 import { MouseManager } from "../../Core/Mouse/MouseManager";
@@ -11,7 +12,9 @@ import { TSciChartSurfaceCanvases } from "../../types/TSciChartSurfaceCanvases";
 import { IChartModifierBase } from "../ChartModifiers/ChartModifierBase";
 import { IThemeable } from "../Themes/IThemeable";
 import { IThemePartial, IThemeProvider } from "../Themes/IThemeProvider";
-import { I2DSurfaceOptions } from "./I2DSurfaceOptions";
+import { AdornerLayer } from "./Annotations/AdornerLayer";
+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";
@@ -19,7 +22,7 @@ export declare type TSciChartDestination = {
     canvasElementId: string;
     width: number;
     height: number;
-    sciChartSurface: SciChartSurfaceBase;
+    sciChartSurface: ISciChartSurfaceBase;
 };
 export declare type TSciChartConfig = {
     wasmUrl?: string;
@@ -34,7 +37,7 @@ export interface ISurfaceOptionsBase {
      */
     id?: string;
     /**
-     * Optional - The theme applied to the {@link SciChartSurface} on startup
+     * Optional - The theme applied to the {@link SciChartSurfaceBase} on startup
      * @remarks see {@link IThemeProvider} for properties which can affect SciChart theme. Two default
      * themes are included out of the box {@link SciChartJSLightTheme} and {@link SciChartJSDarkTheme}.
      * Custom themes may be created by implementing {@link IThemeProvider}
@@ -50,6 +53,29 @@ export interface ISurfaceOptionsBase {
         type: string;
         options?: any;
     };
+    /**
+     * Sets a `touch-action` property to the canvas style.
+     * Useful if touch interactions in browser should be configured.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+     *
+     * @remarks By default a chart will use `touch-action: none` to prevent the default browser behavior.
+     */
+    touchAction?: string;
+    /**
+     * Optional - the width aspect ratio of the {@link SciChartSurfaceBase}. By default SciChart will scale to fit the parent Div.
+     * However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2.
+     */
+    widthAspect?: number;
+    /**
+     * Optional - the height aspect ratio of the {@link SciChartSurfaceBase}. By default SciChart will scale to fit the parent Div.
+     * However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2.
+     */
+    heightAspect?: number;
+    /**
+     * Optional - the option of disabling / enabling scaling of the {@link SciChartSurfaceBase}.
+     * If false - the {@link SciChartSurfaceBase} will take the height and width of parent div without scaling.
+     */
+    disableAspect?: boolean;
 }
 export declare const DebugForDpi: boolean;
 /**
@@ -60,8 +86,13 @@ export declare const DebugForDpi: boolean;
  * to use the SciChartSurface and create a 2D or 3D {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart}
  */
 export interface ISciChartSurfaceBase extends IDeletable, IThemeable {
+    readonly id: string;
+    readonly domChartRoot: HTMLDivElement;
+    readonly domDivContainer: HTMLDivElement;
     readonly domCanvas2D: HTMLCanvasElement;
     readonly themeProvider: IThemeProvider;
+    readonly isDeleted: boolean;
+    readonly otherSurfaces: ISciChartSurfaceBase[];
     /**
      * Changes the Viewport Size of the {@link SciChartSurfaceBase}
      * @param width
@@ -72,6 +103,8 @@ export interface ISciChartSurfaceBase extends IDeletable, IThemeable {
      * Add an IDeleteable object to the surface which will have its delete method called when the surface is deleted
      */
     addDeletable(deletable: IDeletable): void;
+    invalidateElement(): void;
+    delete(clearHtml?: boolean): void;
 }
 /**
  * Enum constants to specify SciChartSurface type
@@ -93,7 +126,7 @@ export declare enum ESurfaceType {
  * See derived types {@link SciChartSurface} (2D Charts) and {@link SciChart3DSurface} (3D Charts) for more specific instructions on how
  * to use the SciChartSurface and create a 2D or 3D {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart}
  */
-export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBase, ISuspendable, INotifyOnDpiChanged {
+export declare abstract class SciChartSurfaceBase extends DeletableEntity implements ISciChartSurfaceBase, ISuspendable, INotifyOnDpiChanged {
     /**
      * Gets or sets the application-wide default theme. See {@link IThemeProvider} for details
      */
@@ -110,11 +143,22 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
      * chart parts are automatically anti-aliased
      */
     static AntiAliasWebGlBackbuffer: boolean;
+    static wasmContextDisposeTimeout: number;
+    static autoDisposeWasmContext: boolean;
+    /**
+     * Deletes a {@link TSciChart | WebAssembly Context} used by the charts instantiated with wasmContext {@link SciChartSurface.create}.
+     */
+    static disposeSharedWasmContext(): void;
     /**
      * Sets the runtime license key.  Use for full licenses or trials only, not developer licenses.
      * @param keyCode
      */
     static setRuntimeLicenseKey(keyCode: string): void;
+    /**
+     * Causes SciChart to always use its built in community non-commercial license.  This stops it attempting to look for the license wizard
+     * Usage of the community license constitutes acceptace of the EULA at https://scichart.com/JSCommunityEULA
+     */
+    static UseCommunityLicense(): void;
     /**
      * Sets the endpoint for validating a runtime license key with the server.  Must be a relative path.
      * @default api/license
@@ -144,36 +188,63 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
     /**
      * The {@link HTMLDivElement} which is the dom chart root
      */
-    readonly domChartRoot: HTMLDivElement;
+    domChartRoot: HTMLDivElement;
     /**
      * The {@link HTMLCanvasElement} which is the WebGL canvas that SciChart draws to
      */
-    readonly domCanvasWebGL: HTMLCanvasElement;
+    domCanvasWebGL: HTMLCanvasElement;
     /**
      * The {@link HTMLCanvasElement} which is the HTML5 canvas which SciChart draws overlays (cursors, tooltips) to
      */
-    readonly domCanvas2D: HTMLCanvasElement;
+    domCanvas2D: HTMLCanvasElement;
     /**
      * The {@link SVGSVGElement} which is the SVG canvas which SciChart adds elements (tooltips, annotations) to
      */
-    readonly domSvgContainer: SVGSVGElement;
+    domSvgContainer: SVGSVGElement;
     /**
      * The {@link SVGSVGElement} which is the SVG adorner layer canvas, is used for annotation adorners
      */
-    readonly domSvgAdornerLayer: SVGSVGElement;
+    domSvgAdornerLayer: SVGSVGElement;
     /**
      * The inner {@link HTMLDivElement} div element
      */
-    readonly domDivContainer: HTMLDivElement;
+    domDivContainer: HTMLDivElement;
     /**
      * The {@link MouseManager} subscribes to mouse events on the {@link domChartRoot} and routes them to components within SciChart
      */
-    readonly mouseManager: MouseManager;
+    mouseManager: MouseManager;
     /**
      * The {@link IThemeProvider} provides colors, brushes and theme information for the current {@link SciChartSurfaceBase}
      */
     /** For serialization Only.  The name of the onCreated function applied by the builder api */
     onCreatedName: string;
+    /**
+     * @summary Gets the collection of {@link IAnnotation} - annotations, markers or shapes drawn over the top of a {@link SciChartSurface}
+     * @description A {@link SciChartSurface} can have zero to many {@link IAnnotation | Annotations}.
+     *
+     * The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability.
+     * See derived types of {@link IAnnotation} such as {@link BoxAnnotation}, {@link LineAnnotation} etc...
+     *
+     * Use this collection to add and remove Annotations to the chart.
+     * @remarks
+     * Adding an Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging,
+     * meaning a chart will zoom to fit data and chart series but not annotations
+     */
+    readonly annotations: ObservableArray<IAnnotation>;
+    /**
+     * @summary Gets the collection of {@link IAnnotation} - modifier annotations, markers or shapes drawn over the top of a {@link SciChartSurface}
+     * @description A {@link SciChartSurface} can have zero to many {@link IAnnotation | Annotations}.
+     *
+     * The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability.
+     * See derived types of {@link IAnnotation} such as {@link BoxAnnotation}, {@link LineAnnotation} etc...
+     *
+     * Use this collection to add and remove Modifier Annotations to the chart.
+     * @remarks
+     * Adding an Modifier Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging,
+     * meaning a chart will zoom to fit data and chart series but not annotations
+     */
+    readonly modifierAnnotations: ObservableArray<IAnnotation>;
+    adornerLayer: AdornerLayer;
     protected destinations: TSciChartDestination[];
     protected themeProviderProperty: IThemeProvider;
     protected previousThemeProviderProperty: IThemeProvider;
@@ -181,11 +252,12 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
     protected isDeletedProperty: boolean;
     protected backgroundProperty: string;
     protected idProperty: string;
+    protected touchActionProperty: string;
     protected widthAspect: number;
     protected heightAspect: number;
     protected disableAspect: boolean;
     protected loaderJson: any;
-    private readonly sharedWasmContext;
+    private sharedWasmContext;
     private readonly suspendableIdProperty;
     private seriesViewRectProperty;
     private isAlphaEnabledProperty;
@@ -286,6 +358,16 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
      * @param seriesViewRect a {@link Rect} which defines the portion of the view for drawing series
      */
     setSeriesViewRect(seriesViewRect: Rect): void;
+    /**
+     * Gets the {@link AxisCore | XAxis} which matches the axisId. Returns undefined if not axis found
+     * @param axisId The AxisId to search for
+     */
+    abstract getXAxisById(axisId: string): AxisCore;
+    /**
+     * Gets the {@link AxisCore | YAxis} which matches the axisId. Returns undefined if not axis found
+     * @param axisId The AxisId to search for
+     */
+    abstract getYAxisById(axisId: string): AxisCore;
     /**
      * Changes the Viewport Size of the {@link SciChartSurfaceBase}
      * @param width
@@ -309,7 +391,8 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
      */
     onDpiChanged(args: TDpiChangedEventArgs): void;
     get chartModifierGroups(): string[];
-    protected applyOptions(options: I2DSurfaceOptions): void;
+    protected clearRootElement(clearHtml: boolean): void;
+    protected applyOptions(options: ISurfaceOptionsBase): void;
     /**
      * Detaches a {@link ChartModifierBase2D} from the {@link SciChartSurfaceBase}
      * @param chartModifier
@@ -339,6 +422,8 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
     protected abstract applySciChartBackground(htmlColor: string, alphaEnabled?: boolean): void;
     protected changeMasterCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void;
     protected changeWebGLCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void;
+    private detachAnnotation;
+    private attachAnnotation;
 }
 export declare const createChartDestination: (canvas: HTMLCanvasElement) => {
     canvas: HTMLCanvasElement;
@@ -346,6 +431,7 @@ export declare const createChartDestination: (canvas: HTMLCanvasElement) => {
     GetWidth(): any;
     GetID(): any;
 };
+/** @ignore */
 export declare const getMasterCanvas: () => HTMLCanvasElement;
 export declare type TGetDestinationFn = (destinationId: string) => TSciChartDestination;
 export declare const copyToCanvas: (sourceCanvas: HTMLCanvasElement, getDestinationById: TGetDestinationFn) => (destinationId: string) => void;

package/Charting/Visuals/SciChartSurfaceBase.js

@@ -1,10 +1,27 @@
 "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.getLocateFile = exports.copyToCanvas = 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 DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Deleter_1 = require("../../Core/Deleter");
 var EventHandler_1 = require("../../Core/EventHandler");
+var Globals_1 = require("../../Core/Globals");
 var Guard_1 = require("../../Core/Guard");
 var MouseManager_1 = require("../../Core/Mouse/MouseManager");
 var ObservableArray_1 = require("../../Core/ObservableArray");
@@ -13,6 +30,7 @@ var WebGlHelper_1 = require("../../Core/WebGlHelper");
 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 ChartModifierBase_1 = require("../ChartModifiers/ChartModifierBase");
 var SciChartJSDarkv2Theme_1 = require("../Themes/SciChartJSDarkv2Theme");
 var DpiHelper_1 = require("./TextureManager/DpiHelper");
@@ -39,7 +57,8 @@ var ESurfaceType;
  * See derived types {@link SciChartSurface} (2D Charts) and {@link SciChart3DSurface} (3D Charts) for more specific instructions on how
  * to use the SciChartSurface and create a 2D or 3D {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart}
  */
-var SciChartSurfaceBase = /** @class */ (function () {
+var SciChartSurfaceBase = /** @class */ (function (_super) {
+    __extends(SciChartSurfaceBase, _super);
     /**
      * Creates an instance of a SciChartSurfaceBase
      * @param webAssemblyContext  The {@link TSciChart | SciChart 2D WebAssembly Context} or {@link TSciChart | SciChart 3D WebAssembly Context}
@@ -48,48 +67,96 @@ var SciChartSurfaceBase = /** @class */ (function () {
      */
     function SciChartSurfaceBase(webAssemblyContext, canvases) {
         if (canvases === void 0) { canvases = {}; }
-        var _this = this;
-        this.themeProviderProperty = SciChartSurfaceBase.DEFAULT_THEME;
-        this.previousThemeProviderProperty = SciChartSurfaceBase.DEFAULT_THEME;
-        this.isInitializedProperty = false;
-        this.isDeletedProperty = false;
-        this.backgroundProperty = SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground;
-        this.idProperty = (0, guid_1.generateGuid)();
-        this.suspendableIdProperty = (0, guid_1.generateGuid)();
-        this.isAlphaEnabledProperty = true;
-        this.deletables = [];
+        var _this = _super.call(this) || this;
+        _this.themeProviderProperty = SciChartSurfaceBase.DEFAULT_THEME;
+        _this.previousThemeProviderProperty = SciChartSurfaceBase.DEFAULT_THEME;
+        _this.isInitializedProperty = false;
+        _this.isDeletedProperty = false;
+        _this.backgroundProperty = SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground;
+        _this.idProperty = (0, guid_1.generateGuid)();
+        _this.suspendableIdProperty = (0, guid_1.generateGuid)();
+        _this.isAlphaEnabledProperty = true;
+        _this.deletables = [];
         Guard_1.Guard.notNull(webAssemblyContext, "webAssemblyContext");
-        this.domChartRoot = canvases.domChartRoot;
-        this.domCanvasWebGL = canvases.domCanvasWebGL;
-        this.domCanvas2D = canvases.domCanvas2D;
-        this.domSvgContainer = canvases.domSvgContainer;
-        this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
-        this.domDivContainer = canvases.domDivContainer;
-        this.sharedWasmContext = webAssemblyContext;
-        this.propertyChanged = new EventHandler_1.EventHandler();
+        _this.domChartRoot = canvases.domChartRoot;
+        _this.domCanvasWebGL = canvases.domCanvasWebGL;
+        _this.domCanvas2D = canvases.domCanvas2D;
+        _this.domSvgContainer = canvases.domSvgContainer;
+        _this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
+        _this.domDivContainer = canvases.domDivContainer;
+        _this.sharedWasmContext = webAssemblyContext;
+        _this.propertyChanged = new EventHandler_1.EventHandler();
         // Flag which ensures Typescript side drives emscripten rendering (one render per draw request)
         webAssemblyContext.TSRSetDrawRequestsEnabled(true);
         // Setup chart modifiers
-        this.detachChartModifier = this.detachChartModifier.bind(this);
-        this.attachChartModifier = this.attachChartModifier.bind(this);
-        this.chartModifiers = new ObservableArray_1.ObservableArray();
-        this.chartModifiers.collectionChanged.subscribe(function (arg) {
+        _this.detachChartModifier = _this.detachChartModifier.bind(_this);
+        _this.attachChartModifier = _this.attachChartModifier.bind(_this);
+        _this.chartModifiers = new ObservableArray_1.ObservableArray();
+        _this.chartModifiers.collectionChanged.subscribe(function (arg) {
             var _a, _b;
             (_a = arg.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(function (cm) { return _this.detachChartModifier(cm); });
             (_b = arg.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(function (cm) { return _this.attachChartModifier(cm); });
         });
+        // Setup annotations
+        _this.detachAnnotation = _this.detachAnnotation.bind(_this);
+        _this.attachAnnotation = _this.attachAnnotation.bind(_this);
+        _this.annotations = new ObservableArray_1.ObservableArray();
+        _this.modifierAnnotations = new ObservableArray_1.ObservableArray();
+        _this.annotations.collectionChanged.subscribe(function (arg) {
+            var _a, _b;
+            (_a = arg.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(function (a) { return _this.detachAnnotation(a); });
+            (_b = arg.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(function (a) { return _this.attachAnnotation(a); });
+        });
+        _this.modifierAnnotations.collectionChanged.subscribe(function (arg) {
+            var _a, _b;
+            (_a = arg.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(function (a) { return _this.detachAnnotation(a); });
+            (_b = arg.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(function (a) { return _this.attachAnnotation(a); });
+        });
         // Setup mouse manager
-        this.mouseManager = new MouseManager_1.MouseManager(this);
+        _this.mouseManager = new MouseManager_1.MouseManager(_this);
         if (canvases.domCanvasWebGL) {
-            this.mouseManager.subscribe(canvases.domCanvasWebGL);
+            _this.mouseManager.subscribe(canvases.domCanvasWebGL);
         }
         else if (canvases.domCanvas2D) {
-            this.mouseManager.subscribe(canvases.domCanvas2D);
+            _this.mouseManager.subscribe(canvases.domCanvas2D);
         }
         // Setup Dpi change listeners
-        this.onDpiChanged = this.onDpiChanged.bind(this);
-        DpiHelper_1.DpiHelper.dpiChanged.subscribe(this.onDpiChanged);
+        _this.onDpiChanged = _this.onDpiChanged.bind(_this);
+        DpiHelper_1.DpiHelper.dpiChanged.subscribe(_this.onDpiChanged);
+        if (process.env.NODE_ENV !== "production") {
+            if (MemoryUsageHelper_1.MemoryUsageHelper.isMemoryUsageDebugEnabled) {
+                var rootContainer = document.body;
+                var observer_1 = new MutationObserver(function () {
+                    var isInDom = _this.domChartRoot.isConnected;
+                    if (!isInDom && !_this.isDeleted) {
+                        console.warn("The chart root element \"".concat(_this.domChartRoot.id, "\" was detached before the surface ").concat(_this.id, " was properly disposed! Make sure to call \"delete\" method on the surface when it is not longer needed."));
+                    }
+                });
+                observer_1.observe(rootContainer, { childList: true, subtree: true });
+                _this.addDeletable({
+                    delete: function () { return observer_1.disconnect(); }
+                });
+            }
+        }
+        return _this;
     }
+    /**
+     * Deletes a {@link TSciChart | WebAssembly Context} used by the charts instantiated with wasmContext {@link SciChartSurface.create}.
+     */
+    SciChartSurfaceBase.disposeSharedWasmContext = function () {
+        if (Globals_1.sciChart3DDestinations.length === 0 && Globals_1.sciChartDestinations.length === 0) {
+            document.body.removeChild(SciChartSurfaceBase.domMasterCanvas);
+            SciChartSurfaceBase.domMasterCanvas = undefined;
+        }
+        if (process.env.NODE_ENV !== "production") {
+            if (MemoryUsageHelper_1.MemoryUsageHelper.isMemoryUsageDebugEnabled) {
+                // @ts-ignore
+                window.gc && window.gc();
+                // TODO add warning if there are undeleted or uncollected entities instead
+                // MemoryUsageHelper.objectRegistry.log();
+            }
+        }
+    };
     /**
      * Sets the runtime license key.  Use for full licenses or trials only, not developer licenses.
      * @param keyCode
@@ -97,6 +164,13 @@ var SciChartSurfaceBase = /** @class */ (function () {
     SciChartSurfaceBase.setRuntimeLicenseKey = function (keyCode) {
         licenseManager2D_1.licenseManager.setRuntimeLicenseKey(keyCode);
     };
+    /**
+     * Causes SciChart to always use its built in community non-commercial license.  This stops it attempting to look for the license wizard
+     * Usage of the community license constitutes acceptace of the EULA at https://scichart.com/JSCommunityEULA
+     */
+    SciChartSurfaceBase.UseCommunityLicense = function () {
+        licenseManager2D_1.licenseManager.setRuntimeLicenseKey("community");
+    };
     /**
      * Sets the endpoint for validating a runtime license key with the server.  Must be a relative path.
      * @default api/license
@@ -309,16 +383,29 @@ var SciChartSurfaceBase = /** @class */ (function () {
         var _a;
         if (clearHtml === void 0) { clearHtml = true; }
         this.isDeletedProperty = true;
-        var currentSurfaceIndex = (_a = this.destinations) === null || _a === void 0 ? void 0 : _a.findIndex(function (dest) { return dest.sciChartSurface === _this; });
+        // TODO probably this should be moved outside for Proxy === this comparison issue exists
+        var currentSurfaceIndex = (_a = this.destinations) === null || _a === void 0 ? void 0 : _a.findIndex(function (dest) { return dest.sciChartSurface.id === _this.id; });
         if (currentSurfaceIndex >= 0) {
             this.destinations.splice(currentSurfaceIndex, 1);
         }
         DpiHelper_1.DpiHelper.dpiChanged.unsubscribe(this.onDpiChanged);
         this.mouseManager.unsubscribe();
+        this.mouseManager = undefined;
+        this.chartModifiers.asArray().forEach(function (chm) { return chm.delete(); });
+        this.modifierAnnotations.asArray().forEach(function (annotation) { return annotation.delete(); });
+        this.annotations.asArray().forEach(function (annotation) { return annotation.delete(); });
+        this.adornerLayer = undefined;
         for (var _i = 0, _b = this.deletables; _i < _b.length; _i++) {
             var deletable = _b[_i];
             (0, Deleter_1.deleteSafe)(deletable);
         }
+        this.domChartRoot = undefined;
+        this.domCanvasWebGL = undefined;
+        this.domCanvas2D = undefined;
+        this.domSvgContainer = undefined;
+        this.domSvgAdornerLayer = undefined;
+        this.domDivContainer = undefined;
+        this.sharedWasmContext = undefined;
         this.deletables = [];
     };
     SciChartSurfaceBase.prototype.addDeletable = function (deletable) {
@@ -350,6 +437,8 @@ var SciChartSurfaceBase = /** @class */ (function () {
      * @inheritDoc
      */
     SciChartSurfaceBase.prototype.onDpiChanged = function (args) {
+        this.annotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
+        this.modifierAnnotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
         this.invalidateElement();
     };
     Object.defineProperty(SciChartSurfaceBase.prototype, "chartModifierGroups", {
@@ -363,6 +452,22 @@ var SciChartSurfaceBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    SciChartSurfaceBase.prototype.clearRootElement = function (clearHtml) {
+        if (clearHtml && this.domChartRoot) {
+            var style = this.domChartRoot.style;
+            if (style) {
+                style.background = "";
+                style.position = "";
+            }
+            if (this.domChartRoot.hasOwnProperty("replaceChildren")) {
+                // @ts-ignore
+                this.domChartRoot.replaceChildren();
+            }
+            else {
+                this.domChartRoot.innerHTML = "";
+            }
+        }
+    };
     SciChartSurfaceBase.prototype.applyOptions = function (options) {
         var _a;
         this.idProperty = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : this.idProperty;
@@ -429,7 +534,7 @@ var SciChartSurfaceBase = /** @class */ (function () {
         DpiHelper_1.DpiHelper.setSize(SciChartSurfaceBase.domMasterCanvas, newWidth, newHeight);
         var masterCanvasBackBufferWidth = SciChartSurfaceBase.domMasterCanvas.width;
         var masterCanvasBackBufferHeight = SciChartSurfaceBase.domMasterCanvas.height;
-        wasmContext.TSRSetMainWindowSize(masterCanvasBackBufferWidth, masterCanvasBackBufferHeight);
+        wasmContext.SCRTSetMainWindowSize(masterCanvasBackBufferWidth, masterCanvasBackBufferHeight);
     };
     SciChartSurfaceBase.prototype.changeWebGLCanvasViewportSize = function (wasmContext, pixelWidth, pixelHeight) {
         if (!this.domCanvasWebGL)
@@ -437,7 +542,22 @@ var SciChartSurfaceBase = /** @class */ (function () {
         var backBufferWidth = pixelWidth * DpiHelper_1.DpiHelper.PIXEL_RATIO;
         var backBufferHeight = pixelHeight * DpiHelper_1.DpiHelper.PIXEL_RATIO;
         DpiHelper_1.DpiHelper.setSize(this.domCanvasWebGL, pixelWidth, pixelHeight);
-        wasmContext.TSRSetMainWindowSize(backBufferWidth, backBufferHeight);
+        wasmContext.SCRTSetMainWindowSize(backBufferWidth, backBufferHeight);
+    };
+    SciChartSurfaceBase.prototype.detachAnnotation = function (annotation) {
+        annotation.onDetach();
+        annotation.invalidateParentCallback = undefined;
+        annotation.parentSurface = undefined;
+        this.invalidateElement();
+    };
+    SciChartSurfaceBase.prototype.attachAnnotation = function (annotation) {
+        if (annotation.invalidateParentCallback) {
+            throw new Error("Invalid operation in sciChartSurface.attachAnnotation, this annotation has already been attached to a SciChartSurface. Please detach it from a SciChartSurface before attaching to another");
+        }
+        annotation.parentSurface = this;
+        annotation.invalidateParentCallback = this.invalidateElement;
+        annotation.onAttach(this);
+        this.invalidateElement();
     };
     /**
      * Gets or sets the application-wide default theme. See {@link IThemeProvider} for details
@@ -450,8 +570,10 @@ var SciChartSurfaceBase = /** @class */ (function () {
      * chart parts are automatically anti-aliased
      */
     SciChartSurfaceBase.AntiAliasWebGlBackbuffer = false;
+    SciChartSurfaceBase.wasmContextDisposeTimeout = 0;
+    SciChartSurfaceBase.autoDisposeWasmContext = false;
     return SciChartSurfaceBase;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.SciChartSurfaceBase = SciChartSurfaceBase;
 var createChartDestination = function (canvas) {
     if (!canvas)
@@ -470,6 +592,7 @@ var createChartDestination = function (canvas) {
     };
 };
 exports.createChartDestination = createChartDestination;
+/** @ignore */
 var getMasterCanvas = function () {
     /** @ignore */
     var SCICHART_MASTER_CANVAS_ID = "SciChartMasterCanvas";

package/Charting/Visuals/TextureManager/CanvasTexture.d.ts

@@ -1,6 +1,7 @@
 import { IDeletable } from "../../../Core/IDeletable";
 import { TSciChart, TSRTexture } from "../../../types/TSciChart";
 import { TSciChart3D } from "../../../types/TSciChart3D";
+import { DeletableEntity } from "../../../Core/DeletableEntity";
 /**
  * @summary The {@link CanvasTexture} is used internally to map an {@link HTMLCanvasElement} to a WebGL Texture.
  * Use this when you want to create a WebGL texture and draw on it.
@@ -24,7 +25,7 @@ import { TSciChart3D } from "../../../types/TSciChart3D";
  * canvasTexture.delete();
  * ```
  */
-export declare class CanvasTexture implements IDeletable {
+export declare class CanvasTexture extends DeletableEntity implements IDeletable {
     readonly width: number;
     readonly height: number;
     canvas: HTMLCanvasElement;

package/Charting/Visuals/TextureManager/CanvasTexture.js

@@ -1,4 +1,19 @@
 "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.CanvasTexture = void 0;
 var app_1 = require("../../../constants/app");
@@ -6,6 +21,7 @@ var Deleter_1 = require("../../../Core/Deleter");
 var colorUtil_1 = require("../../../utils/colorUtil");
 var TextureCache_1 = require("../../Drawing/TextureCache");
 var Guard_1 = require("../../../Core/Guard");
+var DeletableEntity_1 = require("../../../Core/DeletableEntity");
 /**
  * @summary The {@link CanvasTexture} is used internally to map an {@link HTMLCanvasElement} to a WebGL Texture.
  * Use this when you want to create a WebGL texture and draw on it.
@@ -29,7 +45,8 @@ var Guard_1 = require("../../../Core/Guard");
  * canvasTexture.delete();
  * ```
  */
-var CanvasTexture = /** @class */ (function () {
+var CanvasTexture = /** @class */ (function (_super) {
+    __extends(CanvasTexture, _super);
     /**
      * Creates an instance of a {@link CanvasTexture}
      * @remarks
@@ -41,28 +58,30 @@ var CanvasTexture = /** @class */ (function () {
      * @param useInterpolation The flat determines whether to useInterpolation when creating texture
      */
     function CanvasTexture(webAssemblyContext, textureWidth, textureHeight) {
-        this.width = Math.floor(textureWidth);
-        this.height = Math.floor(textureHeight);
-        Guard_1.Guard.isTrue(this.width > 0, "CanvasTexture.width must be greater than zero");
-        Guard_1.Guard.isTrue(this.height > 0, "CanvasTexture.height must be greater than zero");
+        var _this = _super.call(this) || this;
+        _this.width = Math.floor(textureWidth);
+        _this.height = Math.floor(textureHeight);
+        Guard_1.Guard.isTrue(_this.width > 0, "CanvasTexture.width must be greater than zero");
+        Guard_1.Guard.isTrue(_this.height > 0, "CanvasTexture.height must be greater than zero");
         if (!app_1.IS_TEST_ENV) {
-            this.canvas = document.createElement("canvas");
-            this.canvas.width = this.width;
-            this.canvas.height = this.height;
+            _this.canvas = document.createElement("canvas");
+            _this.canvas.width = _this.width;
+            _this.canvas.height = _this.height;
             // Uncomment to see the texture on the screen
             // document.body.appendChild(this.canvas);
         }
-        this.wasmContext = webAssemblyContext;
+        _this.wasmContext = webAssemblyContext;
         // Create UIntVector with size once
-        this.intermediateVector = new this.wasmContext.UIntVector();
-        this.intermediateVector.resize(this.height * this.width, 0);
+        _this.intermediateVector = new _this.wasmContext.UIntVector();
+        _this.intermediateVector.resize(_this.height * _this.width, 0);
         // Create UIntVector that will store initial color values
-        this.originalIntermediateVector = new this.wasmContext.UIntVector();
-        this.originalIntermediateVector.resize(this.height * this.width, 0);
-        var textureFormat = this.wasmContext.eTSRTextureFormat.TSR_TEXTUREFORMAT_A8B8G8R8;
+        _this.originalIntermediateVector = new _this.wasmContext.UIntVector();
+        _this.originalIntermediateVector.resize(_this.height * _this.width, 0);
+        var textureFormat = _this.wasmContext.eTSRTextureFormat.TSR_TEXTUREFORMAT_A8B8G8R8;
         // Create TSRTexture with size once
-        this.tsrTextureCache = new TextureCache_1.TextureCache(webAssemblyContext);
-        this.tsrTextureCache.create(this.width, this.height, textureFormat);
+        _this.tsrTextureCache = new TextureCache_1.TextureCache(webAssemblyContext);
+        _this.tsrTextureCache.create(_this.width, _this.height, textureFormat);
+        return _this;
     }
     /**
      * Get an HTML5 {@link CanvasRenderingContext2D} to draw on.
@@ -93,6 +112,7 @@ var CanvasTexture = /** @class */ (function () {
         this.intermediateVector = (0, Deleter_1.deleteSafe)(this.intermediateVector);
         this.originalIntermediateVector = (0, Deleter_1.deleteSafe)(this.originalIntermediateVector);
         this.tsrTextureCache = (0, Deleter_1.deleteSafe)(this.tsrTextureCache);
+        this.wasmContext = undefined;
     };
     /**
      * After you have finished drawing, copy the canvas to the destination {@link TSRTexture}
@@ -139,5 +159,5 @@ var CanvasTexture = /** @class */ (function () {
         this.wasmContext.SCRTFillTextureAbgr(tsrTexture, this.width, this.height, this.intermediateVector);
     };
     return CanvasTexture;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.CanvasTexture = CanvasTexture;