scichart 2.2.2417 → 3.0.0-beta.230

package/Charting/Model/XyTextDataSeries.js

@@ -0,0 +1,274 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XyTextDataSeries = void 0;
+var Guard_1 = require("../../Core/Guard");
+var NumberArray_1 = require("../../types/NumberArray");
+var appendDoubleVectorFromJsArray_1 = require("../../utils/ccall/appendDoubleVectorFromJsArray");
+var BaseDataSeries_1 = require("./BaseDataSeries");
+var IDataSeries_1 = require("./IDataSeries");
+var XyTextDataSeries = /** @class */ (function (_super) {
+    __extends(XyTextDataSeries, _super);
+    /**
+     * Creates an instance of {@link XyDataSeries}
+     * @param webAssemblyContext the {@link TSciChart | SciChart WebAssembly Context} containing native methods
+     * and access to our underlying WebGL2 WebAssembly rendering engine
+     * @param options the {@link IXyDataSeriesOptions} which can be passed to configure the DataSeries at construct time
+     */
+    function XyTextDataSeries(webAssemblyContext, options) {
+        var _this = _super.call(this, webAssemblyContext, options) || this;
+        /**
+         * @inheritDoc
+         */
+        _this.type = IDataSeries_1.EDataSeriesType.XyText;
+        _this.textValuesProperty = [];
+        if (options === null || options === void 0 ? void 0 : options.xValues) {
+            Guard_1.Guard.notNull(options.yValues, "options.yValues");
+            _this.appendRange(options.xValues, options.yValues, options.textValues, options.metadata);
+        }
+        return _this;
+    }
+    Object.defineProperty(XyTextDataSeries.prototype, "textValues", {
+        /** The text values for this series.  Manipulate using append, insert, update etc on the XyTextDataSeries  */
+        get: function () {
+            return this.textValuesProperty;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Appends a single X, Y, Text point to the DataSeries
+     * @remarks
+     * For best performance on drawing large datasets, use the {@link appendRange} method
+     *
+     * Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param x The X-value
+     * @param y The Y-value
+     * @param text The text-value
+     * @param metadata The point metadata
+     */
+    XyTextDataSeries.prototype.append = function (x, y, text, metadata) {
+        if (!this.getIsDeleted()) {
+            var nativeX = this.getNativeXValues();
+            this.dataDistributionCalculator.onAppend(this.isSorted, this.containsNaN, nativeX, [x], [y]);
+            // Push metadata should be done before push x values
+            this.appendMetadata(metadata);
+            nativeX.push_back(x);
+            this.getNativeYValues().push_back(y);
+            this.textValuesProperty.push(text);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Append, null, 1);
+        }
+    };
+    /**
+     * Appends a range of X, Y, Text points to the DataSeries
+     * @remarks
+     * This method is considerably higher performance than {@link append} which appends a single point
+     *
+     * Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param xValues The X-values
+     * @param yValues The Y-values
+     * @param textValues The text values
+     * @param metadata The array of point metadata
+     */
+    XyTextDataSeries.prototype.appendRange = function (xValues, yValues, textValues, metadata) {
+        var _a;
+        if (!this.getIsDeleted()) {
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            Guard_1.Guard.arraysSameLength(xValues, "xValues", yValues, "yValues");
+            if (metadata) {
+                Guard_1.Guard.isTrue(Array.isArray(metadata), "metadata must be an array of IPointMetadata");
+                Guard_1.Guard.arraysSameLength(xValues, "xValues", metadata, "metadata");
+            }
+            var nativeX = this.getNativeXValues();
+            var nativeY = this.getNativeYValues();
+            this.dataDistributionCalculator.onAppend(this.isSorted, this.containsNaN, nativeX, xValues, yValues);
+            // Push metadata should be done before push x values
+            this.appendMetadataRange(metadata, xValues.length);
+            // New implementation passing array from JS
+            // TODO: create indexValues from c++
+            (0, appendDoubleVectorFromJsArray_1.appendDoubleVectorFromJsArray)(this.webAssemblyContext, nativeX, xValues);
+            (0, appendDoubleVectorFromJsArray_1.appendDoubleVectorFromJsArray)(this.webAssemblyContext, nativeY, yValues);
+            (_a = this.textValuesProperty).push.apply(_a, textValues);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Append, null, xValues.length);
+        }
+    };
+    /**
+     * Updates a single Y-value by X-index
+     * @remarks Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param index the index to update
+     * @param y The new Y value
+     * @param text The new text value
+     * @param metadata The point metadata
+     */
+    XyTextDataSeries.prototype.update = function (index, y, text, metadata) {
+        if (!this.getIsDeleted()) {
+            this.validateIndex(index);
+            this.dataDistributionCalculator.onUpdate(this.isSorted, this.containsNaN, undefined, undefined, [y], index);
+            this.getNativeYValues().set(index, y);
+            this.textValuesProperty[index] = text;
+            this.setMetadataAt(index, metadata);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Update, index, 1);
+        }
+    };
+    /**
+     * Updates a single X, Y, Text value, by X-index. Might also need to set isSorted = false
+     * @remarks Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param index The index to update
+     * @param x The new X value
+     * @param y The new Y value
+     * @param text The new text value
+     * @param metadata The point metadata
+     */
+    XyTextDataSeries.prototype.updateXyText = function (index, x, y, text, metadata) {
+        if (!this.getIsDeleted()) {
+            this.validateIndex(index);
+            var nativeX = this.getNativeXValues();
+            this.dataDistributionCalculator.onUpdate(this.isSorted, this.containsNaN, nativeX, [x], [y], index);
+            nativeX.set(index, x);
+            this.getNativeYValues().set(index, y);
+            this.textValuesProperty[index] = text;
+            this.setMetadataAt(index, metadata);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Update, index, 1);
+        }
+    };
+    /**
+     * @summary Inserts a single X,Y,Text value at the start index
+     * @remarks
+     * For best performance on drawing large datasets, use the {@link insertRange} method
+     *
+     * Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param startIndex the index to insert at
+     * @param x the X value
+     * @param y the Y value
+     * @param text The new text value
+     * @param metadata The point metadata
+     */
+    XyTextDataSeries.prototype.insert = function (startIndex, x, y, text, metadata) {
+        if (!this.getIsDeleted()) {
+            this.validateIndex(startIndex, "Start index is out of range");
+            var nativeX = this.getNativeXValues();
+            var nativeY = this.getNativeYValues();
+            this.dataDistributionCalculator.onInsert(this.isSorted, this.containsNaN, nativeX, [x], [y], startIndex);
+            nativeX.insertAt(startIndex, x);
+            nativeY.insertAt(startIndex, y);
+            this.textValuesProperty.unshift(text);
+            this.insertMetadata(startIndex, metadata);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Insert, startIndex, 1);
+        }
+    };
+    /**
+     * @summary Inserts a range of X,Y values at the startIndex
+     * @remarks
+     * Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param startIndex the index to insert at
+     * @param xValues the XValues
+     * @param yValues the YValues
+     * @param textValues The text values
+     * @param metadata The array of point metadata
+     */
+    XyTextDataSeries.prototype.insertRange = function (startIndex, xValues, yValues, textValues, metadata) {
+        var _a;
+        if (!this.getIsDeleted()) {
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(xValues) || (0, NumberArray_1.isTypedArray)(xValues), "xValues must be an array of numbers");
+            Guard_1.Guard.isTrue((0, NumberArray_1.isNumberArray)(yValues) || (0, NumberArray_1.isTypedArray)(yValues), "yValues must be an array of numbers");
+            this.validateIndex(startIndex, "Start index is out of range");
+            Guard_1.Guard.arraysSameLength(xValues, "xValues", yValues, "yValues");
+            if (metadata) {
+                Guard_1.Guard.isTrue(Array.isArray(metadata), "metadata must be an array of IPointMetadata");
+                Guard_1.Guard.arraysSameLength(xValues, "xValues", metadata, "metadata");
+            }
+            var nativeX = this.getNativeXValues();
+            this.dataDistributionCalculator.onInsert(this.isSorted, this.containsNaN, nativeX, xValues, yValues, startIndex);
+            (0, appendDoubleVectorFromJsArray_1.insertDoubleVectorFromJsArray)(this.webAssemblyContext, xValues, this.getNativeXValues(), startIndex);
+            (0, appendDoubleVectorFromJsArray_1.insertDoubleVectorFromJsArray)(this.webAssemblyContext, yValues, this.getNativeYValues(), startIndex);
+            (_a = this.textValuesProperty).unshift.apply(_a, textValues);
+            this.insertMetadataRange(startIndex, metadata);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Insert, startIndex, xValues.length);
+        }
+    };
+    /**
+     * Removes an X,Y value at the specified index
+     * @remarks Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param index the index to remove at
+     */
+    XyTextDataSeries.prototype.removeAt = function (index) {
+        if (!this.getIsDeleted()) {
+            this.validateIndex(index);
+            this.getNativeXValues().removeAt(index);
+            this.getNativeYValues().removeAt(index);
+            this.textValuesProperty.splice(index, 1);
+            this.removeMetadataAt(index);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Remove, index, 1);
+        }
+    };
+    /**
+     * @summary Removes a range of X,Y values at the specified index
+     * @remarks Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     * @param startIndex the start index to remove at
+     * @param count the number of points to remove
+     */
+    XyTextDataSeries.prototype.removeRange = function (startIndex, count) {
+        if (!this.getIsDeleted()) {
+            this.validateIndex(startIndex, "Start index is out of range");
+            this.getNativeXValues().removeRange(startIndex, count);
+            this.getNativeYValues().removeRange(startIndex, count);
+            this.textValuesProperty.splice(startIndex, count);
+            this.removeMetadataRange(startIndex, count);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Remove, startIndex, count);
+        }
+    };
+    /**
+     * Clears the entire DataSeries.
+     * @remarks
+     * Note this does not free memory, WebAssembly/Native memory is released by calling {@link delete}, after which the
+     * DataSeries is no longer usable.
+     *
+     * Any changes of the DataSeries will trigger a redraw on the parent {@link SciChartSurface}
+     */
+    XyTextDataSeries.prototype.clear = function () {
+        if (!this.getIsDeleted()) {
+            _super.prototype.clear.call(this);
+            this.getNativeXValues().clear();
+            this.getNativeYValues().clear();
+            this.textValuesProperty = [];
+            this.setMetadata(undefined);
+            this.notifyDataChanged(IDataSeries_1.EDataChangeType.Clear, null, null);
+        }
+    };
+    XyTextDataSeries.prototype.toJSON = function (excludeData) {
+        if (excludeData === void 0) { excludeData = false; }
+        var json = _super.prototype.toJSON.call(this);
+        if (!excludeData) {
+            var xValues = [];
+            var yValues = [];
+            for (var i = 0; i < this.count(); i++) {
+                xValues.push(this.xValues.get(i));
+                yValues.push(this.yValues.get(i));
+            }
+            var options = {
+                xValues: xValues,
+                yValues: yValues,
+                textValues: this.textValuesProperty
+            };
+            Object.assign(json, options);
+        }
+        return json;
+    };
+    return XyTextDataSeries;
+}(BaseDataSeries_1.BaseDataSeries));
+exports.XyTextDataSeries = XyTextDataSeries;

