scichart 3.1.348 → 3.2.434

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
@@ -143,10 +145,9 @@ var SciChartSurface = /** @class */ (function (_super) {
         var _a, _b, _c, _d, _e;
         _this = _super.call(this, webAssemblyContext, options === null || options === void 0 ? void 0 : options.canvases) || this;
         /**
-         * 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.
+         * Used internally - the {@link RenderContext2D} for drawing
          */
-        _this.rendered = new EventHandler_1.EventHandler();
+        //public renderContext2D: RenderContext2D;
         /**
          * 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.
@@ -234,9 +235,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 +262,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 +294,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.
@@ -641,7 +634,7 @@ var SciChartSurface = /** @class */ (function (_super) {
      * @inheritDoc
      */
     SciChartSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) {
-        if (!pixelWidth || !pixelHeight) {
+        if (!pixelWidth || !pixelHeight || this.isDeleted) {
             return;
         }
         // Changing the viewportSize
@@ -675,7 +668,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;
         }
@@ -685,6 +678,8 @@ var SciChartSurface = /** @class */ (function (_super) {
     };
     // Step_5: Get context and pass drawing to SciChartRenderer
     SciChartSurface.prototype.doDrawingLoop = function (context) {
+        if (this.isDeleted)
+            return;
         context = context !== null && context !== void 0 ? context : this.renderSurface.getRenderContext();
         this.currentWebGlRenderContextProperty = context;
         try {
@@ -701,6 +696,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 {
@@ -716,52 +714,50 @@ var SciChartSurface = /** @class */ (function (_super) {
                 (0, NativeObject_1.freeCache)(this.webAssemblyContext2D).delete();
             }
             else if (this.domChartRoot) {
-                console.error("Error from chart in div ".concat(this.domChartRoot.id), err);
+                console.error("Error from chart in div ".concat(this.domChartRoot.id, ":"), err);
             }
             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) {
+            try {
+                if (process.env.NODE_ENV !== "production") {
+                    console.warn("Trying to delete the surface with ID = \"".concat(this.id, ")\", which has already been deleted!"));
+                }
+            }
+            catch (err) {
+                console.warn(err);
+            }
+            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 +765,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 +1190,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 +1239,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 +1336,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 +1395,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 +1416,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 +1713,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 +1805,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 +1825,7 @@ var SciChartSubSurface = /** @class */ (function (_super) {
             catch (error) {
                 performanceWarnings_1.performanceWarnings.subchartBackgroundNotSimpleColor.warn();
             }
+            renderContext.delete();
         }
     };
     SciChartSubSurface.prototype.updateWrapper = function (subChartPosition) {

package/Charting/Visuals/SciChartSurfaceBase.d.ts

@@ -1,9 +1,11 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { EventHandler } from "../../Core/EventHandler";
 import { IDeletable } from "../../Core/IDeletable";
 import { MouseManager } from "../../Core/Mouse/MouseManager";
 import { ObservableArray } from "../../Core/ObservableArray";
 import { PropertyChangedEventArgs } from "../../Core/PropertyChangedEventArgs";
 import { Rect } from "../../Core/Rect";
+import { Thickness } from "../../Core/Thickness";
 import { EThemeProviderType } from "../../types/ThemeProviderType";
 import { TSciChart } from "../../types/TSciChart";
 import { TSciChart3D } from "../../types/TSciChart3D";
@@ -11,7 +13,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 +23,7 @@ export declare type TSciChartDestination = {
     canvasElementId: string;
     width: number;
     height: number;
-    sciChartSurface: SciChartSurfaceBase;
+    sciChartSurface: ISciChartSurfaceBase;
 };
 export declare type TSciChartConfig = {
     wasmUrl?: string;
@@ -34,7 +38,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 +54,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 +87,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 +104,13 @@ 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;
+    /**
+     * 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>;
 }
 /**
  * Enum constants to specify SciChartSurface type
@@ -93,7 +132,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 +149,28 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
      * chart parts are automatically anti-aliased
      */
     static AntiAliasWebGlBackbuffer: boolean;
+    /**
+     * Defines a delay of the shared wasmContext auto-dispose if {@link autoDisposeWasmContext} is enabled.
+     */
+    static wasmContextDisposeTimeout: number;
+    /**
+     * Defines if the shared wasmContext ({@link TSciChart | WebAssembly Context}) should be deleted after all of the surfaces that use it are deleted.
+     */
+    static autoDisposeWasmContext: boolean;
+    /**
+     * Deletes the shared wasmContext ({@link TSciChart | WebAssembly Context}) used by the charts instantiated with {@link SciChartSurface.create} or {@link SciChart3DSurface.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 +200,68 @@ 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;
+    /**
+     * 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 destinations: TSciChartDestination[];
     protected themeProviderProperty: IThemeProvider;
     protected previousThemeProviderProperty: IThemeProvider;
@@ -181,11 +269,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;
@@ -280,12 +369,23 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
      * engine will schedule a redraw a the next time the renderer is free.
      */
     abstract invalidateElement(): void;
+    abstract getSeriesViewRectPadding(scaled: boolean): Thickness;
     getMainCanvas(): HTMLCanvasElement;
     /**
      * Sets the Series View {@link Rect}, a rectangle relative to the entire size of the {@link SciChartSurfaceBase}
      * @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 +409,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 +440,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 +449,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;