scichart 3.1.348 → 3.2.434

package/Charting/ChartModifiers/YAxisDragModifier.js

@@ -22,8 +22,6 @@ var DragMode_1 = require("../../types/DragMode");
 var translate_1 = require("../../utils/translate");
 var AxisBase2D_1 = require("../Visuals/Axis/AxisBase2D");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
-var ChartModifierBase2D_2 = require("./ChartModifierBase2D");
-var ChartModifierBase2D_3 = require("./ChartModifierBase2D");
 /**
  * The YAxisDragModifier provides scaling/panning behavior for Y axis {@link AxisBase2D}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -50,6 +48,7 @@ var YAxisDragModifier = /** @class */ (function (_super) {
         _this.dragMode = DragMode_1.EDragMode.Scaling;
         _this.isClickedOverYAxis = false;
         _this.isVerticalChart = false;
+        _this.cursorStyle = CursorStyle_1.ECursorStyle.Defalut;
         _this.includedSeriesMapProperty = new Map();
         _this.dragMode = (_a = options === null || options === void 0 ? void 0 : options.dragMode) !== null && _a !== void 0 ? _a : _this.dragMode;
         (_b = options === null || options === void 0 ? void 0 : options.excludedAxisIds) === null || _b === void 0 ? void 0 : _b.forEach(function (id) {
@@ -95,12 +94,12 @@ var YAxisDragModifier = /** @class */ (function (_super) {
         if (!this.isAttached) {
             throw new Error("Should not call YAxisDragModifier.modifierMouseDown if not attached");
         }
-        if ((0, ChartModifierBase2D_2.testIsOverAxes)(this.getVerticalYAxes(), args.mousePoint)) {
+        if ((0, ChartModifierBase2D_1.testIsOverAxes)(this.getVerticalYAxes(), args.mousePoint)) {
             // Horizontal chart
             this.isVerticalChart = false;
             this.startDragging(this.getVerticalYAxes(), args);
         }
-        else if ((0, ChartModifierBase2D_2.testIsOverAxes)(this.getHorizontalYAxes(), args.mousePoint)) {
+        else if ((0, ChartModifierBase2D_1.testIsOverAxes)(this.getHorizontalYAxes(), args.mousePoint)) {
             // Vertical chart
             this.isVerticalChart = true;
             this.startDragging(this.getHorizontalYAxes(), args);
@@ -148,13 +147,13 @@ var YAxisDragModifier = /** @class */ (function (_super) {
     };
     YAxisDragModifier.prototype.updateCursor = function (mousePoint) {
         var canvas = this.parentSurface.getMainCanvas();
-        if ((0, ChartModifierBase2D_2.testIsOverAxes)(this.getVerticalYAxes(), mousePoint)) {
+        if ((0, ChartModifierBase2D_1.testIsOverAxes)(this.getVerticalYAxes(), mousePoint)) {
             if (this.cursorStyle !== CursorStyle_1.ECursorStyle.NS) {
                 canvas.style.cursor = CursorStyle_1.ECursorStyle.NS;
                 this.cursorStyle = CursorStyle_1.ECursorStyle.NS;
             }
         }
-        else if ((0, ChartModifierBase2D_2.testIsOverAxes)(this.getHorizontalYAxes(), mousePoint)) {
+        else if ((0, ChartModifierBase2D_1.testIsOverAxes)(this.getHorizontalYAxes(), mousePoint)) {
             if (this.cursorStyle !== CursorStyle_1.ECursorStyle.EW) {
                 canvas.style.cursor = CursorStyle_1.ECursorStyle.EW;
                 this.cursorStyle = CursorStyle_1.ECursorStyle.EW;
@@ -191,13 +190,13 @@ var YAxisDragModifier = /** @class */ (function (_super) {
             var xFromTrans = (0, translate_1.translateFromCanvasToSeriesViewRectX)(this.pointFrom.x, seriesViewRect);
             var isMoreThanHalf = xFromTrans <= seriesViewRect.width / 2;
             var xDelta = -(pointTo.x - this.pointFrom.x) / seriesViewRect.width;
-            (0, ChartModifierBase2D_3.scaleAxes)(this.activeAxes, this.initialVisibleRanges, xDelta, isMoreThanHalf);
+            (0, ChartModifierBase2D_1.scaleAxes)(this.activeAxes, this.initialVisibleRanges, xDelta, isMoreThanHalf);
         }
         else {
             var yFromTrans = (0, translate_1.translateFromCanvasToSeriesViewRectY)(this.pointFrom.y, seriesViewRect);
             var isMoreThanHalf = yFromTrans <= seriesViewRect.height / 2;
             var yDelta = -(pointTo.y - this.pointFrom.y) / seriesViewRect.height;
-            (0, ChartModifierBase2D_3.scaleAxes)(this.activeAxes, this.initialVisibleRanges, yDelta, isMoreThanHalf);
+            (0, ChartModifierBase2D_1.scaleAxes)(this.activeAxes, this.initialVisibleRanges, yDelta, isMoreThanHalf);
         }
     };
     YAxisDragModifier.prototype.getVerticalYAxes = function () {

package/Charting/ChartModifiers/ZoomPanModifier.d.ts

@@ -1,36 +1,21 @@
 import { IIncludeXAxis } from "../../Core/IIncludeXAxis";
 import { IIncludeYAxis } from "../../Core/IIncludeYAxis";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
-import { AxisBase2D } from "../Visuals/Axis/AxisBase2D";
-import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
+import { IChartModifierBaseOptions } from "./ChartModifierBase2D";
 import { ModifierMouseArgs } from "./ModifierMouseArgs";
+import { IPinchZoomModifierOptions, PinchZoomModifier } from "./PinchZoomModifier";
 /**
  * Options for passing to the constructor of {@link ChartModifierBase2D} derived types
  */
-export interface IZoomPanModifierOptions extends IChartModifierBaseOptions {
+export interface IZoomPanModifierOptions extends IPinchZoomModifierOptions {
     /**
-     * A list of Ids for X axis to exclude from this modifier
-     * @remarks Also see {@link ZoomPanModifier.includeXAxis} function which allows you to include or exclude an axis by instance
+     * Sets whether to enable pinch zoom behavior of {@link SciChartSurface} on touchscreen devices
      */
-    excludedXAxisIds?: string[];
-    /**
-     * A list of Ids for Y axis to exclude from this modifier
-     * @remarks Also see {@link ZoomPanModifier.includeYAxis} function which allows you to include or exclude an axis by instance
-     */
-    excludedYAxisIds?: string[];
-    /**
-     * A list of Ids for X axis to include to this modifier
-     * @remarks Also see {@link ZoomPanModifier.includeXAxis} function which allows you to include or exclude an axis by instance
-     */
-    includedXAxisIds?: string[];
-    /**
-     * A list of Ids for Y axis to include this modifier
-     * @remarks Also see {@link ZoomPanModifier.includeYAxis} function which allows you to include or exclude an axis by instance
-     */
-    includedYAxisIds?: string[];
+    enableZoom?: boolean;
 }
 /**
  * The ZoomPanModifier provides drag to pan behavior on a 2D {@link SciChartSurface}
+ * as well as pinch zoom behavior on touchscreen devices
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
  * @remarks
  *
@@ -42,15 +27,12 @@ export interface IZoomPanModifierOptions extends IChartModifierBaseOptions {
  * sciChartSurface.chartModifiers.add(new ZoomPanModifier());
  * ```
  */
-export declare class ZoomPanModifier extends ChartModifierBase2D implements IIncludeXAxis, IIncludeYAxis {
-    readonly type = EChart2DModifierType.ZoomPan;
-    private lastPoint;
-    private includedXAxisMap;
-    private includedYAxisMap;
+export declare class ZoomPanModifier extends PinchZoomModifier implements IIncludeXAxis, IIncludeYAxis {
+    readonly type: EChart2DModifierType;
     /**
-     * Stores info about active pointerdown events
+     * Sets whether to enable pinch zoom behavior of {@link SciChartSurface} on touchscreen devices
      */
-    private activeTouchEvents;
+    enableZoom: boolean;
     /**
      * Creates an instance of a ZoomPanModifier
      * @param options optional parameters to pass to the ZoomPanModifier to configure it upon construction
@@ -64,18 +46,11 @@ export declare class ZoomPanModifier extends ChartModifierBase2D implements IInc
     modifierMouseUp(args: ModifierMouseArgs): void;
     /** @inheritDoc */
     modifierPointerCancel(args: ModifierMouseArgs): void;
-    /** @inheritDoc */
-    includeXAxis(axis: AxisBase2D, isIncluded: boolean): void;
-    /** @inheritDoc */
-    includeYAxis(axis: AxisBase2D, isIncluded: boolean): void;
-    /** @inheritDoc */
-    includeAllAxes(): void;
-    /** @inheritDoc */
-    getIncludedXAxis(): AxisBase2D[];
-    /** @inheritDoc */
-    getIncludedYAxis(): AxisBase2D[];
     toJSON(): {
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };
+    protected performModifierAction(args: ModifierMouseArgs): void;
+    protected getIsActionAllowed(args: ModifierMouseArgs): boolean;
+    private performPan;
 }

package/Charting/ChartModifiers/ZoomPanModifier.js

@@ -19,12 +19,12 @@ exports.ZoomPanModifier = void 0;
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var XyDirection_1 = require("../../types/XyDirection");
 var ZoomState_1 = require("../../types/ZoomState");
-var includedAxis_1 = require("../../utils/includedAxis");
 var translate_1 = require("../../utils/translate");
 var AxisBase2D_1 = require("../Visuals/Axis/AxisBase2D");
-var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
+var PinchZoomModifier_1 = require("./PinchZoomModifier");
 /**
  * The ZoomPanModifier provides drag to pan behavior on a 2D {@link SciChartSurface}
+ * as well as pinch zoom behavior on touchscreen devices
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
  * @remarks
  *
@@ -44,148 +44,103 @@ var ZoomPanModifier = /** @class */ (function (_super) {
      */
     function ZoomPanModifier(options) {
         var _this = this;
-        var _a, _b, _c, _d;
+        var _a;
         _this = _super.call(this, options) || this;
-        _this.type = ChartModifierType_1.EChart2DModifierType.ZoomPan;
-        _this.includedXAxisMap = new Map();
-        _this.includedYAxisMap = new Map();
         /**
-         * Stores info about active pointerdown events
+         * Sets whether to enable pinch zoom behavior of {@link SciChartSurface} on touchscreen devices
          */
-        _this.activeTouchEvents = new Map();
-        if ((options === null || options === void 0 ? void 0 : options.includedXAxisIds) && (options === null || options === void 0 ? void 0 : options.excludedXAxisIds)) {
-            throw new Error("You either should use includedXAxisIds or excludedXAxisIds");
-        }
-        if ((options === null || options === void 0 ? void 0 : options.includedYAxisIds) && (options === null || options === void 0 ? void 0 : options.excludedYAxisIds)) {
-            throw new Error("You either should use includedYAxisIds or excludedYAxisIds");
-        }
-        (_a = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _a === void 0 ? void 0 : _a.forEach(function (id) {
-            _this.includedXAxisMap.set(id, true);
-        });
-        (_b = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _b === void 0 ? void 0 : _b.forEach(function (id) {
-            _this.includedYAxisMap.set(id, true);
-        });
-        (_c = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _c === void 0 ? void 0 : _c.forEach(function (id) {
-            _this.includedXAxisMap.set(id, false);
-        });
-        (_d = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _d === void 0 ? void 0 : _d.forEach(function (id) {
-            _this.includedYAxisMap.set(id, false);
-        });
+        _this.enableZoom = false;
+        _this.type = ChartModifierType_1.EChart2DModifierType.ZoomPan;
+        _this.enableZoom = (_a = options === null || options === void 0 ? void 0 : options.enableZoom) !== null && _a !== void 0 ? _a : _this.enableZoom;
         return _this;
     }
     /** @inheritDoc */
     ZoomPanModifier.prototype.modifierMouseDown = function (args) {
         // handles default browser dragging behavior when canvas was selected with Ctrl + A
         args.nativeEvent.preventDefault();
-        _super.prototype.modifierMouseDown.call(this, args);
         if (this.executeOn !== args.button) {
             return;
         }
         if (!this.isAttached) {
             throw new Error("Should not call ZoomPanModifier.modifierMouseDown if not attached");
         }
+        _super.prototype.modifierMouseDown.call(this, args);
         var translatedPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect);
         if (!translatedPoint) {
             return;
         }
-        this.activeTouchEvents.set(args.pointerId, args);
-        // prevent the execution of drag and pan for this event
-        // if it is already being performed by another pointer
-        if (this.activeTouchEvents.size > 1) {
-            return;
-        }
+        this.activePointerEvents.set(args.pointerId, args);
         this.parentSurface.setZoomState(ZoomState_1.EZoomState.UserZooming);
-        args.handled = true;
-        this.lastPoint = args.mousePoint;
     };
     /** @inheritDoc */
     ZoomPanModifier.prototype.modifierMouseMove = function (args) {
-        _super.prototype.modifierMouseMove.call(this, args);
-        this.activeTouchEvents.set(args.pointerId, args);
-        if (this.lastPoint === undefined || this.activeTouchEvents.size > 1) {
+        this.updatePointerInfo(args);
+        if (!this.previousPoint) {
             return;
         }
-        // allow drag and pan only for the first active pointer in order of event occurrence
-        var capturedPointerEvent = this.activeTouchEvents.values().next().value;
-        if (capturedPointerEvent.pointerId !== args.pointerId) {
-            return;
-        }
-        var currentPoint = args.mousePoint;
-        var xDelta = currentPoint.x - this.lastPoint.x;
-        var yDelta = this.lastPoint.y - currentPoint.y;
-        // Scroll the X,YAxis by the number of pixels since the last update
-        // TODO: SciChartSurface.SuspendUpdates around this block
-        if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
-            this.getIncludedXAxis().forEach(function (x) {
-                var delta = x.isHorizontalAxis ? xDelta : -yDelta;
-                x.scroll(x.flippedCoordinates ? -delta : delta, AxisBase2D_1.EClipMode.None);
-            });
+        // use pinch zoom if enabled and triggered
+        if (this.enableZoom && _super.prototype.getIsActionAllowed.call(this, args)) {
+            _super.prototype.performModifierAction.call(this, args);
         }
-        if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
-            this.getIncludedYAxis().forEach(function (y) {
-                var delta = y.isHorizontalAxis ? -xDelta : yDelta;
-                y.scroll(y.flippedCoordinates ? -delta : delta, AxisBase2D_1.EClipMode.None);
-            });
+        // execute pan if action was triggered
+        var isActionAllowed = this.getIsActionAllowed(args);
+        if (isActionAllowed) {
+            this.performModifierAction(args);
         }
-        this.lastPoint = currentPoint;
     };
     /** @inheritDoc */
     ZoomPanModifier.prototype.modifierMouseUp = function (args) {
         _super.prototype.modifierMouseUp.call(this, args);
-        this.lastPoint = undefined;
-        this.activeTouchEvents.delete(args.pointerId);
         // delegate drag and pan handling to the next active pointer in order of event occurrence
-        if (this.activeTouchEvents.size > 0) {
-            var nextActivePointerEvent = this.activeTouchEvents.values().next().value;
-            this.lastPoint = nextActivePointerEvent.mousePoint;
+        if (this.activePointerEvents.size > 0) {
+            var nextActivePointerEvent = this.activePointerEvents.values().next().value;
             args.target.setPointerCapture(nextActivePointerEvent.pointerId);
         }
     };
     /** @inheritDoc */
     ZoomPanModifier.prototype.modifierPointerCancel = function (args) {
         _super.prototype.modifierPointerCancel.call(this, args);
-        this.lastPoint = undefined;
-        this.activeTouchEvents.clear();
-    };
-    /** @inheritDoc */
-    ZoomPanModifier.prototype.includeXAxis = function (axis, isIncluded) {
-        this.includedXAxisMap.set(axis.id, isIncluded);
-    };
-    /** @inheritDoc */
-    ZoomPanModifier.prototype.includeYAxis = function (axis, isIncluded) {
-        this.includedYAxisMap.set(axis.id, isIncluded);
-    };
-    /** @inheritDoc */
-    ZoomPanModifier.prototype.includeAllAxes = function () {
-        this.includedXAxisMap.clear();
-    };
-    /** @inheritDoc */
-    ZoomPanModifier.prototype.getIncludedXAxis = function () {
-        return (0, includedAxis_1.getIncludedAxis)(this.parentSurface.xAxes.asArray(), this.includedXAxisMap);
-    };
-    /** @inheritDoc */
-    ZoomPanModifier.prototype.getIncludedYAxis = function () {
-        return (0, includedAxis_1.getIncludedAxis)(this.parentSurface.yAxes.asArray(), this.includedYAxisMap);
+        this.activePointerEvents.clear();
     };
     ZoomPanModifier.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {
-            includedXAxisIds: Array.from(this.includedXAxisMap.entries())
-                .filter(function (a) { return a[1]; })
-                .map(function (a) { return a[0]; }),
-            includedYAxisIds: Array.from(this.includedYAxisMap.entries())
-                .filter(function (a) { return a[1]; })
-                .map(function (a) { return a[0]; }),
-            excludedXAxisIds: Array.from(this.includedXAxisMap.entries())
-                .filter(function (a) { return !a[1]; })
-                .map(function (a) { return a[0]; }),
-            excludedYAxisIds: Array.from(this.includedYAxisMap.entries())
-                .filter(function (a) { return !a[1]; })
-                .map(function (a) { return a[0]; })
+            enableZoom: this.enableZoom
         };
         Object.assign(json.options, options);
         return json;
     };
+    ZoomPanModifier.prototype.performModifierAction = function (args) {
+        var currentPoint = args.mousePoint;
+        var xDelta = currentPoint.x - this.previousPoint.x;
+        var yDelta = this.previousPoint.y - currentPoint.y;
+        this.performPan(xDelta, yDelta);
+    };
+    ZoomPanModifier.prototype.getIsActionAllowed = function (args) {
+        // allow drag and pan only for the first active pointer in order of event occurrence
+        var capturedPointerEvent = this.activePointerEvents.values().next().value;
+        if (capturedPointerEvent.pointerId !== args.pointerId) {
+            return false;
+        }
+        return true;
+    };
+    ZoomPanModifier.prototype.performPan = function (xDelta, yDelta) {
+        // TODO unify with other similar methods in other modifiers
+        // Scroll the X,YAxis by the number of pixels since the last update
+        // TODO: SciChartSurface.SuspendUpdates around this block
+        if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
+            this.getIncludedXAxis().forEach(function (x) {
+                var delta = x.isHorizontalAxis ? xDelta : -yDelta;
+                x.scroll(x.flippedCoordinates ? -delta : delta, AxisBase2D_1.EClipMode.None);
+            });
+        }
+        if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
+            this.getIncludedYAxis().forEach(function (y) {
+                var delta = y.isHorizontalAxis ? -xDelta : yDelta;
+                y.scroll(y.flippedCoordinates ? -delta : delta, AxisBase2D_1.EClipMode.None);
+            });
+        }
+    };
     return ZoomPanModifier;
-}(ChartModifierBase2D_1.ChartModifierBase2D));
+}(PinchZoomModifier_1.PinchZoomModifier));
 exports.ZoomPanModifier = ZoomPanModifier;

package/Charting/Drawing/BaseCache.d.ts

@@ -1,10 +1,11 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { ICacheable } from "../../Core/ICacheable";
 import { IDeletable } from "../../Core/IDeletable";
 import { TSciChart } from "../../types/TSciChart";
 /**
  * @ignore
  */
-export declare abstract class BaseCache<CachedEntityType extends IDeletable> implements IDeletable, ICacheable {
+export declare abstract class BaseCache<CachedEntityType extends IDeletable> extends DeletableEntity implements IDeletable, ICacheable {
     protected webAssemblyContext: TSciChart;
     protected cachedEntity: CachedEntityType;
     /**

package/Charting/Drawing/BaseCache.js

@@ -1,23 +1,43 @@
 "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.BaseCache = void 0;
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Deleter_1 = require("../../Core/Deleter");
+var MemoryUsageHelper_1 = require("../../utils/MemoryUsageHelper");
 var WebGlRenderContext2D_1 = require("./WebGlRenderContext2D");
 /**
  * @ignore
  */
-var BaseCache = /** @class */ (function () {
+var BaseCache = /** @class */ (function (_super) {
+    __extends(BaseCache, _super);
     /**
      * Creates an instance of {@link BaseCache}
      * @param webAssemblyContext the {@link TSciChart | SciChart WebAssembly Context} containing native methods
      * and access to our underlying WebGL2 rendering engine
      */
     function BaseCache(webAssemblyContext) {
-        this.webAssemblyContext = webAssemblyContext;
+        var _this = _super.call(this) || this;
+        _this.webAssemblyContext = webAssemblyContext;
         if (webAssemblyContext) {
             // add reference of the current instance to global collection of cached resources
-            WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.add(this);
+            WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.add(_this);
         }
+        return _this;
     }
     Object.defineProperty(BaseCache.prototype, "value", {
         /**
@@ -45,12 +65,30 @@ var BaseCache = /** @class */ (function () {
      * @inheritDoc
      */
     BaseCache.prototype.delete = function () {
+        var _this = this;
         this.cachedEntity = (0, Deleter_1.deleteSafe)(this.cachedEntity);
-        if (this.webAssemblyContext) {
-            // remove reference of the current instance to global collection of cached resources
-            WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.delete(this);
+        // Is falsy if reference revoked by proxy
+        // if (this.webAssemblyContext) {
+        // remove reference of the current instance to global collection of cached resources
+        WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.delete(this);
+        try {
+            if (process.env.NODE_ENV !== "production") {
+                // resolve memory debug issue when comparing to proxy object
+                if (MemoryUsageHelper_1.MemoryUsageHelper.isMemoryUsageDebugEnabled) {
+                    WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.forEach(function (ref) {
+                        if (ref.resetCache === _this.resetCache) {
+                            WebGlRenderContext2D_1.WebGlRenderContext2D.webGlResourcesRefs.delete(ref);
+                        }
+                    });
+                }
+            }
+        }
+        catch (err) {
+            console.warn(err);
         }
+        // }
+        this.webAssemblyContext = undefined;
     };
     return BaseCache;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.BaseCache = BaseCache;

package/Charting/Drawing/RenderSurface.d.ts

@@ -8,6 +8,7 @@ export declare class RenderSurface {
     handleDraw: () => void;
     viewportSize: Size;
     readonly canvasId: string;
+    protected renderContextProperty: WebGlRenderContext2D;
     private webAssemblyContext;
     constructor(webAssemblyContext: TSciChart, size: Size, canvasId: string);
     getRenderContext(): WebGlRenderContext2D;

package/Charting/Drawing/RenderSurface.js

@@ -14,7 +14,10 @@ var RenderSurface = /** @class */ (function () {
         this.canvasId = canvasId;
     }
     RenderSurface.prototype.getRenderContext = function () {
-        return new WebGlRenderContext2D_1.WebGlRenderContext2D(this.webAssemblyContext, this.viewportSize, this.canvasId);
+        if (!this.renderContextProperty) {
+            this.renderContextProperty = new WebGlRenderContext2D_1.WebGlRenderContext2D(this.webAssemblyContext, this.viewportSize, this.canvasId);
+        }
+        return this.renderContextProperty;
     };
     // Step_2: Something is changed and it calls invalidateElement
     RenderSurface.prototype.invalidateElement = function (canvasId) {
@@ -32,6 +35,7 @@ var RenderSurface = /** @class */ (function () {
     // Step_3: TRSEngine call draw
     RenderSurface.prototype.onRenderTimeElapsed = function () {
         this.handleDraw();
+        this.renderContextProperty = undefined;
     };
     return RenderSurface;
 }());

package/Charting/Drawing/SolidBrushCache.d.ts

@@ -1,9 +1,10 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { IDeletable } from "../../Core/IDeletable";
 import { SCRTSolidBrush, TSciChart } from "../../types/TSciChart";
 /**
  * @ignore
  */
-export declare class SolidBrushCache implements IDeletable {
+export declare class SolidBrushCache extends DeletableEntity implements IDeletable {
     private webAssemblyContext;
     private color;
     private transparent;

package/Charting/Drawing/SolidBrushCache.js

@@ -1,15 +1,34 @@
 "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.SolidBrushCache = void 0;
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Deleter_1 = require("../../Core/Deleter");
 var parseColor_1 = require("../../utils/parseColor");
 // TODO: this class can be removed and its usage replaced by BrushCache class
 /**
  * @ignore
  */
-var SolidBrushCache = /** @class */ (function () {
+var SolidBrushCache = /** @class */ (function (_super) {
+    __extends(SolidBrushCache, _super);
     function SolidBrushCache(webAssemblyContext) {
-        this.webAssemblyContext = webAssemblyContext;
+        var _this = _super.call(this) || this;
+        _this.webAssemblyContext = webAssemblyContext;
+        return _this;
     }
     /**
      * Creates or fetches a new Brush with the specified color string and properties
@@ -36,7 +55,8 @@ var SolidBrushCache = /** @class */ (function () {
      */
     SolidBrushCache.prototype.delete = function () {
         this.brush = (0, Deleter_1.deleteSafe)(this.brush);
+        this.webAssemblyContext = undefined;
     };
     return SolidBrushCache;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.SolidBrushCache = SolidBrushCache;

package/Charting/Drawing/WebGlBrush.d.ts

@@ -1,10 +1,11 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { SCRTBrush } from "../../types/TSciChart";
 import { EDrawingTypes } from "./constants";
 import { IBrush2D } from "./IBrush2D";
 /**
  * The WebGLBrush is a brush for polygon fills, rectangle fills, which can be passed to SciChart's WebGL / WebAssembly graphics engine
  */
-export declare class WebGlBrush implements IBrush2D {
+export declare class WebGlBrush extends DeletableEntity implements IBrush2D {
     private scrtBrushProperty;
     /**
      * Creates an instance of WebGlBrush

package/Charting/Drawing/WebGlBrush.js

@@ -1,18 +1,37 @@
 "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.WebGlBrush = void 0;
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var Deleter_1 = require("../../Core/Deleter");
 var constants_1 = require("./constants");
 /**
  * The WebGLBrush is a brush for polygon fills, rectangle fills, which can be passed to SciChart's WebGL / WebAssembly graphics engine
  */
-var WebGlBrush = /** @class */ (function () {
+var WebGlBrush = /** @class */ (function (_super) {
+    __extends(WebGlBrush, _super);
     /**
      * Creates an instance of WebGlBrush
      * @param scrtBrush the inner {@link SCRTBrush} which can be passed to SciChart's WebAssembly WebGL engine
      */
     function WebGlBrush(scrtBrush) {
-        this.scrtBrushProperty = scrtBrush;
+        var _this = _super.call(this) || this;
+        _this.scrtBrushProperty = scrtBrush;
+        return _this;
     }
     Object.defineProperty(WebGlBrush.prototype, "scrtBrush", {
         /**
@@ -44,5 +63,5 @@ var WebGlBrush = /** @class */ (function () {
         (_a = this.scrtBrushProperty) === null || _a === void 0 ? void 0 : _a.SetOpacity(opacity);
     };
     return WebGlBrush;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.WebGlBrush = WebGlBrush;

package/Charting/Drawing/WebGlPen.d.ts

@@ -1,10 +1,11 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { SCRTPen } from "../../types/TSciChart";
 import { EDrawingTypes } from "./constants";
 import { IPen2D } from "./IPen2D";
 /**
  * The WebGlPen is a pen for polygon stroke, line strokes, which can be passed to SciChart's WebGL / WebAssembly graphics engine
  */
-export declare class WebGlPen implements IPen2D {
+export declare class WebGlPen extends DeletableEntity implements IPen2D {
     private scrtPenProperty;
     private originalColor;
     /**