scichart 3.1.348 → 3.2.0-beta

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.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 __());
+    };
+})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,19 +38,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEventListenerToPieSegment = exports.SciChartPieSurface = exports.EPieValueMode = exports.EPieType = exports.ESizingMode = void 0;
 var chartBuilder_1 = require("../../../Builder/chartBuilder");
 var classFactory_1 = require("../../../Builder/classFactory");
-var createMaster3d_1 = require("../../../Charting3D/Visuals/createMaster3d");
 var app_1 = require("../../../constants/app");
 var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
+var DeletableEntity_1 = require("../../../Core/DeletableEntity");
 var Deleter_1 = require("../../../Core/Deleter");
+var Globals_1 = require("../../../Core/Globals");
 var ObservableArray_1 = require("../../../Core/ObservableArray");
 var Rect_1 = require("../../../Core/Rect");
 var BaseType_1 = require("../../../types/BaseType");
 var SciChartSurfaceType_1 = require("../../../types/SciChartSurfaceType");
+var guid_1 = require("../../../utils/guid");
 var SciChartJSDarkTheme_1 = require("../../Themes/SciChartJSDarkTheme");
 var annotationHelpers_1 = require("../Annotations/annotationHelpers");
 var PieLabelProvider_1 = require("../Axis/LabelProvider/PieLabelProvider");
