scichart 3.2.0-beta → 3.2.442

package/Builder/buildSurface.d.ts

@@ -92,7 +92,7 @@ export declare type TLayoutManagerDefinition = {
  * @param divElementId The Div Element ID where the {@link SciChartSurface} will reside
  * @param definition the {@link ISciChart2DDefinition}
  */
-export declare const build2DChart: (divElementId: string, definition: ISciChart2DDefinition | string) => Promise<{
+export declare const build2DChart: (divElementId: string | HTMLDivElement, definition: ISciChart2DDefinition | string) => Promise<{
     wasmContext: TSciChart;
     sciChartSurface: SciChartSurface;
 }>;
@@ -102,5 +102,5 @@ export declare const build2DChart: (divElementId: string, definition: ISciChart2
  * @param divElementId The Div Element ID where the {@link SciChartPieSurface} will reside
  * @param definition the {@link ISciChartPieDefinition}
  */
-export declare const buildPieChart: (divElementId: string, definition: ISciChartPieDefinition | string) => Promise<SciChartPieSurface>;
+export declare const buildPieChart: (divElementId: string | HTMLDivElement, definition: ISciChartPieDefinition | string) => Promise<SciChartPieSurface>;
 export declare function configure2DSurface(definition: ISciChart2DDefinition, sciChartSurface: SciChartSurface, wasmContext: TSciChart): void;

package/Builder/chartBuilder.d.ts

@@ -22,7 +22,7 @@ export declare function chartReviver(key: string, value: any): any;
  * @param definition a {@link TSurfaceDefinition } or a string which will be parsed to it.
  * @returns
  */
-export declare const buildChart: (divElementId: string, definition: string | TSurfaceDefinition) => Promise<TWebAssemblyChart | SciChartPieSurface>;
+export declare const buildChart: (divElementId: string | HTMLDivElement, definition: string | TSurfaceDefinition) => Promise<TWebAssemblyChart | SciChartPieSurface>;
 /**
  * Configures an existing surface using a definition.
  * This is useful if you need to use the wasmContext in methods or classes you use in your definition
@@ -37,16 +37,16 @@ export declare const configureChart: (sciChartSurface: SciChartSurfaceBase, wasm
 export declare const ensureRegistrations: () => void;
 export declare const chartBuilder: {
     /** @inheritdoc */
-    buildChart: (divElementId: string, definition: string | TSurfaceDefinition) => Promise<TWebAssemblyChart | SciChartPieSurface>;
+    buildChart: (divElementId: string | HTMLDivElement, definition: string | TSurfaceDefinition) => Promise<TWebAssemblyChart | SciChartPieSurface>;
     /** @inheritdoc */
     chartReviver: typeof chartReviver;
     /** @inheritdoc */
-    build2DChart: (divElementId: string, definition: string | ISciChart2DDefinition) => Promise<{
+    build2DChart: (divElementId: string | HTMLDivElement, definition: string | ISciChart2DDefinition) => Promise<{
         wasmContext: TSciChart;
         sciChartSurface: SciChartSurface;
     }>;
     /** @inheritdoc */
-    buildPieChart: (divElementId: string, definition: string | ISciChartPieDefinition) => Promise<SciChartPieSurface>;
+    buildPieChart: (divElementId: string | HTMLDivElement, definition: string | ISciChartPieDefinition) => Promise<SciChartPieSurface>;
     /** @inheritdoc */
     configureChart: (sciChartSurface: SciChartSurfaceBase, wasmContext: TSciChart, definition: string | TSurfaceDefinition) => void;
     /** @inheritdoc */

package/Charting/ChartModifiers/ChartModifierBase.d.ts

@@ -57,7 +57,7 @@ export interface IChartModifierBase extends IThemeable, IDeletable {
      * Specifies a string ID to group modifiers.
      * @remarks When one receives a mouse event, all modifiers in the same group receive the event.
      */
-    modifierGroup: string;
+    modifierGroup: string | undefined;
     /**
      * Called when the modifier is attached to a parent {@link SciChartSurfaceBase}
      */
@@ -158,20 +158,20 @@ export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSur
     /** @inheritDoc */
     readonly id: string;
     /** @inheritDoc */
-    modifierGroup: string;
+    modifierGroup: string | undefined;
     /** @inheritDoc */
     invalidateParentCallback: () => void;
     protected isEnabledProperty: boolean;
     protected isAttachedProperty: boolean;
     protected receiveHandledEventsProperty: boolean;
-    protected mousePoint: Point;
-    protected previousPoint: Point;
+    protected mousePoint: Point | undefined;
+    protected previousPoint: Point | undefined;
     protected executeOnProperty: EExecuteOn;
     /**
      * Stores info about active pointerdown events
      */
     protected activePointerEvents: Map<number, ModifierMouseArgs>;
-    private parentSurfaceProperty;
+    protected parentSurfaceProperty: TSurfaceType;
     protected constructor(options?: {
         id?: string;
         executeOn?: EExecuteOn;

package/Charting/ChartModifiers/ChartModifierBase.js

@@ -228,9 +228,8 @@ var ChartModifierBase = /** @class */ (function (_super) {
     ChartModifierBase.prototype.updatePointerInfo = function (args) {
         var _a;
         // store position of primary pointer
-        // (PointerEvent.isPrimary seems to not be set on secondary pointer after the primary pointer was released,
-        // so here we are checking order of entry insertion instead)
-        if (this.activePointerEvents.keys().next().value === args.pointerId) {
+        // activePointerEvents are set on mousedown/mouseup if this is a touch event.  In this case only track the first one
+        if (this.activePointerEvents.size === 0 || this.activePointerEvents.keys().next().value === args.pointerId) {
             this.mousePoint = args.mousePoint;
         }
         // get previous coordinates of the current pointer

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -131,19 +131,19 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     /**
      * Gets or sets the xAxis label text color as an HTML Color code
      */
-    xAxisLabelStroke: string;
+    xAxisLabelStroke: string | undefined;
     /**
      * Gets or sets the xAxis label fill as an HTML Color code.
      */
-    xAxisLabelFill: string;
+    xAxisLabelFill: string | undefined;
     /**
      * Gets or sets the xAxis label text color as an HTML Color code
      */
-    yAxisLabelStroke: string;
+    yAxisLabelStroke: string | undefined;
     /**
      * Gets or sets the yAxis label fill as an HTML Color code.
      */
-    yAxisLabelFill: string;
+    yAxisLabelFill: string | undefined;
     /**
      * Gets or sets the template for the legend
      */
@@ -160,14 +160,14 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      * If this is set greater than the default of zero, the toolip will only show values for points in this radius, rather than all points on the vertical line
      */
     hitTestRadius: number;
-    protected xLineAnnotation: LineAnnotation;
-    protected yLineAnnotation: LineAnnotation;
-    protected tooltipAnnotation: CursorTooltipSvgAnnotation;
+    protected xLineAnnotation: LineAnnotation | undefined;
+    protected yLineAnnotation: LineAnnotation | undefined;
+    protected tooltipAnnotation: CursorTooltipSvgAnnotation | undefined;
     protected mousePosition: EMousePosition;
     protected crosshairStrokeProperty: string;
-    protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate;
+    protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate | undefined;
     protected includedSeriesMap: Map<IRenderableSeries, boolean>;
-    protected placementDivIdProperty: string;
+    protected placementDivIdProperty: string | undefined;
     protected showXLineProperty: boolean;
     protected showYLineProperty: boolean;
     protected showAxisLabelsProperty: boolean;

package/Charting/ChartModifiers/CursorModifier.js

@@ -538,7 +538,7 @@ var CursorModifier = /** @class */ (function (_super) {
                 this.yLineAnnotation.isHidden = true;
             }
             this.tooltipAnnotation.isHidden = true;
-            this.tooltipAnnotation.seriesInfos = undefined;
+            this.tooltipAnnotation.seriesInfos = [];
             if (this.placementDivId) {
                 this.tooltipAnnotation.delete();
             }

package/Charting/ChartModifiers/DataPointSelectionModifier.d.ts

@@ -201,6 +201,7 @@ export declare class DataPointSelectionModifier extends ChartModifierBase2D impl
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };
+    delete(): void;
     /**
      * Selects all points inside the {@link Rect}, according to the {@link ESelectionMode} passed in
      * @param rect

package/Charting/ChartModifiers/DataPointSelectionModifier.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPointSelectionModifier = exports.ESelectionMode = void 0;
 var classFactory_1 = require("../../Builder/classFactory");
+var Deleter_1 = require("../../Core/Deleter");
 var EventHandler_1 = require("../../Core/EventHandler");
 var Rect_1 = require("../../Core/Rect");
 var BaseType_1 = require("../../types/BaseType");
@@ -131,7 +132,7 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         _super.prototype.onDetach.call(this);
-        this.selectionRect = undefined;
+        this.selectionRect = (0, Deleter_1.deleteSafe)(this.selectionRect);
         this.clearSelectedDataPoints();
         (_a = this.getAllSeries()) === null || _a === void 0 ? void 0 : _a.forEach(function (rs) { return _this.onDetachSeries(rs); });
     };
@@ -366,6 +367,10 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         Object.assign(json.options, options);
         return json;
     };
+    DataPointSelectionModifier.prototype.delete = function () {
+        this.selectionRect = (0, Deleter_1.deleteSafe)(this.selectionRect);
+        _super.prototype.delete.call(this);
+    };
     /**
      * Selects all points inside the {@link Rect}, according to the {@link ESelectionMode} passed in
      * @param rect

package/Charting/ChartModifiers/LegendModifier.d.ts

@@ -3,21 +3,13 @@ import { IIncludeSeries } from "../../Core/IIncludeSeries";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { SciChartLegend } from "../Visuals/Legend/SciChartLegend";
-import { ELegendOrientation, ELegendPlacement } from "../Visuals/Legend/SciChartLegendBase";
+import { ILegendOptionsBase } from "../Visuals/Legend/SciChartLegendBase";
 import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
 import { ChartModifierBase2D, IChartModifierBaseOptions } from "./ChartModifierBase2D";
 /**
  * Optional parameters used to configure a {@link LegendModifier} at construct time
  */
-export interface ILegendModifierOptions extends IChartModifierBaseOptions {
-    /**
-     * Sets the initial orientation of the legend. See {@link ELegendOrientation} for a list of values
-     */
-    orientation?: ELegendOrientation;
-    /**
-     * Sets whether the legend is initially visible or not
-     */
-    showLegend?: boolean;
+export interface ILegendModifierOptions extends IChartModifierBaseOptions, ILegendOptionsBase {
     /**
      * Sets whether the legend has visibility checkboxes in it or not
      */
@@ -26,24 +18,17 @@ export interface ILegendModifierOptions extends IChartModifierBaseOptions {
      * Sets whether Series markers are visible or not
      */
     showSeriesMarkers?: boolean;
-    /**
-     * Sets the initial legend placement in the parent chart surface. See {@link ELegendPlacement} for a list of values
-     */
-    placement?: ELegendPlacement;
-    /**
-     * Sets the margin for the legend control
-     */
-    margin?: number;
-    /**
-     * The parent div element Id or reference, the Legend will be appended to this element
-     */
-    placementDivId?: string | HTMLDivElement;
     /**
      * Callback when a legend item checkbox is checked or unchecked (by default, this corresponds to {@link IRenderableSeries.isVisible}
      * @param series
      * @param isChecked
      */
     isCheckedChangedCallback?: (series: IRenderableSeries, isChecked: boolean) => void;
+    /**
+     * Set this only if you need to pass in a custom legend instance.
+     * showCheckboxes, showSeriesMarkers and isCheckedChangedCallback will be set on the instance you pass if specified in the options.
+     */
+    legend?: SciChartLegend;
 }
 /**
  * Type args for the {@link LegendModifier.isCheckedChanged} callback
@@ -76,7 +61,7 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     /**
      * Gets the {@link SciChartLegend} control used to render the legend
      */
-    sciChartLegend: SciChartLegend;
+    sciChartLegend: SciChartLegend | undefined;
     /**
      * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked
      */
@@ -106,7 +91,7 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     /** @inheritDoc */
     toJSON(): {
         type: string;
-        options: Required<Omit<IChartModifierBaseOptions, never>>;
+        options: Required<Omit<IChartModifierBaseOptions, never>>; /** @inheritDoc */
     };
     /** @inheritDoc */
     delete(): void;

package/Charting/ChartModifiers/LegendModifier.js

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegendModifier = void 0;
-var Deleter_1 = require("../../Core/Deleter");
 var EventHandler_1 = require("../../Core/EventHandler");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var SciChartLegend_1 = require("../Visuals/Legend/SciChartLegend");
@@ -42,7 +41,7 @@ var LegendModifier = /** @class */ (function (_super) {
      */
     function LegendModifier(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Legend;
         /**
@@ -51,14 +50,9 @@ var LegendModifier = /** @class */ (function (_super) {
         _this.isCheckedChanged = new EventHandler_1.EventHandler();
         _this.includedSeriesMap = new Map();
         _this.legendItemCheckedChanged = _this.legendItemCheckedChanged.bind(_this);
-        _this.sciChartLegend = new SciChartLegend_1.SciChartLegend();
-        _this.sciChartLegend.orientation = (_a = options === null || options === void 0 ? void 0 : options.orientation) !== null && _a !== void 0 ? _a : _this.sciChartLegend.orientation;
-        _this.sciChartLegend.showLegend = (_b = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _b !== void 0 ? _b : _this.sciChartLegend.showLegend;
-        _this.sciChartLegend.showCheckboxes = (_c = options === null || options === void 0 ? void 0 : options.showCheckboxes) !== null && _c !== void 0 ? _c : _this.sciChartLegend.showCheckboxes;
-        _this.sciChartLegend.showSeriesMarkers = (_d = options === null || options === void 0 ? void 0 : options.showSeriesMarkers) !== null && _d !== void 0 ? _d : _this.sciChartLegend.showSeriesMarkers;
-        _this.sciChartLegend.placement = (_e = options === null || options === void 0 ? void 0 : options.placement) !== null && _e !== void 0 ? _e : _this.sciChartLegend.placement;
-        _this.sciChartLegend.margin = (_f = options === null || options === void 0 ? void 0 : options.margin) !== null && _f !== void 0 ? _f : _this.sciChartLegend.margin;
-        _this.sciChartLegend.placementDivId = (_g = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _g !== void 0 ? _g : _this.sciChartLegend.placementDivId;
+        _this.sciChartLegend = (_a = options === null || options === void 0 ? void 0 : options.legend) !== null && _a !== void 0 ? _a : new SciChartLegend_1.SciChartLegend(options);
+        _this.sciChartLegend.showCheckboxes = (_b = options === null || options === void 0 ? void 0 : options.showCheckboxes) !== null && _b !== void 0 ? _b : _this.sciChartLegend.showCheckboxes;
+        _this.sciChartLegend.showSeriesMarkers = (_c = options === null || options === void 0 ? void 0 : options.showSeriesMarkers) !== null && _c !== void 0 ? _c : _this.sciChartLegend.showSeriesMarkers;
         _this.sciChartLegend.legendItemCheckedChangedCallback = _this.legendItemCheckedChanged;
         if (options === null || options === void 0 ? void 0 : options.isCheckedChangedCallback) {
             _this.isCheckedChanged.subscribe(function (arg) {
@@ -86,26 +80,20 @@ var LegendModifier = /** @class */ (function (_super) {
     /** @inheritDoc */
     LegendModifier.prototype.onParentSurfaceRendered = function () {
         _super.prototype.onParentSurfaceRendered.call(this);
-        this.sciChartLegend.setSeriesViewRect(this.parentSurface.seriesViewRect);
-        this.sciChartLegend.update();
     };
     /** @inheritDoc */
     LegendModifier.prototype.onAttach = function () {
         _super.prototype.onAttach.call(this);
-        this.sciChartLegend.setParentSurface(this.parentSurface);
-        this.sciChartLegend.setRootDiv(this.parentSurface.domDivContainer);
+        this.sciChartLegend.attachTo(this.parentSurface);
         this.sciChartLegend.setRenderableSeriesArray(this.getIncludedRenderableSeries());
-        this.sciChartLegend.setInvalidateParentSurface(this.parentSurface.invalidateElement);
     };
     /** @inheritDoc */
     LegendModifier.prototype.onDetach = function () {
-        var _a, _b, _c, _d;
+        var _a, _b;
         _super.prototype.onDetach.call(this);
-        (_a = this.sciChartLegend) === null || _a === void 0 ? void 0 : _a.setRootDiv(undefined);
-        (_b = this.sciChartLegend) === null || _b === void 0 ? void 0 : _b.setRenderableSeriesArray([]);
-        (_c = this.sciChartLegend) === null || _c === void 0 ? void 0 : _c.setInvalidateParentSurface(undefined);
-        (_d = this.sciChartLegend) === null || _d === void 0 ? void 0 : _d.setParentSurface(undefined);
-        this.sciChartLegend = (0, Deleter_1.deleteSafe)(this.sciChartLegend);
+        (_a = this.sciChartLegend) === null || _a === void 0 ? void 0 : _a.setRenderableSeriesArray([]);
+        (_b = this.sciChartLegend) === null || _b === void 0 ? void 0 : _b.detach();
+        this.sciChartLegend = undefined;
     };
     /** @inheritDoc */
     LegendModifier.prototype.includeSeries = function (series, isIncluded) {

package/Charting/ChartModifiers/MouseWheelZoomModifier.js

@@ -60,9 +60,18 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
      */
     function MouseWheelZoomModifier(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.MouseWheelZoom;
+        /**
+         * Modifies the speed of mousewheel zoom, for example growFactor = 0.001 means each mousewheel 'click'
+         * zooms the chart 0.1%
+         */
+        _this.growFactor = 0.001;
+        /**
+         * Defines whether the Mouse Wheel zooms or pans. See {@link EActionType} for options
+         */
+        _this.actionType = EActionType.Zoom;
         /**
          * Whether the modifier applies when the mouse is over the area where series are drawn (ie not over the axes).  Default true.
          */
@@ -73,30 +82,30 @@ var MouseWheelZoomModifier = /** @class */ (function (_super) {
         _this.applyToAxes = true;
         _this.includedXAxisMap = new Map();
         _this.includedYAxisMap = new Map();
-        _this.growFactor = (options === null || options === void 0 ? void 0 : options.growFactor) || 0.001;
-        _this.actionType = (_a = options === null || options === void 0 ? void 0 : options.actionType) !== null && _a !== void 0 ? _a : EActionType.Zoom;
-        _this.applyToSeriesViewRect = (_b = options === null || options === void 0 ? void 0 : options.applyToSeriesViewRect) !== null && _b !== void 0 ? _b : _this.applyToSeriesViewRect;
-        _this.applyToAxes = (_c = options === null || options === void 0 ? void 0 : options.applyToAxes) !== null && _c !== void 0 ? _c : _this.applyToAxes;
+        _this.growFactor = (_a = options === null || options === void 0 ? void 0 : options.growFactor) !== null && _a !== void 0 ? _a : _this.growFactor;
+        _this.actionType = (_b = options === null || options === void 0 ? void 0 : options.actionType) !== null && _b !== void 0 ? _b : _this.actionType;
+        _this.applyToSeriesViewRect = (_c = options === null || options === void 0 ? void 0 : options.applyToSeriesViewRect) !== null && _c !== void 0 ? _c : _this.applyToSeriesViewRect;
+        _this.applyToAxes = (_d = options === null || options === void 0 ? void 0 : options.applyToAxes) !== null && _d !== void 0 ? _d : _this.applyToAxes;
         if (_this.actionType === EActionType.Pan && _this.xyDirection === XyDirection_1.EXyDirection.XyDirection) {
             console.warn("SciChart MouseWheelZoomModifier: actionType=Pan and xyDirection=Xy conflict. Auto setting XyDirection to X");
             _this.xyDirection = XyDirection_1.EXyDirection.XDirection;
         }
-        if ((options === null || options === void 0 ? void 0 : options.includedXAxisIds) && (options === null || options === void 0 ? void 0 : options.excludedXAxisIds)) {
+        if (((_e = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _e === void 0 ? void 0 : _e.length) > 0 && ((_f = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _f === void 0 ? void 0 : _f.length) > 0) {
             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)) {
+        if (((_g = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _g === void 0 ? void 0 : _g.length) > 0 && ((_h = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _h === void 0 ? void 0 : _h.length) > 0) {
             throw new Error("You either should use includedYAxisIds or excludedYAxisIds");
         }
-        (_d = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _d === void 0 ? void 0 : _d.forEach(function (id) {
+        (_j = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _j === void 0 ? void 0 : _j.forEach(function (id) {
             _this.includedXAxisMap.set(id, true);
         });
-        (_e = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _e === void 0 ? void 0 : _e.forEach(function (id) {
+        (_k = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _k === void 0 ? void 0 : _k.forEach(function (id) {
             _this.includedYAxisMap.set(id, true);
         });
-        (_f = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _f === void 0 ? void 0 : _f.forEach(function (id) {
+        (_l = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _l === void 0 ? void 0 : _l.forEach(function (id) {
             _this.includedXAxisMap.set(id, false);
         });
-        (_g = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _g === void 0 ? void 0 : _g.forEach(function (id) {
+        (_m = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _m === void 0 ? void 0 : _m.forEach(function (id) {
             _this.includedYAxisMap.set(id, false);
         });
         return _this;

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.d.ts

@@ -29,14 +29,14 @@ export interface IRangeSelectionModifierOptions extends IChartModifierBaseOption
 export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D {
     readonly type = EChart2DModifierType.OverviewRangeSelection;
     onSelectedAreaChanged: (area?: NumberRange) => void;
-    overviewPositionAnimation: IGenericAnimation;
+    overviewPositionAnimation: IGenericAnimation | undefined;
     animationDuration: number;
     animate: boolean;
-    protected pointTo: Point;
+    protected pointTo: Point | undefined;
     protected isClicked: boolean;
-    protected rangeSelectionAnnotationProperty: OverviewCustomResizableAnnotation;
-    protected annotationBeforeSelectedAreaProperty: OverviewCustomResizableAnnotation;
-    protected annotationAfterSelectedAreaProperty: OverviewCustomResizableAnnotation;
+    protected rangeSelectionAnnotationProperty: OverviewCustomResizableAnnotation | undefined;
+    protected annotationBeforeSelectedAreaProperty: OverviewCustomResizableAnnotation | undefined;
+    protected annotationAfterSelectedAreaProperty: OverviewCustomResizableAnnotation | undefined;
     private selectedAreaProperty;
     /**
      * Creates an instance of a OverviewRangeSelectionModifier

package/Charting/ChartModifiers/PinchZoomModifier.js

@@ -46,7 +46,7 @@ var PinchZoomModifier = /** @class */ (function (_super) {
      */
     function PinchZoomModifier(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         _this = _super.call(this, options) || this;
         /**
          * Defines the sensitivity of zooming in horizontal direction
@@ -67,26 +67,26 @@ var PinchZoomModifier = /** @class */ (function (_super) {
             return new Point_1.Point((firstPoint.x + secondPoint.x) / 2, (firstPoint.y + secondPoint.y) / 2);
         };
         _this.type = ChartModifierType_1.EChart2DModifierType.PinchZoom;
-        if ((options === null || options === void 0 ? void 0 : options.includedXAxisIds) && (options === null || options === void 0 ? void 0 : options.excludedXAxisIds)) {
+        if (((_a = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _b === void 0 ? void 0 : _b.length) > 0) {
             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)) {
+        if (((_c = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _c === void 0 ? void 0 : _c.length) > 0 && ((_d = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _d === void 0 ? void 0 : _d.length) > 0) {
             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) {
+        (_e = options === null || options === void 0 ? void 0 : options.includedXAxisIds) === null || _e === void 0 ? void 0 : _e.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) {
+        (_f = options === null || options === void 0 ? void 0 : options.includedYAxisIds) === null || _f === void 0 ? void 0 : _f.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) {
+        (_g = options === null || options === void 0 ? void 0 : options.excludedXAxisIds) === null || _g === void 0 ? void 0 : _g.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) {
+        (_h = options === null || options === void 0 ? void 0 : options.excludedYAxisIds) === null || _h === void 0 ? void 0 : _h.forEach(function (id) {
             _this.includedYAxisMap.set(id, false);
         });
-        _this.horizontalGrowFactor = (_e = options === null || options === void 0 ? void 0 : options.horizontalGrowFactor) !== null && _e !== void 0 ? _e : _this.horizontalGrowFactor;
-        _this.verticalGrowFactor = (_f = options === null || options === void 0 ? void 0 : options.verticalGrowFactor) !== null && _f !== void 0 ? _f : _this.verticalGrowFactor;
+        _this.horizontalGrowFactor = (_j = options === null || options === void 0 ? void 0 : options.horizontalGrowFactor) !== null && _j !== void 0 ? _j : _this.horizontalGrowFactor;
+        _this.verticalGrowFactor = (_k = options === null || options === void 0 ? void 0 : options.verticalGrowFactor) !== null && _k !== void 0 ? _k : _this.verticalGrowFactor;
         return _this;
     }
     /**

package/Charting/ChartModifiers/RubberBandXyZoomModifier.d.ts

@@ -68,9 +68,9 @@ export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
      * Defines the easing function for animation. See {@link TEasingFn} for a range of functions
      */
     easingFunction: TEasingFn;
-    rubberBandRect: RubberBandSvgRect;
-    protected pointFrom: Point;
-    protected pointTo: Point;
+    rubberBandRect: RubberBandSvgRect | undefined;
+    protected pointFrom: Point | undefined;
+    protected pointTo: Point | undefined;
     protected isClicked: boolean;
     private fillProperty;
     private strokeProperty;
@@ -84,10 +84,6 @@ export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
      * @inheritDoc
      */
     applyTheme(themeProvider: IThemeProvider): void;
-    /**
-     * @inheritDoc
-     */
-    onAttach(): void;
     /**
      * @inheritDoc
      */
@@ -132,6 +128,7 @@ export declare class RubberBandXyZoomModifier extends ChartModifierBase2D {
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };
+    delete(): void;
     /**
      * Performs the zoom operation on the parent Surface, using the mouse points from & to, which
      * define the corners of the rectangle to zoom

package/Charting/ChartModifiers/RubberBandXyZoomModifier.js

@@ -92,19 +92,12 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
             this.stroke = themeProvider.rubberBandStrokeBrush;
         }
     };
-    /**
-     * @inheritDoc
-     */
-    RubberBandXyZoomModifier.prototype.onAttach = function () {
-        _super.prototype.onAttach.call(this);
-        this.rubberBandRect = new RubberBandSvgRect_1.RubberBandSvgRect(this.parentSurface.domSvgContainer, this.fill, this.stroke, this.strokeThickness);
-    };
     /**
      * @inheritDoc
      */
     RubberBandXyZoomModifier.prototype.onDetach = function () {
         _super.prototype.onDetach.call(this);
-        this.rubberBandRect = undefined;
+        this.rubberBandRect = (0, Deleter_1.deleteSafe)(this.rubberBandRect);
     };
     /**
      * @inheritDoc
@@ -225,6 +218,11 @@ var RubberBandXyZoomModifier = /** @class */ (function (_super) {
         Object.assign(json.options, options);
         return json;
     };
+    RubberBandXyZoomModifier.prototype.delete = function () {
+        this.parentSurfaceProperty = undefined;
+        this.rubberBandRect = (0, Deleter_1.deleteSafe)(this.rubberBandRect);
+        _super.prototype.delete.call(this);
+    };
     /**
      * Performs the zoom operation on the parent Surface, using the mouse points from & to, which
      * define the corners of the rectangle to zoom

package/Charting/ChartModifiers/SeriesSelectionModifier.js

@@ -189,9 +189,10 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
             var prevHovered = __spreadArray([], this.hoveredSeries, true);
             // Deselect all series
             this.hoveredSeries = [];
+            var nearestHitTestInfo_1;
             if ((hitTestInfos === null || hitTestInfos === void 0 ? void 0 : hitTestInfos.length) > 0) {
                 // Any series been hit-tested? Get the nearest
-                var nearestHitTestInfo_1 = hitTestInfos
+                nearestHitTestInfo_1 = hitTestInfos
                     .filter(function (ht) { return ht.isHit; })
                     .sort(function (a, b) { return a.getEuclideanDistance() - b.getEuclideanDistance(); })[0];
                 // 1. Set the isHovered flag and add to hovered array for the nearest hitTestInfo
@@ -215,7 +216,7 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
             // 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));
+                (_a = this.hoverChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, allSeries, nearestHitTestInfo_1));
             }
         }
         finally {
@@ -249,10 +250,11 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
             // Deselect all series
             this.selectedSeries = [];
             allSeries.forEach(function (rs) { return (rs.isSelected = false); });
+            var nearestHitTestInfo = void 0;
             // Select the first series that has HitTestInfo.isHit = true
             if ((hitTestInfos === null || hitTestInfos === void 0 ? void 0 : hitTestInfos.length) > 0) {
                 // Any series been hit-tested? Get the nearest
-                var nearestHitTestInfo = hitTestInfos.sort(function (a, b) { return a.getEuclideanDistance() - b.getEuclideanDistance(); })[0];
+                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
@@ -261,7 +263,7 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
                 }
             }
             // Raise the selectionChanged event
-            (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, allSeries));
+            (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, allSeries, nearestHitTestInfo));
         }
         finally {
             this.preventReentrancy = false;
@@ -295,12 +297,12 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
         if (arg.isSelected) {
             this.selectedSeries.push(arg.sourceSeries);
             // Raise the selectionChanged event
-            (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, this.getAllSeries()));
+            (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, this.getAllSeries(), undefined));
         }
         else {
             this.selectedSeries = (0, array_1.arrayRemove)(this.selectedSeries, arg.sourceSeries);
             // Raise the selectionChanged event after series deselected
-            (_b = this.selectionChanged) === null || _b === void 0 ? void 0 : _b.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, this.getAllSeries()));
+            (_b = this.selectionChanged) === null || _b === void 0 ? void 0 : _b.raiseEvent(new SelectionChangedArgs_1.SelectionChangedArgs(this, this.selectedSeries, this.getAllSeries(), undefined));
         }
     };
     SeriesSelectionModifier.prototype.updateSeriesHovered = function (arg) {
@@ -312,12 +314,12 @@ var SeriesSelectionModifier = /** @class */ (function (_super) {
         if (arg.hovered) {
             this.hoveredSeries.push(arg.sourceSeries);
             // Raise the selectionChanged event
-            (_a = this.hoverChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, this.getAllSeries()));
+            (_a = this.hoverChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, this.getAllSeries(), undefined));
         }
         else {
             this.hoveredSeries = (0, array_1.arrayRemove)(this.hoveredSeries, arg.sourceSeries);
             // Raise the selectionChanged event after series deselected
-            (_b = this.hoverChanged) === null || _b === void 0 ? void 0 : _b.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, this.getAllSeries()));
+            (_b = this.hoverChanged) === null || _b === void 0 ? void 0 : _b.raiseEvent(new HoveredChangedArgs_1.HoveredChangedArgs(this, this.hoveredSeries, this.getAllSeries(), undefined));
         }
     };
     return SeriesSelectionModifier;

package/Charting/ChartModifiers/XAxisDragModifier.d.ts

@@ -34,7 +34,7 @@ export declare class XAxisDragModifier extends ChartModifierBase2D {
     readonly type = EChart2DModifierType.XAxisDrag;
     dragMode: EDragMode;
     protected isClickedOverXAxis: boolean;
-    protected pointFrom: Point;
+    protected pointFrom: Point | undefined;
     protected activeAxes: AxisBase2D[];
     protected initialVisibleRanges: NumberRange[];
     protected isVerticalChart: boolean;