scichart 2.2.2417 → 3.0.0-beta.230

package/Charting/Visuals/Axis/LogarithmicAxis.js

@@ -38,8 +38,9 @@ exports.MIN_LOG_AXIS_VALUE = 0.0000000001;
 var LogarithmicAxis = /** @class */ (function (_super) {
     __extends(LogarithmicAxis, _super);
     function LogarithmicAxis(wasmContext, options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, wasmContext, options) || this;
+        _this = _super.call(this, wasmContext, options) || this;
         _this.type = AxisType_1.EAxisType.LogarithmicAxis;
         _this.logBaseProperty = 10;
         _this.tickProvider = new LogarithmicTickProvider_1.LogarithmicTickProvider(wasmContext);
@@ -76,9 +77,12 @@ var LogarithmicAxis = /** @class */ (function (_super) {
          * Gets or sets the Logarithmic Base for the axis. Defaults to 10
          */
         set: function (logBase) {
-            this.logBaseProperty = logBase;
-            this.updateLogarithmicBase(this.logBase);
-            this.notifyPropertyChanged(constants_1.PROPERTY.LOG_BASE);
+            if (this.logBaseProperty !== logBase) {
+                this.logBaseProperty = logBase;
+                this.clearCoordCalcCache();
+                this.updateLogarithmicBase(this.logBase);
+                this.notifyPropertyChanged(constants_1.PROPERTY.LOG_BASE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -273,9 +277,8 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         var min = this.visibleRange.min;
         var max = this.visibleRange.max;
         var size = this.axisLength;
-        var shouldFlip = this.isXAxis !== this.flippedCoordinatesProperty;
         var direction = this.isXAxis ? XyDirection_1.EXyDirection.XDirection : XyDirection_1.EXyDirection.YDirection;
-        return new LogarithmicCoordinateCalculator_1.LogarithmicCoordinateCalculator(this.webAssemblyContext2D, size, min, max, direction, this.logBase, shouldFlip, this.offset);
+        return new LogarithmicCoordinateCalculator_1.LogarithmicCoordinateCalculator(this.webAssemblyContext2D, size, min, max, direction, this.logBase, this.isXAxis !== this.flippedCoordinates, this.offset);
     };
     LogarithmicAxis.prototype.getMaxXRange = function () {
         var maximumRange = this.getXDataRange();

package/Charting/Visuals/Axis/NumericAxis.js

@@ -39,8 +39,9 @@ var NumericAxis = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link INumericAxisOptions} used to configure the axis at instantiation time
      */
     function NumericAxis(webAssemblyContext, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, webAssemblyContext, options) || this;
+        _this = _super.call(this, webAssemblyContext, options) || this;
         _this.type = AxisType_1.EAxisType.NumericAxis;
         _this.tickProvider = new NumericTickProvider_1.NumericTickProvider(_this.webAssemblyContext2D);
         _this.labelProvider =
@@ -56,8 +57,7 @@ var NumericAxis = /** @class */ (function (_super) {
         var max = this.visibleRange.max;
         var offset = this.offset;
         var size = this.axisLength;
-        var shouldFlip = this.isXAxis !== this.flippedCoordinatesProperty;
-        return shouldFlip
+        return this.isXAxis !== this.flippedCoordinates
             ? new FlippedNumericCoordinateCalculator_1.FlippedNumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset, this.allowFastMath)
             : new NumericCoordinateCalculator_1.NumericCoordinateCalculator(this.webAssemblyContext2D, size, min, max, offset, this.allowFastMath);
     };

package/Charting/Visuals/Axis/constants.d.ts

@@ -42,6 +42,7 @@ export declare enum PROPERTY {
     TICK_TEXT_BRUSH = "TICK_TEXT_BRUSH",
     VISIBLE_RANGE = "VISIBLE_RANGE",
     VISIBLE_RANGE_LIMIT = "VISIBLE_RANGE_LIMIT",
+    VISIBLE_RANGE_SIZE_LIMIT = "VISIBLE_RANGE_SIZE_LIMIT",
     TICK_PROVIDER = "TICK_PROVIDER",
     VIEW_RECT = "VIEW_RECT",
     ZOOMEXTENTS_RANGE = "ZOOMEXTENTS_RANGE"

package/Charting/Visuals/Axis/constants.js

@@ -46,6 +46,7 @@ var PROPERTY;
     PROPERTY["TICK_TEXT_BRUSH"] = "TICK_TEXT_BRUSH";
     PROPERTY["VISIBLE_RANGE"] = "VISIBLE_RANGE";
     PROPERTY["VISIBLE_RANGE_LIMIT"] = "VISIBLE_RANGE_LIMIT";
+    PROPERTY["VISIBLE_RANGE_SIZE_LIMIT"] = "VISIBLE_RANGE_SIZE_LIMIT";
     PROPERTY["TICK_PROVIDER"] = "TICK_PROVIDER";
     PROPERTY["VIEW_RECT"] = "VIEW_RECT";
     PROPERTY["ZOOMEXTENTS_RANGE"] = "ZOOMEXTENTS_RANGE";

package/Charting/Visuals/HeatmapLegend.d.ts

@@ -0,0 +1,95 @@
+import { IDeletable } from "../../Core/IDeletable";
+import { TGradientStop } from "../../types/TGradientStop";
+import { EThemeProviderType } from "../../types/ThemeProviderType";
+import { TSciChart } from "../../types/TSciChart";
+import { IThemePartial, IThemeProvider } from "../Themes/IThemeProvider";
+import { IAxisBase2dOptions } from "./Axis/AxisBase2D";
+import { HeatmapColorMap, IHeatmapColorMapOptions } from "./RenderableSeries/HeatmapColorMap";
+import { SciChartSurface, TWebAssemblyChart } from "./SciChartSurface";
+export interface IHeatmapLegendOptions {
+    /**
+     * Optional - options applied to the yaxis used in the inner {@link SciChartSurface} in the {@link HeatmapLegend} control
+     */
+    yAxisOptions?: IAxisBase2dOptions;
+    /**
+     * Optional - The theme applied to the inner {@link SciChartSurface} 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}
+     */
+    theme?: IThemeProvider | ({
+        type: string | EThemeProviderType;
+    } & IThemePartial);
+    /**
+     * The {@link HeatmapColorMap} instance, which maps heatmap z-values to colors
+     * or an {@link IHeatmapColorMapOptions} object which will be used to build a HeatmapColorMap
+     */
+    colorMap?: HeatmapColorMap | IHeatmapColorMapOptions;
+}
+export declare type THeatmapLegend = {
+    wasmContext: TSciChart;
+    heatmapLegend: HeatmapLegend;
+};
+/**
+ * @summary The HeatmapLegend displays a control which hosts a {@link SciChartSurface} in a specific Div on the chart.
+ * The legend contains a gradient fill and can be used in conjunction with {@link UniformHeatmapRenderableSeries},
+ * {@link NonUniformHeatmapRenderableSeries} or {@link SurfaceMeshRenderableSeries3D} to allow the user to see what colors map
+ * to what values on the heatmap or surface.
+ * @remarks This control will expand to fit its parent Div. Suggest placing the div to the right and floating 100px wide to
+ * create a good effect.
+ */
+export declare class HeatmapLegend implements IDeletable {
+    /**
+     * Asynchronously creates a {@link HeatmapLegend} and @link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
+     * @remarks This method is async and must be awaited
+     * @param divElement The Div Element ID or reference where the {@link HeatmapLegend} will reside
+     * @param options Optional - Optional parameters for chart creation. See {@link IHeatmapLegendOptions} for more details
+     */
+    static create(divElement: string | HTMLDivElement, options?: IHeatmapLegendOptions): Promise<THeatmapLegend>;
+    private readonly SIZE;
+    private readonly wasmContext;
+    private sciChartSurface;
+    /**
+     * Creates a new HeatmapLegend wrapping a SciChartSurface. Use the {@link HeatmapLegend.create()} function to create this asynchronously
+     * @param sciChartSurface
+     * @param options
+     */
+    constructor(sciChartSurface: SciChartSurface, options?: IHeatmapLegendOptions);
+    /**
+     * Deletes the {@link HeatmapLegend} control, its {@link innerSciChartSurface} and all associated webassembly memory
+     */
+    delete(): void;
+    /**
+     * Returns the inner {@link SciChartSurface} which renders the heatmap legend
+     */
+    get innerSciChartSurface(): TWebAssemblyChart;
+    /**
+     * Gets the default {@link TGradientStop | GradientStops} to apply to the inner {@link SciChartSurface}
+     * @protected
+     */
+    getDefaultGradientStops(): TGradientStop[];
+    /**
+     * Gets the default options to apply to the inner {@link SciChartSurface} xAxis. Must conform to {@link IAxisBase2dOptions} interface
+     * @protected
+     */
+    getDefaultXAxisOptions(): {
+        drawMajorGridLines: boolean;
+        drawMinorGridLines: boolean;
+        drawMajorTickLines: boolean;
+        drawMinorTickLines: boolean;
+        drawLabels: boolean;
+    };
+    /**
+     * Gets the default options to apply to the inner {@link SciChartSurface} yAxis. Must conform to {@link IAxisBase2dOptions} interface
+     * @protected
+     */
+    getDefaultYAxisOptions(): {
+        maxAutoTicks: number;
+        drawMajorGridLines: boolean;
+        drawMinorGridLines: boolean;
+        drawLabels: boolean;
+        drawMajorTickLines: boolean;
+        drawMinorTickLines: boolean;
+    };
+    getZValues(minimum: number, maximum: number): number[][];
+}

package/Charting/Visuals/HeatmapLegend.js

@@ -0,0 +1,192 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatmapLegend = void 0;
+var Guard_1 = require("../../Core/Guard");
+var NumberRange_1 = require("../../Core/NumberRange");
+var zeroArray2D_1 = require("../../utils/zeroArray2D");
+var UniformHeatmapDataSeries_1 = require("../Model/UniformHeatmapDataSeries");
+var NumericAxis_1 = require("./Axis/NumericAxis");
+var HeatmapColorMap_1 = require("./RenderableSeries/HeatmapColorMap");
+var UniformHeatmapRenderableSeries_1 = require("./RenderableSeries/UniformHeatmapRenderableSeries");
+var SciChartSurface_1 = require("./SciChartSurface");
+var Deleter_1 = require("../../Core/Deleter");
+/**
+ * @summary The HeatmapLegend displays a control which hosts a {@link SciChartSurface} in a specific Div on the chart.
+ * The legend contains a gradient fill and can be used in conjunction with {@link UniformHeatmapRenderableSeries},
+ * {@link NonUniformHeatmapRenderableSeries} or {@link SurfaceMeshRenderableSeries3D} to allow the user to see what colors map
+ * to what values on the heatmap or surface.
+ * @remarks This control will expand to fit its parent Div. Suggest placing the div to the right and floating 100px wide to
+ * create a good effect.
+ */
+var HeatmapLegend = /** @class */ (function () {
+    /**
+     * Creates a new HeatmapLegend wrapping a SciChartSurface. Use the {@link HeatmapLegend.create()} function to create this asynchronously
+     * @param sciChartSurface
+     * @param options
+     */
+    function HeatmapLegend(sciChartSurface, options) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.SIZE = 100;
+        Guard_1.Guard.notNull(sciChartSurface, "sciChartSurface");
+        this.sciChartSurface = sciChartSurface;
+        this.wasmContext = sciChartSurface.webAssemblyContext2D;
+        var minimum = (_b = (_a = options === null || options === void 0 ? void 0 : options.colorMap) === null || _a === void 0 ? void 0 : _a.minimum) !== null && _b !== void 0 ? _b : 0;
+        var maximum = (_d = (_c = options === null || options === void 0 ? void 0 : options.colorMap) === null || _c === void 0 ? void 0 : _c.maximum) !== null && _d !== void 0 ? _d : 100;
+        var gradientStops = (_f = (_e = options === null || options === void 0 ? void 0 : options.colorMap) === null || _e === void 0 ? void 0 : _e.gradientStops) !== null && _f !== void 0 ? _f : this.getDefaultGradientStops();
+        // Add an XAxis and YAxis. Ensure properties are set via options
+        sciChartSurface.xAxes.add(new NumericAxis_1.NumericAxis(this.wasmContext, __assign({}, this.getDefaultXAxisOptions())));
+        sciChartSurface.yAxes.add(new NumericAxis_1.NumericAxis(this.wasmContext, __assign(__assign(__assign({}, this.getDefaultYAxisOptions()), options === null || options === void 0 ? void 0 : options.yAxisOptions), { visibleRange: new NumberRange_1.NumberRange(minimum, maximum) })));
+        // Create a 1D array of size 100, 1. This will be filled with values from 0...99 which will
+        // be mapped to colours according to the colorMap below.
+        var zValues = this.getZValues(minimum, maximum);
+        // Add a heatmap with 1D data. This contains a 1x100 array of values equal to 0...99.
+        // the values are mapped ot a colormap with the same gradient stops as the 3d chart. result is a 3d chart heat legend
+        sciChartSurface.renderableSeries.add(new UniformHeatmapRenderableSeries_1.UniformHeatmapRenderableSeries(this.wasmContext, {
+            dataSeries: new UniformHeatmapDataSeries_1.UniformHeatmapDataSeries(this.wasmContext, {
+                xStart: 0,
+                xStep: 1,
+                yStart: minimum,
+                yStep: (maximum - minimum) / this.SIZE,
+                zValues: zValues
+            }),
+            useLinearTextureFiltering: true,
+            colorMap: (_g = options === null || options === void 0 ? void 0 : options.colorMap) !== null && _g !== void 0 ? _g : new HeatmapColorMap_1.HeatmapColorMap({
+                minimum: minimum,
+                maximum: maximum,
+                gradientStops: gradientStops
+            })
+        }));
+    }
+    /**
+     * Asynchronously creates a {@link HeatmapLegend} and @link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
+     * @remarks This method is async and must be awaited
+     * @param divElement The Div Element ID or reference where the {@link HeatmapLegend} will reside
+     * @param options Optional - Optional parameters for chart creation. See {@link IHeatmapLegendOptions} for more details
+     */
+    HeatmapLegend.create = function (divElement, options) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, sciChartSurface, wasmContext, heatmapLegend;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, SciChartSurface_1.SciChartSurface.create(divElement, {
+                            theme: options === null || options === void 0 ? void 0 : options.theme
+                        })];
+                    case 1:
+                        _a = _b.sent(), sciChartSurface = _a.sciChartSurface, wasmContext = _a.wasmContext;
+                        heatmapLegend = new HeatmapLegend(sciChartSurface, options);
+                        return [2 /*return*/, { wasmContext: wasmContext, heatmapLegend: heatmapLegend }];
+                }
+            });
+        });
+    };
+    /**
+     * Deletes the {@link HeatmapLegend} control, its {@link innerSciChartSurface} and all associated webassembly memory
+     */
+    HeatmapLegend.prototype.delete = function () {
+        this.sciChartSurface = (0, Deleter_1.deleteSafe)(this.sciChartSurface);
+    };
+    Object.defineProperty(HeatmapLegend.prototype, "innerSciChartSurface", {
+        /**
+         * Returns the inner {@link SciChartSurface} which renders the heatmap legend
+         */
+        get: function () {
+            return { sciChartSurface: this.sciChartSurface, wasmContext: this.wasmContext };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Gets the default {@link TGradientStop | GradientStops} to apply to the inner {@link SciChartSurface}
+     * @protected
+     */
+    HeatmapLegend.prototype.getDefaultGradientStops = function () {
+        return [
+            { offset: 1, color: "Red" },
+            { offset: 0, color: "Blue" }
+        ];
+    };
+    /**
+     * Gets the default options to apply to the inner {@link SciChartSurface} xAxis. Must conform to {@link IAxisBase2dOptions} interface
+     * @protected
+     */
+    HeatmapLegend.prototype.getDefaultXAxisOptions = function () {
+        return {
+            drawMajorGridLines: false,
+            drawMinorGridLines: false,
+            drawMajorTickLines: false,
+            drawMinorTickLines: false,
+            drawLabels: false
+        };
+    };
+    /**
+     * Gets the default options to apply to the inner {@link SciChartSurface} yAxis. Must conform to {@link IAxisBase2dOptions} interface
+     * @protected
+     */
+    HeatmapLegend.prototype.getDefaultYAxisOptions = function () {
+        return {
+            maxAutoTicks: 5,
+            drawMajorGridLines: false,
+            drawMinorGridLines: false,
+            drawLabels: true,
+            drawMajorTickLines: true,
+            drawMinorTickLines: true
+        };
+    };
+    HeatmapLegend.prototype.getZValues = function (minimum, maximum) {
+        var legendHeatmapData = (0, zeroArray2D_1.zeroArray2D)([this.SIZE, 1]);
+        var step = (maximum - minimum) / (this.SIZE - 1);
+        for (var i = 0, j = minimum; i < this.SIZE; i++, j += step) {
+            legendHeatmapData[i][0] = j;
+        }
+        return legendHeatmapData;
+    };
+    return HeatmapLegend;
+}());
+exports.HeatmapLegend = HeatmapLegend;

package/Charting/Visuals/Helpers/NativeObject.d.ts

@@ -1,5 +1,6 @@
 import { IDeletable } from "../../../Core/IDeletable";
-import { SCRTColorVertex, SCRTRectVertex, TSciChart, VectorColorVertex, VectorRectVertex } from "../../../types/TSciChart";
+import { SCRTColorVertex, SCRTFontKey, SCRTRectVertex, TSciChart, TSRTextBounds, TSRVector4, VectorColorVertex, VectorRectVertex } from "../../../types/TSciChart";
+import { TTextStyle } from "../Axis/AxisCore";
 export declare const freeCache: (wasmContext: TSciChart) => IDeletable;
 /**
  * Returns an empty vector of Rectangles
@@ -9,5 +10,17 @@ export declare const freeCache: (wasmContext: TSciChart) => IDeletable;
  */
 export declare const getVectorRectVertex: (wasmContext: TSciChart, maxSize?: number) => VectorRectVertex;
 export declare const getVectorColorVertex: (wasmContext: TSciChart, maxSize?: number) => VectorColorVertex;
-export declare const getVertex: (wasmContext: TSciChart, x: number, y: number) => SCRTColorVertex;
+export declare const getVertex: (wasmContext: TSciChart, x: number, y: number, colour?: number) => SCRTColorVertex;
+export declare const getTextBounds: (wasmContext: TSciChart) => TSRTextBounds;
 export declare const getNativeRect: (wasmContext: TSciChart, xTopLeft: number, yTopLeft: number, xBottomRight: number, yBottomRight: number) => SCRTRectVertex;
+export declare const getVector4: (wasmContext: TSciChart, x: number, y: number, z: number, w: number) => TSRVector4;
+/**
+ * get a fontKey required to aquire a native font
+ * @param webAssemblyContext
+ * @param labelStyle
+ * @param transformed set true to get an alternative instance of the font which can be used multiple times while transformations are in effect,
+ * without disrupting global font rendering
+ * @returns
+ */
+export declare const getFontKey: (webAssemblyContext: TSciChart, labelStyle: TTextStyle, advanced?: boolean, transformed?: boolean) => SCRTFontKey;
+export declare const getAllFontKeys: (webAssemblyContext: TSciChart) => SCRTFontKey[];

package/Charting/Visuals/Helpers/NativeObject.js

@@ -1,18 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNativeRect = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = void 0;
+exports.getAllFontKeys = exports.getFontKey = exports.getVector4 = exports.getNativeRect = exports.getTextBounds = exports.getVertex = exports.getVectorColorVertex = exports.getVectorRectVertex = exports.freeCache = void 0;
 var Deleter_1 = require("../../../Core/Deleter");
+var LabelCache_1 = require("../Axis/LabelProvider/LabelCache");
 var objectCache = new Map();
 var getCache = function (wasmContext) {
-    if (!wasmContext.canvas)
-        return undefined;
-    var canvasId = wasmContext.canvas.id;
+    var _a, _b;
+    var canvasId = (_b = (_a = wasmContext === null || wasmContext === void 0 ? void 0 : wasmContext.canvas) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "TEST";
     if (!objectCache.has(canvasId)) {
         objectCache.set(canvasId, {
             vecRects: undefined,
             vecColorVertex: undefined,
             vertex: undefined,
-            rect: undefined
+            rect: undefined,
+            vector4: undefined,
+            textBounds: undefined,
+            keyCache: new Map()
         });
     }
     return objectCache.get(canvasId);
@@ -29,6 +32,9 @@ var freeCache = function (wasmContext) {
                 (0, Deleter_1.deleteSafe)(cache.vecColorVertex);
                 (0, Deleter_1.deleteSafe)(cache.vertex);
                 (0, Deleter_1.deleteSafe)(cache.rect);
+                (0, Deleter_1.deleteSafe)(cache.vector4);
+                (0, Deleter_1.deleteSafe)(cache.textBounds);
+                cache.keyCache.forEach(function (key) { return (0, Deleter_1.deleteSafe)(key); });
             }
             objectCache.delete(canvasId);
         }
@@ -71,7 +77,7 @@ var getVectorColorVertex = function (wasmContext, maxSize) {
     return vecColorVertex;
 };
 exports.getVectorColorVertex = getVectorColorVertex;
-var getVertex = function (wasmContext, x, y) {
+var getVertex = function (wasmContext, x, y, colour) {
     var cache = getCache(wasmContext);
     if (!cache)
         return undefined;
@@ -82,10 +88,23 @@ var getVertex = function (wasmContext, x, y) {
     }
     else {
         vertex.SetPosition(x, y);
+        vertex.m_uiColor = colour !== null && colour !== void 0 ? colour : 4294967295; // masked color
     }
     return vertex;
 };
 exports.getVertex = getVertex;
+var getTextBounds = function (wasmContext) {
+    var cache = getCache(wasmContext);
+    if (!cache)
+        return undefined;
+    var textBounds = cache.textBounds;
+    if (!textBounds) {
+        textBounds = new wasmContext.TSRTextBounds();
+        cache.textBounds = textBounds;
+    }
+    return textBounds;
+};
+exports.getTextBounds = getTextBounds;
 var getNativeRect = function (wasmContext, xTopLeft, yTopLeft, xBottomRight, yBottomRight) {
     var cache = getCache(wasmContext);
     var rect = cache.rect;
@@ -99,3 +118,50 @@ var getNativeRect = function (wasmContext, xTopLeft, yTopLeft, xBottomRight, yBo
     return rect;
 };
 exports.getNativeRect = getNativeRect;
+var getVector4 = function (wasmContext, x, y, z, w) {
+    var cache = getCache(wasmContext);
+    var vector4 = cache.vector4;
+    if (!vector4) {
+        vector4 = new wasmContext.TSRVector4(x, y, z, w);
+        cache.vector4 = vector4;
+    }
+    else {
+        vector4.Assign(x, y, z, w);
+    }
+    return vector4;
+};
+exports.getVector4 = getVector4;
+/**
+ * get a fontKey required to aquire a native font
+ * @param webAssemblyContext
+ * @param labelStyle
+ * @param transformed set true to get an alternative instance of the font which can be used multiple times while transformations are in effect,
+ * without disrupting global font rendering
+ * @returns
+ */
+var getFontKey = function (webAssemblyContext, labelStyle, advanced, transformed) {
+    if (advanced === void 0) { advanced = false; }
+    if (transformed === void 0) { transformed = false; }
+    var cache = getCache(webAssemblyContext);
+    if (!cache)
+        return undefined;
+    var keyCache = cache.keyCache;
+    var newStyle = {
+        fontFamily: labelStyle.fontFamily,
+        fontSize: labelStyle.fontSize,
+        extras: (advanced ? "advanced" : "") + (transformed ? "transformed" : ""),
+        providerId: undefined
+    };
+    var styleId = LabelCache_1.labelCache.getStyleId(newStyle);
+    if (!keyCache.has(styleId)) {
+        var fontKey = new webAssemblyContext.SCRTFontKey(labelStyle.fontFamily, labelStyle.fontSize, transformed, advanced);
+        keyCache.set(styleId, fontKey);
+    }
+    return keyCache.get(styleId);
+};
+exports.getFontKey = getFontKey;
+var getAllFontKeys = function (webAssemblyContext) {
+    var cache = getCache(webAssemblyContext);
+    return Array.from(cache.keyCache.values());
+};
+exports.getAllFontKeys = getAllFontKeys;

package/Charting/Visuals/I2DSurfaceOptions.d.ts

@@ -1,6 +1,9 @@
 import { TLayoutManagerDefinition } from "../../Builder/buildSurface";
+import { Rect } from "../../Core/Rect";
 import { Thickness } from "../../Core/Thickness";
+import { EAutoColorMode } from "../../types/AutoColorMode";
 import { TBorder } from "../../types/TBorder";
+import { ECoordinateMode } from "./Annotations/AnnotationBase";
 import { ISurfaceOptionsBase } from "./SciChartSurfaceBase";
 /**
  * Options passed to a {@link SciChartSurface} in the {@link SciChartSurface.create} function
@@ -38,4 +41,47 @@ export interface I2DSurfaceOptions extends ISurfaceOptionsBase {
      */
     canvasBorder?: TBorder;
     drawSeriesBehindAxis?: boolean;
+    /**
+     * Optional - Controls how often series colours set to AUTO_COLOR will be resolved.  Default OnAddRemoveSeries
+     */
+    autoColorMode?: EAutoColorMode;
+}
+export interface I2DSubSurfaceOptions extends I2DSurfaceOptions {
+    /**
+     * A rectangle defining the position and size of a subchart.
+     * If {@link coordinateMode} is Relative (the default) then the values give the size as a proportion of the parent div, and all properties must be between 0 and 1 inclusive.
+     * If {@link coordinateMode} is DataValue, values will be converted to coordinates using {@link parentXAxisId} and {@link parentYAxisId}. Subchart will be clpped to the parent SeriesViewRect
+     * Can only be set if this is a subChart.  See {@link addSubChart}
+     */
+    position?: Rect;
+    /** An id or div element that will wrap the subchart.  This can contain top, left, bottom and right section divs.  The chart will shrink to fit the sections  */
+    subChartContainerId?: string | HTMLDivElement;
+    /** Whether other surfaces, including the parent, will be visible underneath this surface  */
+    isTransparent?: boolean;
+    /** Sets if the subchart is visible, allowing you to hide a subchart without removing it from the parent surface */
+    isVisible?: boolean;
+    /**
+     * Sets additional absolute padding between the SciChartSubSurface and its parent, in order top, right, bottom, left
+     * {@link subPosition} is applied first, then this padding is added.
+     */
+    subChartPadding?: Thickness;
+    /**
+     * Gets or sets the {@link ECoordinateMode} used when calculating the actual position based on the {@link subPosition}
+     * Default Relative
+     */
+    coordinateMode?: ECoordinateMode;
+    /**
+     * Sets the AxisId used to determing which X Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    parentXAxisId?: string;
+    /**
+     * Sets the AxisId used to determing which Y Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    parentYAxisId?: string;
+    /**
+     * Gets or sets scale property for all sections
+     */
+    sectionScale?: number;
 }

package/Charting/Visuals/PointMarkers/BasePointMarker.d.ts

@@ -2,6 +2,7 @@ import { TPointMarkerDefinition } from "../../../Builder/buildSeries";
 import { ICacheable } from "../../../Core/ICacheable";
 import { EPointMarkerType } from "../../../types/PointMarkerType";
 import { TSciChart } from "../../../types/TSciChart";
+import { IThemeProvider } from "../../Themes/IThemeProvider";
 import { BasePointMarkerStyle } from "../RenderableSeries/Animations/BasePointMarkerStyle";
 import { CanvasTexture } from "../TextureManager/CanvasTexture";
 import { TDpiChangedEventArgs } from "../TextureManager/DpiHelper";
@@ -166,6 +167,10 @@ export declare abstract class BasePointMarker implements IPointMarker, ICacheabl
      */
     onDpiChanged(args: TDpiChangedEventArgs): void;
     /** @inheritDoc */
+    resolveAutoColors(index: number, maxSeries: number, theme: IThemeProvider): void;
+    /** @inheritDoc */
+    adjustAutoColor(propertyName: string, color: string): string;
+    /** @inheritDoc */
     resumeUpdates(): void;
     /** @inheritDoc */
     suspendUpdates(): void;

package/Charting/Visuals/PointMarkers/BasePointMarker.js

@@ -4,6 +4,7 @@ exports.BasePointMarker = void 0;
 var app_1 = require("../../../constants/app");
 var Deleter_1 = require("../../../Core/Deleter");
 var WebGlRenderContext2D_1 = require("../../Drawing/WebGlRenderContext2D");
+var IThemeProvider_1 = require("../../Themes/IThemeProvider");
 var PointMarkerStyle_1 = require("../RenderableSeries/Animations/PointMarkerStyle");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var CanvasTexture_1 = require("../TextureManager/CanvasTexture");
@@ -48,6 +49,12 @@ var BasePointMarker = /** @class */ (function () {
          * Gets or sets the point-marker fill as an HTML Color Code
          */
         get: function () {
+            if (this.fillProperty === IThemeProvider_1.AUTO_COLOR) {
+                return "#00000000";
+            }
+            if (this.fillProperty.startsWith(IThemeProvider_1.AUTO_COLOR)) {
+                return this.fillProperty.substring(IThemeProvider_1.AUTO_COLOR.length);
+            }
             return this.fillProperty;
         },
         /**
@@ -66,6 +73,12 @@ var BasePointMarker = /** @class */ (function () {
          * Gets or sets the point-marker stroke as an HTML Color Code
          */
         get: function () {
+            if (this.strokeProperty === IThemeProvider_1.AUTO_COLOR) {
+                return "#00000000";
+            }
+            if (this.strokeProperty.startsWith(IThemeProvider_1.AUTO_COLOR)) {
+                return this.strokeProperty.substring(IThemeProvider_1.AUTO_COLOR.length);
+            }
             return this.strokeProperty;
         },
         /**
@@ -268,6 +281,21 @@ var BasePointMarker = /** @class */ (function () {
         this.invalidateCache();
     };
     /** @inheritDoc */
+    BasePointMarker.prototype.resolveAutoColors = function (index, maxSeries, theme) {
+        if (this.strokeProperty.startsWith(IThemeProvider_1.AUTO_COLOR)) {
+            var color = theme.getStrokeColor(index, maxSeries, this.webAssemblyContext);
+            this.stroke = IThemeProvider_1.AUTO_COLOR + this.adjustAutoColor("stroke", color);
+        }
+        if (this.fillProperty.startsWith(IThemeProvider_1.AUTO_COLOR)) {
+            var color = theme.getFillColor(index, maxSeries, this.webAssemblyContext);
+            this.fill = IThemeProvider_1.AUTO_COLOR + this.adjustAutoColor("fill", color);
+        }
+    };
+    /** @inheritDoc */
+    BasePointMarker.prototype.adjustAutoColor = function (propertyName, color) {
+        return color;
+    };
+    /** @inheritDoc */
     BasePointMarker.prototype.resumeUpdates = function () {
         this.isUpdateSuspended = false;
         this.recreateSpriteTextures();