-var createMaster_1 = require("../createMaster");
-var createSingle_1 = require("../createSingle");
 var SciChartPieLegend_1 = require("../Legend/SciChartPieLegend");
 var sciChartInitCommon_1 = require("../sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
@@ -81,79 +96,83 @@ var EPieValueMode;
  * It is possible to have more than one {@link SciChartPieSurface} on screen at the same time.
  * {@link SciChartPieSurface | SciChartPieSurfaces} scale to fit the parent DIV where they are hosted. Use CSS to position the DIV.
  */
-var SciChartPieSurface = /** @class */ (function () {
+var SciChartPieSurface = /** @class */ (function (_super) {
+    __extends(SciChartPieSurface, _super);
     function SciChartPieSurface(canvases, options) {
         if (canvases === void 0) { canvases = {}; }
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        this.animate = true;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        _this = _super.call(this) || this;
+        _this.animate = true;
         /* The number of frames for the animation. Default 30.  A frame will be trigged every 20ms. */
-        this.animationFrames = 30;
-        this.pieTypeProperty = EPieType.Pie;
-        this.holeRadiusProperty = 0.5;
-        this.holeRadiusSizingModeProperty = ESizingMode.Relative;
-        this.seriesSpacingProperty = 0;
-        this.labelRadiusProperty = 1;
-        this.titleDivs = [];
-        this.sweepAnimationDone = false;
-        this.suspendUpdate = false;
-        this.themeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
-        this.previousThemeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
-        this.deletables = [];
-        this.valueModeProperty = EPieValueMode.Percentage;
-        this.labelStyleProperty = {
+        _this.animationFrames = 30;
+        _this.pieTypeProperty = EPieType.Pie;
+        _this.holeRadiusProperty = 0.5;
+        _this.holeRadiusSizingModeProperty = ESizingMode.Relative;
+        _this.seriesSpacingProperty = 0;
+        _this.labelRadiusProperty = 1;
+        _this.titleDivs = [];
+        _this.sweepAnimationDone = false;
+        _this.suspendUpdate = false;
+        _this.themeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
+        _this.previousThemeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
+        _this.deletables = [];
+        _this.valueModeProperty = EPieValueMode.Percentage;
+        _this.labelStyleProperty = {
             fontSize: 14,
             fontFamily: "Arial",
             color: "#1e323d",
             fontWeight: "bold"
         };
-        this.domChartRoot = canvases.domChartRoot;
-        this.domCanvas2D = canvases.domCanvas2D;
-        this.domSvgContainer = canvases.domSvgContainer;
-        this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
-        this.domDivContainer = canvases.domDivContainer;
-        var width = this.domCanvas2D.width;
-        var height = this.domCanvas2D.height;
-        this.viewRect = new Rect_1.Rect(0, 0, width, height);
-        this.resizeSubscriptionToken = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, this);
-        this.drawChart = this.drawChart.bind(this);
-        this.deleteInternals = this.deleteInternals.bind(this);
-        this.invalidateElement = this.invalidateElement.bind(this);
-        this.detachPieSegment = this.detachPieSegment.bind(this);
-        this.attachPieSegment = this.attachPieSegment.bind(this);
-        this.pieSegments = new ObservableArray_1.ObservableArray();
-        this.pieSegments.collectionChanged.subscribe(function (args) {
+        _this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
+        _this.domChartRoot = canvases.domChartRoot;
+        _this.domCanvas2D = canvases.domCanvas2D;
+        _this.domSvgContainer = canvases.domSvgContainer;
+        _this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
+        _this.domDivContainer = canvases.domDivContainer;
+        var width = _this.domCanvas2D.width;
+        var height = _this.domCanvas2D.height;
+        _this.viewRect = new Rect_1.Rect(0, 0, width, height);
+        _this.resizeSubscriptionToken = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, _this);
+        _this.drawChart = _this.drawChart.bind(_this);
+        _this.deleteInternals = _this.deleteInternals.bind(_this);
+        _this.invalidateElement = _this.invalidateElement.bind(_this);
+        _this.detachPieSegment = _this.detachPieSegment.bind(_this);
+        _this.attachPieSegment = _this.attachPieSegment.bind(_this);
+        _this.pieSegments = new ObservableArray_1.ObservableArray();
+        _this.pieSegments.collectionChanged.subscribe(function (args) {
             var _a, _b;
             (_a = args.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(_this.detachPieSegment);
             (_b = args.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(_this.attachPieSegment);
             // Do this only after all changes have been processed
             _this.invalidateElement();
         });
-        this.applySciChartBackground(SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground);
-        this.legend = new SciChartPieLegend_1.SciChartPieLegend();
-        this.legend.setRootDiv(this.domDivContainer);
-        this.legend.setPieSegmentArray(this.pieSegments.asArray());
-        this.legend.setInvalidateParentSurface(this.invalidateElement);
-        this.legend.setParentSurface(this);
-        this.heightAspect = (_a = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _a !== void 0 ? _a : 0;
-        this.widthAspect = (_b = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _b !== void 0 ? _b : 0;
-        this.pieTypeProperty = (_c = options === null || options === void 0 ? void 0 : options.pieType) !== null && _c !== void 0 ? _c : this.pieType;
-        this.holeRadiusProperty = (_d = options === null || options === void 0 ? void 0 : options.holeRadius) !== null && _d !== void 0 ? _d : this.holeRadius;
-        this.animate = (_e = options === null || options === void 0 ? void 0 : options.animate) !== null && _e !== void 0 ? _e : this.animate;
-        this.holeRadiusSizingModeProperty = (_f = options === null || options === void 0 ? void 0 : options.holeRadiusSizingMode) !== null && _f !== void 0 ? _f : this.holeRadiusSizingModeProperty;
-        this.seriesSpacingProperty = (_g = options === null || options === void 0 ? void 0 : options.seriesSpacing) !== null && _g !== void 0 ? _g : this.seriesSpacingProperty;
-        this.legend.showLegend = (_h = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _h !== void 0 ? _h : this.legend.showLegend;
-        this.legend.animate = (_j = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _j !== void 0 ? _j : this.legend.animate;
-        this.legend.showCheckboxes = (_k = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _k !== void 0 ? _k : this.legend.showCheckboxes;
-        this.legend.showSeriesMarkers = (_l = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _l !== void 0 ? _l : this.legend.showSeriesMarkers;
-        this.paddingProperty = (_m = options === null || options === void 0 ? void 0 : options.padding) !== null && _m !== void 0 ? _m : this.paddingProperty;
+        _this.applySciChartBackground(SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground);
+        _this.legend = new SciChartPieLegend_1.SciChartPieLegend();
+        _this.legend.setRootDiv(_this.domDivContainer);
+        _this.legend.setPieSegmentArray(_this.pieSegments.asArray());
+        _this.legend.setInvalidateParentSurface(_this.invalidateElement);
+        _this.legend.setParentSurface(_this);
+        _this.heightAspect = (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0;
+        _this.widthAspect = (_c = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _c !== void 0 ? _c : 0;
+        _this.pieTypeProperty = (_d = options === null || options === void 0 ? void 0 : options.pieType) !== null && _d !== void 0 ? _d : _this.pieType;
+        _this.holeRadiusProperty = (_e = options === null || options === void 0 ? void 0 : options.holeRadius) !== null && _e !== void 0 ? _e : _this.holeRadius;
+        _this.animate = (_f = options === null || options === void 0 ? void 0 : options.animate) !== null && _f !== void 0 ? _f : _this.animate;
+        _this.holeRadiusSizingModeProperty = (_g = options === null || options === void 0 ? void 0 : options.holeRadiusSizingMode) !== null && _g !== void 0 ? _g : _this.holeRadiusSizingModeProperty;
+        _this.seriesSpacingProperty = (_h = options === null || options === void 0 ? void 0 : options.seriesSpacing) !== null && _h !== void 0 ? _h : _this.seriesSpacingProperty;
+        _this.legend.showLegend = (_j = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _j !== void 0 ? _j : _this.legend.showLegend;
+        _this.legend.animate = (_k = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _k !== void 0 ? _k : _this.legend.animate;
+        _this.legend.showCheckboxes = (_l = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _l !== void 0 ? _l : _this.legend.showCheckboxes;
+        _this.legend.showSeriesMarkers = (_m = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _m !== void 0 ? _m : _this.legend.showSeriesMarkers;
+        _this.paddingProperty = (_o = options === null || options === void 0 ? void 0 : options.padding) !== null && _o !== void 0 ? _o : _this.paddingProperty;
         if (options === null || options === void 0 ? void 0 : options.labelProvider) {
             if (!("getSegmentText" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
                 options.labelProvider = (0, classFactory_1.createType)(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, undefined, options.labelProvider.options);
             }
         }
-        this.labelProvider = (_o = options === null || options === void 0 ? void 0 : options.labelProvider) !== null && _o !== void 0 ? _o : new PieLabelProvider_1.PieLabelProvider();
-        this.valueModeProperty = (_p = options === null || options === void 0 ? void 0 : options.valueMode) !== null && _p !== void 0 ? _p : this.valueModeProperty;
+        _this.labelProvider = (_p = options === null || options === void 0 ? void 0 : options.labelProvider) !== null && _p !== void 0 ? _p : new PieLabelProvider_1.PieLabelProvider();
+        _this.valueModeProperty = (_q = options === null || options === void 0 ? void 0 : options.valueMode) !== null && _q !== void 0 ? _q : _this.valueModeProperty;
+        return _this;
     }
     /**
      * Creates a {@link SciChartPieSurface} to occupy the div by element ID in your DOM.
@@ -165,17 +184,32 @@ var SciChartPieSurface = /** @class */ (function () {
     SciChartPieSurface.create = function (divElement, options) {
         var _a, _b;
         (0, chartBuilder_1.ensureRegistrations)();
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg, undefined, options === null || options === void 0 ? void 0 : options.touchAction);
         return new Promise(function (resolve) {
-            var conflictingRenderContextDestinations = __spreadArray(__spreadArray(__spreadArray([], createMaster_1.sciChartDestinations, true), createMaster3d_1.sciChartDestinations, true), createSingle_1.sciChartSingleDestinations, true).filter(function (destination) { return destination.sciChartSurface.domChartRoot.id === canvases.domChartRoot.id; });
+            var _a, _b, _c;
+            var conflictingRenderContextDestinations = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], Globals_1.sciChartDestinations, true), Globals_1.sciChart3DDestinations, true), Globals_1.sciChartSingleDestinations, true), Globals_1.sciChartPieDestinations, true).filter(function (destination) { return destination.sciChartSurface.domChartRoot.id === canvases.domChartRoot.id; });
             conflictingRenderContextDestinations.forEach(function (destination) { return destination.sciChartSurface.delete(); });
             options = SciChartSurfaceBase_1.SciChartSurfaceBase.resolveOptions(options);
             var scps = new SciChartPieSurface(canvases, options);
             scps.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
+            Globals_1.sciChartPieDestinations.push({
+                canvasElementId: (_a = canvases.domCanvas2D) === null || _a === void 0 ? void 0 : _a.id,
+                sciChartSurface: scps,
+                width: (_b = canvases.domCanvas2D) === null || _b === void 0 ? void 0 : _b.width,
+                height: (_c = canvases.domCanvas2D) === null || _c === void 0 ? void 0 : _c.height
+            });
+            scps.setDestinations(Globals_1.sciChartPieDestinations);
             // setTimeout is used to make function async like createSciChartSurface, to have a consistent API
             setTimeout(function () { return resolve(scps); }, 0);
         });
     };
+    Object.defineProperty(SciChartPieSurface.prototype, "isDeleted", {
+        get: function () {
+            return this.isDeletedProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SciChartPieSurface.prototype, "labelProvider", {
         /**
          * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
@@ -244,6 +278,20 @@ var SciChartPieSurface = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    SciChartPieSurface.prototype.setDestinations = function (destinations) {
+        this.destinations = destinations;
+    };
+    Object.defineProperty(SciChartPieSurface.prototype, "otherSurfaces", {
+        get: function () {
+            var _this = this;
+            if (!this.destinations) {
+                return [];
+            }
+            return this.destinations.map(function (el) { return el.sciChartSurface; }).filter(function (el2) { return el2 !== _this; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Call invalidateElement() to trigger a redraw of the {@link SciChartPieSurface}. SciChart's rendering
      * engine will schedule a redraw a the next time the renderer is free.
@@ -269,9 +317,19 @@ var SciChartPieSurface = /** @class */ (function () {
     /**
      * @inheritDoc
      */
-    SciChartPieSurface.prototype.delete = function (isAnimationProgress) {
+    SciChartPieSurface.prototype.delete = function () {
+        var _this = this;
+        var _a;
         this.deleteInternals();
+        this.legend = (0, Deleter_1.deleteSafe)(this.legend);
+        this.labelProvider = (0, Deleter_1.deleteSafe)(this.labelProvider);
         this.resizeSubscriptionToken = (0, Deleter_1.deleteSafe)(this.resizeSubscriptionToken);
+        // 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);
+        }
+        this.isDeletedProperty = true;
     };
     /**
      * Used Internally. Cleans up the chart internal parts, subscriptions, etc.
@@ -801,7 +859,7 @@ var SciChartPieSurface = /** @class */ (function () {
         this.domCanvas2D.style.background = htmlColor;
     };
     return SciChartPieSurface;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.SciChartPieSurface = SciChartPieSurface;
 /**
  * @ignore

package/Charting/Visuals/SciChartSurface.d.ts

@@ -13,14 +13,11 @@ import { TSciChart as TWasmContext } from "../../types/TSciChart";
 import { TSciChartSurfaceCanvases } from "../../types/TSciChartSurfaceCanvases";
 import { EZoomState } from "../../types/ZoomState";
 import { IChartModifierBase } from "../ChartModifiers/ChartModifierBase";
-import { RenderContext2D } from "../Drawing/RenderContext2D";
 import { RenderSurface } from "../Drawing/RenderSurface";
 import { WebGlRenderContext2D } from "../Drawing/WebGlRenderContext2D";
 import { LayoutManager } from "../LayoutManager/LayoutManager";
 import { IThemeProvider } from "../Themes/IThemeProvider";
-import { AdornerLayer } from "./Annotations/AdornerLayer";
 import { ECoordinateMode } from "./Annotations/AnnotationBase";
-import { IAnnotation } from "./Annotations/IAnnotation";
 import { AxisBase2D } from "./Axis/AxisBase2D";
 import { I2DSubSurfaceOptions, I2DSurfaceOptions } from "./I2DSurfaceOptions";
 import { IDataLabelLayoutManager } from "./RenderableSeries/DataLabels/DataLabelLayoutManager";
@@ -67,6 +64,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * @param options Optional - Optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
     static create(divElement: string | HTMLDivElement, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
+    static disposeSharedWasmContext(): void;
     /**
      * Performs a similar operation to {@link SciChartSurface.create} but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas
      * This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page.
@@ -101,7 +99,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     static useWasmLocal(): void;
     static isSubSurface(surface: SciChartSurface): surface is SciChartSubSurface;
     private static createTest;
-    readonly renderSurface: RenderSurface;
+    renderSurface: RenderSurface;
     /**
      * @summary Gets the collection of {@link IRenderableSeries} - the chart types or series on this {@link SciChartSurface}
      * @description A {@link SciChartSurface} can have zero to many {@link IRenderableSeries | RenderableSeries}.
@@ -116,32 +114,6 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * {@link AxisCore.autoRange} or call {@link SciChartSurface.zoomExtents}
      */
     readonly renderableSeries: ObservableArray<IRenderableSeries>;
-    /**
-     * @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>;
     /**
      * @summary Gets the collection of {@link AxisBase2D} - the X Axis on a {@link SciChartSurface}
      * @description A {@link SciChartSurface} can have one to many {@link AxisBase2D | XAxes}.
@@ -187,7 +159,6 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /**
      * Used internally - the {@link RenderContext2D} for drawing
      */
-    renderContext2D: RenderContext2D;
     /**
      * 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.
@@ -201,7 +172,6 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     layersOffset: number;
     stepBetweenLayers: number;
     readonly isSubSurface: boolean;
-    readonly adornerLayer: AdornerLayer;
     /**
      * Sets / Gets the clipping mode for SVG Annotations
      */
@@ -226,7 +196,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     protected chartTitleRendererProperty: IChartTitleRenderer;
     protected paddingProperty: Thickness;
     protected currentWebGlRenderContextProperty: WebGlRenderContext2D;
-    private readonly sciChartRenderer;
+    private sciChartRenderer;
     private layoutManagerProperty;
     private dataLabelLayoutManagerProperty;
     private zoomStateProperty;
@@ -303,7 +273,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /**
      * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
      */
-    get titleStyle(): Readonly<Required<TChartTitleStyle>>;
+    get titleStyle(): TChartTitleStyle;
     /**
      * Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
      * @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
@@ -544,8 +514,6 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     private attachSeries;
     private detachAxis;
     private attachAxis;
-    private detachAnnotation;
-    private attachAnnotation;
     protected onAttachSubSurface(subSurface: SciChartSubSurface): void;
     protected onDetachSubSurface(subSurface: SciChartSubSurface): void;
     /**

package/Charting/Visuals/SciChartSurface.js

@@ -86,9 +86,9 @@ var translate_1 = require("../../utils/translate");
 var ChartModifierBase_1 = require("../ChartModifiers/ChartModifierBase");
 var BatchRenderContext_1 = require("../Drawing/BatchRenderContext");
 var BrushCache_1 = require("../Drawing/BrushCache");
-var RenderContext2D_1 = require("../Drawing/RenderContext2D");
 var RenderSurface_1 = require("../Drawing/RenderSurface");
 var SolidBrushCache_1 = require("../Drawing/SolidBrushCache");
+var WebGlRenderContext2D_1 = require("../Drawing/WebGlRenderContext2D");
 var LayoutManager_1 = require("../LayoutManager/LayoutManager");
 var SciChartRenderer_1 = require("../Services/SciChartRenderer");
 var AdornerLayer_1 = require("./Annotations/AdornerLayer");
@@ -111,6 +111,8 @@ var SciChartDefaults_1 = require("./SciChartDefaults");
 var ChartTitleRenderer_1 = require("../Services/ChartTitleRenderer");
 var TextStyle_1 = require("../../types/TextStyle");
 var TextPosition_1 = require("../../types/TextPosition");
+var Globals_1 = require("../../Core/Globals");
+var createMaster3d_1 = require("../../Charting3D/Visuals/createMaster3d");
 exports.sciChartConfig = {};
 /**
  * @summary The {@link SciChartSurface} is the root 2D Chart control in SciChart's High Performance Real-time
@@ -142,6 +144,10 @@ var SciChartSurface = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b, _c, _d, _e;
         _this = _super.call(this, webAssemblyContext, options === null || options === void 0 ? void 0 : options.canvases) || this;
+        /**
+         * Used internally - the {@link RenderContext2D} for drawing
+         */
+        //public renderContext2D: RenderContext2D;
         /**
          * 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.
@@ -234,9 +240,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         _this.chartTitleRendererProperty = new ChartTitleRenderer_1.ChartTitleRenderer(_this.webAssemblyContext2D);
         _this.layoutManager = new LayoutManager_1.LayoutManager();
         // TODO: remove this
-        if (_this.domCanvas2D) {
-            _this.renderContext2D = new RenderContext2D_1.RenderContext2D(_this.domCanvas2D);
-        }
+        //if (this.domCanvas2D) {
+        //     this.renderContext2D = new RenderContext2D(this.domCanvas2D);
+        //}
         // Setup series
         _this.detachSeries = _this.detachSeries.bind(_this);
         _this.attachSeries = _this.attachSeries.bind(_this);
@@ -261,21 +267,6 @@ var SciChartSurface = /** @class */ (function (_super) {
         };
         _this.xAxes.collectionChanged.subscribe(function (arg) { return handler(arg, true); });
         _this.yAxes.collectionChanged.subscribe(function (arg) { return handler(arg, false); });
-        // 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); });
-        });
         _this.adornerLayer = new AdornerLayer_1.AdornerLayer(_this);
         _this.solidBrushCacheViewportBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         _this.solidBrushCacheCanvasBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
@@ -308,6 +299,13 @@ var SciChartSurface = /** @class */ (function (_super) {
             });
         }
     };
+    SciChartSurface.disposeSharedWasmContext = function () {
+        if (Globals_1.sciChart3DDestinations.length === 0 && Globals_1.sciChartDestinations.length === 0) {
+            (0, createMaster_1.disposeMultiChart)();
+            (0, createMaster3d_1.disposeMultiChart3d)();
+        }
+        _super.disposeSharedWasmContext.call(this);
+    };
     /**
      * Performs a similar operation to {@link SciChartSurface.create} but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas
      * This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page.
@@ -675,7 +673,7 @@ var SciChartSurface = /** @class */ (function (_super) {
      */
     SciChartSurface.prototype.invalidateElement = function () {
         // When isSuspended (see suspendUpdates() function) ignore drawing
-        if (this.isSuspended) {
+        if (this.isSuspended || this.isDeleted) {
             // Logger.log("SciChartSurface.isSuspended = true. Ignoring invalidateElement() call");
             return;
         }
@@ -701,6 +699,9 @@ var SciChartSurface = /** @class */ (function (_super) {
                 this.preRender.raiseEvent(context);
             }
             catch (err) {
+                if (err === null || err === void 0 ? void 0 : err.message) {
+                    console.error(err === null || err === void 0 ? void 0 : err.message);
+                }
                 console.error(err);
             }
             finally {
@@ -717,51 +718,47 @@ var SciChartSurface = /** @class */ (function (_super) {
             }
             else if (this.domChartRoot) {
                 console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
+                if (typeof err !== "string" && (err === null || err === void 0 ? void 0 : err.message)) {
+                    console.error(err === null || err === void 0 ? void 0 : err.message);
+                }
             }
             else {
                 // Surface the error for tests
                 throw err;
             }
         }
-        this.currentWebGlRenderContextProperty = undefined;
     };
     /**
      * @inheritDoc
      */
     SciChartSurface.prototype.delete = function (clearHtml) {
         if (clearHtml === void 0) { clearHtml = true; }
-        _super.prototype.delete.call(this);
+        if (this.isDeleted) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn("Trying to delete the surface with ID = \"".concat(this.id, ")\", which has already been deleted!"));
+            }
+            return;
+        }
         for (var _i = 0, _a = this.subChartsProperty; _i < _a.length; _i++) {
             var chart = _a[_i];
             chart.delete();
         }
         this.subChartsProperty = [];
+        this.layoutManagerProperty.sciChartSurface = undefined;
+        this.layoutManagerProperty = undefined;
         this.renderableSeries.asArray().forEach(function (rs) { return rs.delete(); });
         this.renderableSeries.clear();
         this.xAxes.asArray().forEach(function (xAxis) { return xAxis.delete(); });
         this.yAxes.asArray().forEach(function (yAxis) { return yAxis.delete(); });
-        this.modifierAnnotations.asArray().forEach(function (annotation) { return annotation.delete(); });
-        this.annotations.asArray().forEach(function (annotation) { return annotation.delete(); });
         this.solidBrushCacheViewportBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheViewportBorder);
         this.solidBrushCacheCanvasBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheCanvasBorder);
         this.watermarkProperties = (0, Deleter_1.deleteSafe)(this.watermarkProperties);
         this.watermarkPropertyPosition = (0, Deleter_1.deleteSafe)(this.watermarkPropertyPosition);
-        this.chartModifiers.asArray().forEach(function (chm) { return chm.delete(); });
         this.chartTitleRendererProperty = (0, Deleter_1.deleteSafe)(this.chartTitleRenderer);
-        if (clearHtml && this.domChartRoot) {
-            var style = this.domChartRoot.style;
-            if (style) {
-                style.background = "";
-                style.position = "";
-            }
-            if (this.domChartRoot.hasOwnProperty("replaceChildren")) {
-                // @ts-ignore
-                this.domChartRoot.replaceChildren();
-            }
-            else {
-                this.domChartRoot.innerHTML = "";
-            }
-        }
+        this.sciChartRenderer = undefined;
+        this.renderSurface = undefined;
+        this.clearRootElement(clearHtml);
+        _super.prototype.delete.call(this);
     };
     /**
      * @inheritDoc
@@ -769,8 +766,6 @@ var SciChartSurface = /** @class */ (function (_super) {
     SciChartSurface.prototype.onDpiChanged = function (args) {
         var _a, _b;
         this.renderableSeries.asArray().forEach(function (rs) { return rs.onDpiChanged(args); });
-        this.annotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
-        this.modifierAnnotations.asArray().forEach(function (a) { return a.onDpiChanged(args); });
         this.xAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
         this.yAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
         // Force a viewport size change as size-changed may not fire when parent div has width, height
@@ -1196,7 +1191,8 @@ var SciChartSurface = /** @class */ (function (_super) {
             loader: this.loaderJson,
             drawSeriesBehindAxis: this.drawSeriesBehindAxis,
             disableAspect: this.disableAspect,
-            autoColorMode: this.autoColorMode
+            autoColorMode: this.autoColorMode,
+            touchAction: this.touchActionProperty
         };
         var definition = {
             surface: options,
@@ -1244,6 +1240,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         if (options === null || options === void 0 ? void 0 : options.titleStyle) {
             this.titleStyle = options.titleStyle;
         }
+        if (options === null || options === void 0 ? void 0 : options.touchAction) {
+            this.touchActionProperty = options.touchAction;
+        }
     };
     /**
      * @inheritDoc
@@ -1338,6 +1337,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         else {
             this.doDrawingLoop();
         }
+        this.currentWebGlRenderContextProperty = (0, Deleter_1.deleteSafe)(this.currentWebGlRenderContext);
     };
     SciChartSurface.prototype.detachSeries = function (renderableSeries) {
         if (renderableSeries.type === SeriesType_1.ESeriesType.StackedColumnSeries ||
@@ -1396,8 +1396,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.invalidateElement();
     };
     SciChartSurface.prototype.detachAxis = function (axis) {
-        axis.invalidateParentCallback = undefined;
-        axis.parentSurface = undefined;
+        axis.onDetach();
         this.invalidateElement();
     };
     SciChartSurface.prototype.attachAxis = function (axis, isXAxis) {
@@ -1418,21 +1417,6 @@ var SciChartSurface = /** @class */ (function (_super) {
         axis.invalidateParentCallback = this.invalidateElement;
         this.invalidateElement();
     };
-    SciChartSurface.prototype.detachAnnotation = function (annotation) {
-        annotation.onDetach();
-        annotation.invalidateParentCallback = undefined;
-        annotation.parentSurface = undefined;
-        this.invalidateElement();
-    };
-    SciChartSurface.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();
-    };
     SciChartSurface.prototype.onAttachSubSurface = function (subSurface) {
         this.chartModifiers.asArray().forEach(function (modifier) {
             modifier.onAttachSubSurface(subSurface);
@@ -1730,11 +1714,11 @@ var SciChartSubSurface = /** @class */ (function (_super) {
     SciChartSubSurface.prototype.delete = function (clearHtml) {
         if (clearHtml === void 0) { clearHtml = true; }
         // Don't ever clear html on the parent here as it kills the drawing for all subcharts.
-        _super.prototype.delete.call(this, false);
         if (clearHtml && this.domChartRoot.contains(this.domSvgContainer)) {
             this.domChartRoot.removeChild(this.domSvgContainer);
         }
         this.backgroundFillBrushCache = (0, Deleter_1.deleteSafe)(this.backgroundFillBrushCache);
+        _super.prototype.delete.call(this, false);
     };
     SciChartSubSurface.prototype.toJSON = function (excludeData) {
         var _a;
@@ -1822,7 +1806,9 @@ var SciChartSubSurface = /** @class */ (function (_super) {
         if (alphaEnabled === void 0) { alphaEnabled = true; }
         this.backgroundProperty = background;
         if (!this.isTransparent) {
-            var renderContext = this.renderSurface.getRenderContext();
+            // const renderContext = this.renderSurface.getRenderContext();
+            // This is probably an unnecessary change, and mostly here to prevent a memory usage debug warning
+            var renderContext = new WebGlRenderContext2D_1.WebGlRenderContext2D(this.webAssemblyContext2D, this.renderSurface.viewportSize, this.renderSurface.canvasId);
             var nativeContext = renderContext.getNativeContext();
             var _a = this.parentSurface.renderSurface.viewportSize, width = _a.width, height = _a.height;
             nativeContext.SetClipRect(this.adjustedPadding.left, this.adjustedPadding.top, width - this.adjustedPadding.right - this.adjustedPadding.left, height - this.adjustedPadding.bottom - this.adjustedPadding.top);
@@ -1840,6 +1826,7 @@ var SciChartSubSurface = /** @class */ (function (_super) {
             catch (error) {
                 performanceWarnings_1.performanceWarnings.subchartBackgroundNotSimpleColor.warn();
             }
+            renderContext.delete();
         }
     };
     SciChartSubSurface.prototype.updateWrapper = function (subChartPosition) {