scichart 3.1.348 → 3.2.0-beta

package/Charting/ChartModifiers/SeriesSelectionModifier.js

@@ -14,6 +14,15 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeriesSelectionModifier = void 0;
 var classFactory_1 = require("../../Builder/classFactory");
@@ -171,45 +180,43 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
         }
         // Perform a hit-test on the renderable series
         var allSeries = this.getAllSeries();
-        // const hitTestInfos: HitTestInfo[] =
-        //     allSeries.map((rs, index) => {
-        //         return rs.hitTestProvider.hitTestOld(args.mousePoint,
-        //             ENearestPointLogic.NearestPoint2D,
-        //             this.hitTestRadius,
-        //             true);
-        //     });
         var hitTestInfos = allSeries.map(function (rs) {
             return rs.hitTestProvider.hitTest(args.mousePoint.x, args.mousePoint.y, _this.hitTestRadius);
         });
         try {
             // Set a flag to prevent re-entrancy
             this.preventReentrancy = true;
+            var prevHovered = __spreadArray([], this.hoveredSeries, true);
             // Deselect all series
             this.hoveredSeries = [];
             if ((hitTestInfos === null || hitTestInfos === void 0 ? void 0 : hitTestInfos.length) > 0) {
-                // Any series been hit-tested?
-                // 1. Set the isHovered flag and add to hovered array
-                hitTestInfos
+                // Any series been hit-tested? Get the nearest
+                var nearestHitTestInfo_1 = hitTestInfos
                     .filter(function (ht) { return ht.isHit; })
-                    .forEach(function (hoveredSeries) {
-                    // Setting isHovered true will cause series to raise the hoveredChanged event
-                    // This then feeds back into this.hover
-                    hoveredSeries.associatedSeries.isHovered = true;
-                    _this.hoveredSeries.push(hoveredSeries.associatedSeries);
-                });
+                    .sort(function (a, b) { return a.getEuclideanDistance() - b.getEuclideanDistance(); })[0];
+                // 1. Set the isHovered flag and add to hovered array for the nearest hitTestInfo
+                if (nearestHitTestInfo_1) {
+                    nearestHitTestInfo_1.associatedSeries.isHovered = true;
+                    this.hoveredSeries.push(nearestHitTestInfo_1.associatedSeries);
+                }
                 // 2. Series which were not hovered, set isHovered = false;
                 hitTestInfos
-                    .filter(function (ht) { return !ht.isHit && !ht.isEmpty; })
+                    .filter(function (ht) { return ht !== nearestHitTestInfo_1; })
                     .forEach(function (unhoveredSeries) {
-                    unhoveredSeries.associatedSeries.isHovered = false;
+                    if (unhoveredSeries === null || unhoveredSeries === void 0 ? void 0 : unhoveredSeries.associatedSeries) {
+                        unhoveredSeries.associatedSeries.isHovered = false;
+                    }
                 });
             }
             else {
                 // No series hit-tested, set all as un-hovered
                 allSeries.forEach(function (s) { return (s.isHovered = false); });
             }
-            // Raise the selectionChanged event
-            (_a = this.hoverChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, allSeries));
+            // Raise the hoverChanged event if something has changed
+            if (prevHovered.length !== this.hoveredSeries.length ||
+                prevHovered.some(function (s) { return !_this.hoveredSeries.includes(s); })) {
+                (_a = this.hoverChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, allSeries));
+            }
         }
         finally {
             this.preventReentrancy = false;
@@ -244,12 +251,13 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
             allSeries.forEach(function (rs) { return (rs.isSelected = false); });
             // Select the first series that has HitTestInfo.isHit = true
             if ((hitTestInfos === null || hitTestInfos === void 0 ? void 0 : hitTestInfos.length) > 0) {
-                var selected = hitTestInfos.find(function (ht) { return ht.isHit; });
-                if (selected) {
+                // Any series been hit-tested? Get the nearest
+                var nearestHitTestInfo = hitTestInfos.sort(function (a, b) { return a.getEuclideanDistance() - b.getEuclideanDistance(); })[0];
+                if (nearestHitTestInfo.isHit) {
                     // Setting isSelected true will cause series to raise the selectionChanged event
                     // This then feeds back into this.select
-                    selected.associatedSeries.isSelected = true;
-                    this.selectedSeries.push(selected.associatedSeries);
+                    nearestHitTestInfo.associatedSeries.isSelected = true;
+                    this.selectedSeries.push(nearestHitTestInfo.associatedSeries);
                 }
             }
             // Raise the selectionChanged event

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,25 @@ 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);
+        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);
+                    }
+                });
+            }
         }
+        // }
+        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;