scichart 3.1.348 → 3.2.434

package/Charting/Visuals/SciChartOverview.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++) {
@@ -49,6 +64,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SciChartOverview = void 0;
 var buildSeries_1 = require("../../Builder/buildSeries");
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var NumberRange_1 = require("../../Core/NumberRange");
 var AutoRange_1 = require("../../types/AutoRange");
 var AxisType_1 = require("../../types/AxisType");
@@ -66,14 +82,17 @@ var SciChartSurface_1 = require("./SciChartSurface");
  * @remarks
  * It is possible to specify options to customize style and behavior of the component.
  */
-var SciChartOverview = /** @class */ (function () {
+var SciChartOverview = /** @class */ (function (_super) {
+    __extends(SciChartOverview, _super);
     function SciChartOverview(parentSciChartSurface, overviewSciChartSurface, wasmContext, rangeSelectionModifier, overviewXAxis, overviewYAxis) {
-        this.overviewXAxisProperty = overviewXAxis;
-        this.overviewYAxisProperty = overviewYAxis;
-        this.rangeSelectionModifierProperty = rangeSelectionModifier;
-        this.parentSciChartSurfaceProperty = parentSciChartSurface;
-        this.overviewSciChartSurfaceProperty = overviewSciChartSurface;
-        this.overviewWasmContext = wasmContext;
+        var _this = _super.call(this) || this;
+        _this.overviewXAxisProperty = overviewXAxis;
+        _this.overviewYAxisProperty = overviewYAxis;
+        _this.rangeSelectionModifierProperty = rangeSelectionModifier;
+        _this.parentSciChartSurfaceProperty = parentSciChartSurface;
+        _this.overviewSciChartSurfaceProperty = overviewSciChartSurface;
+        _this.overviewWasmContext = wasmContext;
+        return _this;
     }
     /**
      * Creates a {@link SciChartOverview} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
@@ -153,9 +172,10 @@ var SciChartOverview = /** @class */ (function () {
     SciChartOverview.prototype.delete = function () {
         var _a;
         (_a = this.overviewSciChartSurface) === null || _a === void 0 ? void 0 : _a.delete();
+        this.overviewWasmContext = undefined;
     };
     return SciChartOverview;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.SciChartOverview = SciChartOverview;
 /** @ignore */
 var createSciChartOverview = function (originalSciChartSurface, overviewRootElement, options) { return __awaiter(void 0, void 0, void 0, function () {

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

@@ -1,4 +1,6 @@
 import { ISciChartPieDefinition } from "../../../Builder/buildSurface";
+import { DeletableEntity } from "../../../Core/DeletableEntity";
+import { EventHandler } from "../../../Core/EventHandler";
 import { IDeletable } from "../../../Core/IDeletable";
 import { ObservableArray } from "../../../Core/ObservableArray";
 import { Thickness } from "../../../Core/Thickness";
@@ -10,7 +12,7 @@ import { TTextStyle } from "../Axis/AxisCore";
 import { PieLabelProvider } from "../Axis/LabelProvider/PieLabelProvider";
 import { IEventSubscriptionItem } from "../Legend/SciChartLegendBase";
 import { SciChartPieLegend } from "../Legend/SciChartPieLegend";
-import { ISciChartSurfaceBase } from "../SciChartSurfaceBase";
+import { ISciChartSurfaceBase, TSciChartDestination } from "../SciChartSurfaceBase";
 import { IPieSurfaceOptions } from "./IPieSurfaceOptions";
 import { IPieSegment } from "./PieSegment/IPieSegment";
 export declare enum ESizingMode {
@@ -46,7 +48,7 @@ export declare enum 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.
  */
-export declare class SciChartPieSurface implements ISciChartSurfaceBase {
+export declare class SciChartPieSurface extends DeletableEntity implements ISciChartSurfaceBase {
     /**
      * Creates a {@link SciChartPieSurface} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited
@@ -75,9 +77,17 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
      */
     legend: SciChartPieLegend;
     onCreatedName: string;
+    id: string;
+    /**
+     * An event handler which notifies its subscribers when a render operation has finished. Use this
+     * to time render performance, or to update elements of the chart or your UI on redraw.
+     */
+    rendered: EventHandler<void>;
     protected widthAspect: number;
     protected heightAspect: number;
     protected labelProviderProperty: PieLabelProvider;
+    protected isDeletedProperty: boolean;
+    protected destinations: TSciChartDestination[];
     private pieTypeProperty;
     private holeRadiusProperty;
     private holeRadiusSizingModeProperty;
@@ -97,6 +107,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     private labelStyleProperty;
     private resizeSubscriptionToken;
     constructor(canvases?: TSciChartSurfaceCanvases, options?: IPieSurfaceOptions);
+    get isDeleted(): boolean;
     /**
      * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -125,6 +136,8 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
      * Used internally - gets the previous {@link IThemeProvider}
      */
     get previousThemeProvider(): IThemeProvider;
+    setDestinations(destinations: TSciChartDestination[]): void;
+    get otherSurfaces(): ISciChartSurfaceBase[];
     /**
      * 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.
@@ -137,7 +150,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     /**
      * @inheritDoc
      */
-    delete(isAnimationProgress?: boolean): void;
+    delete(): void;
     /**
      * Used Internally. Cleans up the chart internal parts, subscriptions, etc.
      */

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,20 @@ 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 EventHandler_1 = require("../../../Core/EventHandler");
+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 +97,88 @@ 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;
+        /**
+         * 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.
+         */
+        _this.rendered = new EventHandler_1.EventHandler();
+        _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 +190,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 +284,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 +323,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.
@@ -632,6 +696,7 @@ var SciChartPieSurface = /** @class */ (function () {
                 }
             });
         }
+        this.rendered.raiseEvent();
     };
     /**
      * @description Draws pie chart itself
@@ -801,7 +866,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,12 +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.
-     */
-    rendered: EventHandler<void>;
     /**
      * An event handler which notifies its subscribers when a render operation starts. Use this
      * to update elements of the chart for the current render.  Any updates made here will not trigger a subsequent render.
@@ -201,7 +167,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 +191,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 +268,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 +509,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;
     /**