package/Charting/Numerics/CoordinateCalculators/CoordinateCalculatorBase.d.ts

@@ -38,7 +38,7 @@ export declare abstract class CoordinateCalculatorBase implements IDeletable {
     /**
      * Gets or sets a constant offset in pixels for all generated coordinates
      */
-    readonly offset: number;
+    offset: number;
     /**
      * When true, this coordinate calculator has flipped coordinates
      */

package/Charting/Numerics/Resamplers/ExtremeResamplerHelper.js

@@ -73,7 +73,7 @@ var ExtremeResamplerHelper = /** @class */ (function () {
         if (fillBasicNativeArgs === true) {
             this.needsResampling(rp, xOriginalValues, false, true);
         }
-        // this.debugParameters(rp, this.nativeArgs);
+        //this.debugParameters(rp, this.nativeArgs);
         // What does this method do???
         var requestedSize = this.nativeResampler.UpdateIndices(indexesOut, this.xInput, yOriginalValues, this.nativeArgs.Resampling, this.nativeArgs);
         // SC-5145 Adds +1 to be sure that reserved Capacity is not less than the actual resampled count,

package/Charting/Services/RenderPassData.d.ts

@@ -6,21 +6,31 @@ import { CoordinateCalculatorBase } from "../Numerics/CoordinateCalculators/Coor
  */
 export declare class RenderPassData {
     readonly indexRange: NumberRange;
-    readonly xCoordinateCalculator: CoordinateCalculatorBase;
-    readonly yCoordinateCalculator: CoordinateCalculatorBase;
+    readonly getxCoordinateCalculator: () => CoordinateCalculatorBase;
+    readonly getyCoordinateCalculator: () => CoordinateCalculatorBase;
     readonly isVerticalChart: boolean;
     readonly pointSeries?: IPointSeries;
     readonly resamplingHash?: number;
     /**
      * Creates an instance of RenderPassData
      * @param indexRange The min and max index to data-range currently visible on the {@link SciChartSurface}
-     * @param xCoordinateCalculator The XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * @param getxCoordinateCalculator A function to get the XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
-     * @param yCoordinateCalculator The YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * @param getyCoordinateCalculator A function to get the YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
      * @param isVerticalChart A flag indicating if the chart is currently vertically arranged (XAxis on the left, YAxis on the top/bottom)
      * @param pointSeries The point series
      * @param resamplingHash The resampling hash value, used for caching
      */
-    constructor(indexRange: NumberRange, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, isVerticalChart: boolean, pointSeries?: IPointSeries, resamplingHash?: number);
+    constructor(indexRange: NumberRange, getxCoordinateCalculator: () => CoordinateCalculatorBase, getyCoordinateCalculator: () => CoordinateCalculatorBase, isVerticalChart: boolean, pointSeries?: IPointSeries, resamplingHash?: number);
+    /**
+     * Get the XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * used to transform between pixel and data-coordinates
+     */
+    get xCoordinateCalculator(): CoordinateCalculatorBase;
+    /**
+     * Get the YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * used to transform between pixel and data-coordinates
+     */
+    get yCoordinateCalculator(): CoordinateCalculatorBase;
 }

package/Charting/Services/RenderPassData.js

@@ -8,22 +8,44 @@ var RenderPassData = /** @class */ (function () {
     /**
      * Creates an instance of RenderPassData
      * @param indexRange The min and max index to data-range currently visible on the {@link SciChartSurface}
-     * @param xCoordinateCalculator The XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * @param getxCoordinateCalculator A function to get the XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
-     * @param yCoordinateCalculator The YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+     * @param getyCoordinateCalculator A function to get the YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
      * @param isVerticalChart A flag indicating if the chart is currently vertically arranged (XAxis on the left, YAxis on the top/bottom)
      * @param pointSeries The point series
      * @param resamplingHash The resampling hash value, used for caching
      */
-    function RenderPassData(indexRange, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, pointSeries, resamplingHash) {
+    function RenderPassData(indexRange, getxCoordinateCalculator, getyCoordinateCalculator, isVerticalChart, pointSeries, resamplingHash) {
         this.indexRange = indexRange;
-        this.xCoordinateCalculator = xCoordinateCalculator;
-        this.yCoordinateCalculator = yCoordinateCalculator;
+        this.getxCoordinateCalculator = getxCoordinateCalculator;
+        this.getyCoordinateCalculator = getyCoordinateCalculator;
         this.isVerticalChart = isVerticalChart;
         this.pointSeries = pointSeries;
         this.resamplingHash = resamplingHash;
     }
+    Object.defineProperty(RenderPassData.prototype, "xCoordinateCalculator", {
+        /**
+         * Get the XAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+         * used to transform between pixel and data-coordinates
+         */
+        get: function () {
+            return this.getxCoordinateCalculator();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RenderPassData.prototype, "yCoordinateCalculator", {
+        /**
+         * Get the YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
+         * used to transform between pixel and data-coordinates
+         */
+        get: function () {
+            return this.getyCoordinateCalculator();
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RenderPassData;
 }());
 exports.RenderPassData = RenderPassData;

package/Charting/Services/SciChartRenderer.d.ts

@@ -18,6 +18,7 @@ export declare class SciChartRenderer {
     private static calculateResamplingHash;
     private sciChartSurface;
     private previousTime;
+    private prevRect;
     /**
      * Creates an instance of the SciChartRenderer
      * @param sciChartSurface The {@link SciChartSurface} that we are rendering
@@ -31,7 +32,6 @@ export declare class SciChartRenderer {
     private drawRenderContextAnnotations;
     private drawSvgAnnotations;
     private validate;
-    private prevRect;
     private updateSvgCanvasSize;
     private prepareAxesRenderData;
     private prepareSeriesRenderData;
@@ -41,4 +41,5 @@ export declare class SciChartRenderer {
     private tryPerformAutoRangeOn;
     private onParentSurfaceRendered;
     private updateWatermark;
+    private getViewportRect;
 }

package/Charting/Services/SciChartRenderer.js

@@ -10,18 +10,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SciChartRenderer = void 0;
+var app_1 = require("../../constants/app");
 var Dictionary_1 = require("../../Core/Dictionary");
 var Rect_1 = require("../../Core/Rect");
 var AutoRange_1 = require("../../types/AutoRange");
 var AxisAlignment_1 = require("../../types/AxisAlignment");
-var RenderLayer_1 = require("../../types/RenderLayer");
+var DefaultRenderLayer_1 = require("../../types/DefaultRenderLayer");
 var hash_1 = require("../../utils/hash");
+var WebGlRenderContext2D_1 = require("../Drawing/WebGlRenderContext2D");
 var ResamplingParams_1 = require("../Numerics/Resamplers/ResamplingParams");
 var IAnnotation_1 = require("../Visuals/Annotations/IAnnotation");
 var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var RenderPassData_1 = require("./RenderPassData");
 var RenderPassInfo_1 = require("./RenderPassInfo");
+var SvgClippingMode_1 = require("../../types/SvgClippingMode");
 /**
  * A class used internally in SciChart to perform layout, arrangement, data-preparation and rendering on the Cartesian 2D {@link SciChartSurface}
  */
@@ -102,31 +105,39 @@ var SciChartRenderer = /** @class */ (function () {
         if (this.sciChartSurface.isDeleted) {
             return;
         }
-        // console.log("render");
+        // console.log("render start");
         var nativeContext = renderContext.getNativeContext();
         var wasmContext = this.sciChartSurface.webAssemblyContext2D;
-        var oldBlendMode = nativeContext.GetBlendMode();
-        nativeContext.SetBlendMode(wasmContext.eSCRTBlendMode.BlendAdditiveOneAlpha);
+        var oldBlendMode;
+        if (!app_1.IS_TEST_ENV) {
+            oldBlendMode = nativeContext.GetBlendMode();
+            nativeContext.SetBlendMode(wasmContext.eSCRTBlendMode.BlendAdditiveOneAlpha);
+        }
         // Step 1 validate the chart and show errors
         this.validate();
         // Animation Step
         var timeElapsed = this.previousTime ? Date.now() - this.previousTime : undefined;
         this.previousTime = Date.now();
         this.sciChartSurface.onAnimate(timeElapsed);
-        this.sciChartSurface.updateBackground();
+        renderContext.enqueueLayeredDraw(function () {
+            _this.sciChartSurface.updateBackground();
+        }, (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.sciChartSurface.layersOffset, this.sciChartSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AxisBandsLayer));
         // Step 2 autorange
         this.sciChartSurface.updateStackedCollectionAccumulatedVectors();
         this.sciChartSurface.xAxes.asArray().forEach(function (axis) { return _this.tryPerformAutoRangeOn(axis, _this.sciChartSurface); });
         this.sciChartSurface.yAxes.asArray().forEach(function (axis) { return _this.tryPerformAutoRangeOn(axis, _this.sciChartSurface); });
         // Step 3 layout
-        // console.log("viewportSize", renderContext.viewportSize);
         var seriesViewRect = this.sciChartSurface.layoutManager.layoutChart(renderContext.viewportSize);
-        this.updateSvgCanvasSize(seriesViewRect);
+        var viewportSvgRect = this.getViewportRect(renderContext.viewportSize, seriesViewRect);
+        this.sciChartSurface.setCoordSvgTranslation(seriesViewRect.x - viewportSvgRect.x, seriesViewRect.y - viewportSvgRect.y);
+        this.updateSvgCanvasSize(viewportSvgRect);
         // Step 4 prepare render data
         var _a = this.prepareAxesRenderData(), xAxesById = _a.xAxesById, yAxesById = _a.yAxesById;
         var renderPassInfo = this.prepareSeriesRenderData(seriesViewRect, xAxesById);
         // Draw seriesViewRect border
-        this.sciChartSurface.drawBorder(renderContext);
+        renderContext.enqueueLayeredDraw(function () {
+            _this.sciChartSurface.drawBorder(renderContext);
+        }, (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.sciChartSurface.layersOffset, this.sciChartSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AxisBandsLayer));
         // Step 5 Draw X, Y axis and gridlines
         if (this.sciChartSurface.debugRendering) {
             this.drawDebugAxes(this.sciChartSurface, renderContext);
@@ -137,33 +148,43 @@ var SciChartRenderer = /** @class */ (function () {
         var modifierAnnotations = this.sciChartSurface.modifierAnnotations.asArray();
         var annotations = __spreadArray(__spreadArray([], userAnnotations, true), modifierAnnotations, true);
         var renderContextAnnotations = annotations.filter(function (el) {
+            // TODO This is bad as it makes it hard to add custom renderContext annotations
             return (el.type === IAnnotation_1.EAnnotationType.RenderContextBoxAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextLineAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextHorizontalLineAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextVerticalLineAnnotation ||
-                el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation);
+                el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation ||
+                el.type === IAnnotation_1.EAnnotationType.RenderContextNativeTextAnnotation);
         });
+        var annotationsBelowLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.sciChartSurface.layersOffset, this.sciChartSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AnnotationsBelowSeriesLayer);
         renderContext.enqueueLayeredDraw(function () {
             _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
-        }, RenderLayer_1.ERenderLayer.Third);
+        }, annotationsBelowLayer);
+        var seriesLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.sciChartSurface.layersOffset, this.sciChartSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.SeriesLayer);
         // Step 7 Draw series. Queue series rendering after grid lines and bands, but before the axes
-        renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, renderPassInfo, renderContext); }, RenderLayer_1.ERenderLayer.Third);
+        renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, renderPassInfo, renderContext); }, seriesLayer);
+        var annotationsAboveLayer = (0, WebGlRenderContext2D_1.calculateAbsoluteRenderLayer)(this.sciChartSurface.layersOffset, this.sciChartSurface.stepBetweenLayers, DefaultRenderLayer_1.EDefaultRenderLayer.AnnotationsAboveSeriesLayer);
+        // Step 8 Draw annotations above the series
+        renderContext.enqueueLayeredDraw(function () {
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
+        }, annotationsAboveLayer);
         // Execute rendering of queued elements
         renderContext.drawLayers();
-        // Step 8 Draw annotations above the series
-        this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
+        renderContext.endFonts();
         // Step 9 Draw SVG or Html Overlays
         var svgAnnotations = annotations.filter(function (el) {
             return el.type === IAnnotation_1.EAnnotationType.SVG ||
                 el.type === IAnnotation_1.EAnnotationType.SVGTextAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
         });
-        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById);
+        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById, this.sciChartSurface.getCoordSvgTranslation());
         // Update watermark
         this.updateWatermark(renderContext, seriesViewRect);
         // Step 10 Call OnParentSurfaceRendered
         this.onParentSurfaceRendered();
-        nativeContext.SetBlendMode(oldBlendMode);
+        if (!app_1.IS_TEST_ENV) {
+            nativeContext.SetBlendMode(oldBlendMode);
+        }
         // Invalidate for the animations
         if (this.sciChartSurface.isRunningAnimation) {
             setTimeout(this.sciChartSurface.invalidateElement, 0);
@@ -194,7 +215,7 @@ var SciChartRenderer = /** @class */ (function () {
             }
         });
     };
-    SciChartRenderer.prototype.drawSvgAnnotations = function (annotations, xAxisById, yAxisById) {
+    SciChartRenderer.prototype.drawSvgAnnotations = function (annotations, xAxisById, yAxisById, coordSvgTranslation) {
         annotations.forEach(function (a) {
             var xAxis = xAxisById.item(a.xAxisId) || xAxisById.values[0];
             var yAxis = yAxisById.item(a.yAxisId) || yAxisById.values[0];
@@ -207,7 +228,7 @@ var SciChartRenderer = /** @class */ (function () {
                 }
                 a.showWarning = false;
             }
-            a.update(xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator());
+            a.update(xAxis.getCurrentCoordinateCalculator(), yAxis.getCurrentCoordinateCalculator(), coordSvgTranslation.x / DpiHelper_1.DpiHelper.PIXEL_RATIO, coordSvgTranslation.y / DpiHelper_1.DpiHelper.PIXEL_RATIO);
         });
     };
     SciChartRenderer.prototype.validate = function () {
@@ -267,6 +288,11 @@ var SciChartRenderer = /** @class */ (function () {
             // don't try and draw series with no data
             if (!series.isStacked && !series.dataSeries)
                 continue;
+            // don't try and draw deleted dataseries
+            if (!series.isStacked && series.dataSeries.getIsDeleted()) {
+                throw new Error("SciChartSurface.renderableSeries[index=".concat(i, "] dataSeries has been deleted. ") +
+                    "This is an invalid state for SciChart. Have you shared this DataSeries between chart surfaces?");
+            }
             // TODO: Do resampling, store result for use in drawing
             var xAxis = xAxesById.item(series.xAxisId);
             var seriesRenderPassInfo = SciChartRenderer.resampleSeries(xAxis, series, seriesViewRect);
@@ -304,10 +330,8 @@ var SciChartRenderer = /** @class */ (function () {
                 throw Error("Both x and y axes can't have vertical alignment");
             if ((0, AxisAlignment_1.getIsHorizontal)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsHorizontal)(yAxis.axisAlignment))
                 throw Error("Both x and y axes can't have horizontal alignment");
-            var xCalc = xAxis.getCurrentCoordinateCalculator();
-            var yCalc = yAxis.getCurrentCoordinateCalculator();
             try {
-                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xCalc, yCalc, xAxis.isVerticalChart, pointSeries, resamplingHash);
+                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xAxis.getCurrentCoordinateCalculator, yAxis.getCurrentCoordinateCalculator, xAxis.isVerticalChart, pointSeries, resamplingHash);
                 renderableSeries.draw(renderContext, renderPassData);
             }
             finally {
@@ -332,15 +356,27 @@ var SciChartRenderer = /** @class */ (function () {
             if (rs.isVisible && rs.isSelected)
                 drawSeriesImpl(index);
         });
+        // Perform global text layout
+        if (this.sciChartSurface.dataLabelLayoutManager) {
+            this.sciChartSurface.dataLabelLayoutManager.performTextLayout(this.sciChartSurface, renderPassInfo);
+        }
+        // Draw series text
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && rs.dataLabelProvider) {
+                rs.dataLabelProvider.draw(renderContext);
+            }
+        });
         nativeContext.PopMatrix();
         nativeContext.PopState();
     };
     SciChartRenderer.prototype.drawDebugAxes = function (scs, renderContext) {
-        scs.xAxes.asArray().forEach(function (xAxis) {
-            xAxis.drawDebug(renderContext);
-        });
-        scs.yAxes.asArray().forEach(function (yAxis) {
-            yAxis.drawDebug(renderContext);
+        renderContext.enqueueLayeredDraw(function () {
+            scs.xAxes.asArray().forEach(function (xAxis) {
+                xAxis.drawDebug(renderContext);
+            });
+            scs.yAxes.asArray().forEach(function (yAxis) {
+                yAxis.drawDebug(renderContext);
+            });
         });
     };
     SciChartRenderer.prototype.tryPerformAutoRangeOn = function (axis, sciChartSurface) {
@@ -362,19 +398,45 @@ var SciChartRenderer = /** @class */ (function () {
         }
     };
     SciChartRenderer.prototype.onParentSurfaceRendered = function () {
-        this.sciChartSurface.chartModifiers.asArray().forEach(function (cm) {
-            cm.onParentSurfaceRendered();
+        var _a;
+        if (!this.sciChartSurface.isSubSurface) {
+            this.sciChartSurface.chartModifiers.asArray().forEach(function (cm) {
+                cm.onParentSurfaceRendered();
+            });
+        }
+        // For subCharts, run this once from the parent surface, after draw has happened
+        (_a = this.sciChartSurface.subCharts) === null || _a === void 0 ? void 0 : _a.forEach(function (sc) {
+            sc.chartModifiers.asArray().forEach(function (cm) {
+                cm.onParentSurfaceRendered();
+            });
         });
         this.sciChartSurface.rendered.raiseEvent();
     };
     SciChartRenderer.prototype.updateWatermark = function (renderContext, seriesViewRect) {
-        var left = seriesViewRect.x;
+        var left = seriesViewRect.x + 5;
         var chartHeight = this.sciChartSurface.isCopyCanvasSurface
             ? SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas.height
             : renderContext.viewportSize.height;
-        var bottom = chartHeight - (seriesViewRect.top + seriesViewRect.height);
+        var bottom = chartHeight - (seriesViewRect.top + seriesViewRect.height) + 5;
         this.sciChartSurface.updateWatermark(left, bottom);
     };
+    SciChartRenderer.prototype.getViewportRect = function (viewportSize, seriesViewRect) {
+        switch (this.sciChartSurface.svgClippingMode) {
+            case SvgClippingMode_1.ESvgClippingMode.SeriesViewRect:
+                return seriesViewRect;
+            case SvgClippingMode_1.ESvgClippingMode.Chart:
+                return new Rect_1.Rect(0, 0, viewportSize.width, viewportSize.height);
+            case SvgClippingMode_1.ESvgClippingMode.SubChart:
+                var viewportRect = new Rect_1.Rect(0, 0, viewportSize.width, viewportSize.height);
+                if (this.sciChartSurface.isSubSurface) {
+                    var sub = this.sciChartSurface;
+                    viewportRect = sub.getSubChartRect();
+                }
+                return viewportRect;
+            default:
+                return seriesViewRect;
+        }
+    };
     return SciChartRenderer;
 }());
 exports.SciChartRenderer = SciChartRenderer;