scichart 3.1.348 → 3.2.434

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

@@ -1,3 +1,4 @@
+import { DeletableEntity } from "../../Core/DeletableEntity";
 import { IDeletable } from "../../Core/IDeletable";
 import { Point } from "../../Core/Point";
 import { EExecuteOn } from "../../types/ExecuteOn";
@@ -56,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}
      */
@@ -153,19 +154,24 @@ export interface IChartModifierBase extends IThemeable, IDeletable {
  * Defines a base class to a Chart Modifier - a class which provides Zoom, Pan, Tooltip or interaction behavior
  * to SciChart - High Performance Realtime {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
  */
-export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSurfaceBase> implements IChartModifierBase {
+export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSurfaceBase> extends DeletableEntity implements IChartModifierBase {
     /** @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 mousePoint: Point | undefined;
+    protected previousPoint: Point | undefined;
     protected executeOnProperty: EExecuteOn;
-    private parentSurfaceProperty;
+    /**
+     * Stores info about active pointerdown events
+     */
+    protected activePointerEvents: Map<number, ModifierMouseArgs>;
+    protected parentSurfaceProperty: TSurfaceType;
     protected constructor(options?: {
         id?: string;
         executeOn?: EExecuteOn;
@@ -235,4 +241,12 @@ export declare abstract class ChartModifierBase<TSurfaceType extends SciChartSur
      * @param propertyName the property name which has changed
      */
     protected notifyPropertyChanged(propertyName: string): void;
+    protected updatePointerInfo(args: ModifierMouseArgs): void;
+    /**
+     * Checks if event conditions should trigger the modifier action
+     * @param args current event info as {@link ModifierMouseArgs}
+     *
+     * @remarks Can be used in some of the modifiers to add/override constraints
+     */
+    protected getIsActionAllowed(args: ModifierMouseArgs): boolean;
 }

package/Charting/ChartModifiers/ChartModifierBase.js

@@ -1,6 +1,22 @@
 "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.ChartModifierBase = exports.EModifierType = void 0;
+var DeletableEntity_1 = require("../../Core/DeletableEntity");
 var ExecuteOn_1 = require("../../types/ExecuteOn");
 var guid_1 = require("../../utils/guid");
 var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
@@ -15,13 +31,21 @@ var EModifierType;
  * Defines a base class to a Chart Modifier - a class which provides Zoom, Pan, Tooltip or interaction behavior
  * to SciChart - High Performance Realtime {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
  */
-var ChartModifierBase = /** @class */ (function () {
+var ChartModifierBase = /** @class */ (function (_super) {
+    __extends(ChartModifierBase, _super);
     function ChartModifierBase(options) {
+        var _this = this;
         var _a, _b;
-        this.isEnabledProperty = true;
-        this.executeOnProperty = ExecuteOn_1.EExecuteOn.MouseLeftButton;
-        this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
-        this.executeOnProperty = (_b = options === null || options === void 0 ? void 0 : options.executeOn) !== null && _b !== void 0 ? _b : this.executeOn;
+        _this = _super.call(this) || this;
+        _this.isEnabledProperty = true;
+        _this.executeOnProperty = ExecuteOn_1.EExecuteOn.MouseLeftButton;
+        /**
+         * Stores info about active pointerdown events
+         */
+        _this.activePointerEvents = new Map();
+        _this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : (0, guid_1.generateGuid)();
+        _this.executeOnProperty = (_b = options === null || options === void 0 ? void 0 : options.executeOn) !== null && _b !== void 0 ? _b : _this.executeOn;
+        return _this;
     }
     /** @inheritDoc */
     ChartModifierBase.prototype.applyTheme = function (themeProvider) {
@@ -125,14 +149,22 @@ var ChartModifierBase = /** @class */ (function () {
             // Don't scroll browser if middle button is being used for the modifier
             args.nativeEvent.preventDefault();
         }
+        var isTouchEvent = args.pointerType === "touch" || args.pointerType === "pen";
+        if (isTouchEvent) {
+            this.activePointerEvents.set(args.pointerId, args);
+        }
     };
     /** @inheritDoc */
     ChartModifierBase.prototype.modifierMouseMove = function (args) {
-        this.mousePoint = args.mousePoint;
+        this.updatePointerInfo(args);
         // Override in derived class to be notified of mouse move
     };
     /** @inheritDoc */
     ChartModifierBase.prototype.modifierMouseUp = function (args) {
+        var isTouchEvent = args.pointerType === "touch" || args.pointerType === "pen";
+        if (isTouchEvent) {
+            this.activePointerEvents.delete(args.pointerId);
+        }
         // Override in derived class to be notified of mouse up
     };
     /** @inheritDoc */
@@ -149,6 +181,7 @@ var ChartModifierBase = /** @class */ (function () {
     };
     /** @inheritDoc */
     ChartModifierBase.prototype.modifierMouseLeave = function (args) {
+        this.activePointerEvents.delete(args.pointerId);
         // Override in derived class to be notified of mouse leave
     };
     /** @inheritDoc */
@@ -157,6 +190,7 @@ var ChartModifierBase = /** @class */ (function () {
     };
     /** @inheritDoc */
     ChartModifierBase.prototype.modifierPointerCancel = function (args) {
+        this.activePointerEvents.delete(args.pointerId);
         // Override in derived class to be notified of mouse leave
     };
     /** @inheritDoc */
@@ -191,6 +225,29 @@ var ChartModifierBase = /** @class */ (function () {
             this.invalidateParentCallback();
         }
     };
+    ChartModifierBase.prototype.updatePointerInfo = function (args) {
+        var _a;
+        // store position of primary pointer
+        // 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
+        this.previousPoint = (_a = this.activePointerEvents.get(args.pointerId)) === null || _a === void 0 ? void 0 : _a.mousePoint;
+        // update saved pointer coordinates
+        if (this.activePointerEvents.has(args.pointerId)) {
+            this.activePointerEvents.set(args.pointerId, args);
+        }
+    };
+    /**
+     * Checks if event conditions should trigger the modifier action
+     * @param args current event info as {@link ModifierMouseArgs}
+     *
+     * @remarks Can be used in some of the modifiers to add/override constraints
+     */
+    ChartModifierBase.prototype.getIsActionAllowed = function (args) {
+        return true;
+    };
     return ChartModifierBase;
-}());
+}(DeletableEntity_1.DeletableEntity));
 exports.ChartModifierBase = ChartModifierBase;

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

@@ -251,6 +251,7 @@ var CursorModifier = /** @class */ (function (_super) {
      * @inheritDoc
      */
     CursorModifier.prototype.modifierMouseMove = function (args) {
+        this.activePointerEvents.set(args.pointerId, args);
         _super.prototype.modifierMouseMove.call(this, args);
         var translatedMousePoint;
         if (!this.mousePoint) {
@@ -265,7 +266,10 @@ var CursorModifier = /** @class */ (function (_super) {
                 this.mousePosition = MousePosition_1.EMousePosition.SeriesArea;
             }
         }
-        this.update();
+        var isActionAllowed = this.getIsActionAllowed(args);
+        if (isActionAllowed) {
+            this.update();
+        }
     };
     /**
      * @inheritDoc
@@ -534,6 +538,7 @@ var CursorModifier = /** @class */ (function (_super) {
                 this.yLineAnnotation.isHidden = true;
             }
             this.tooltipAnnotation.isHidden = true;
+            this.tooltipAnnotation.seriesInfos = [];
             if (this.placementDivId) {
                 this.tooltipAnnotation.delete();
             }
@@ -654,6 +659,13 @@ var defaultTooltipDataTemplate = function (seriesInfos, tooltipTitle) {
                 valuesWithLabels.push("Y: ".concat(xyySeriesInfo.formattedYValue));
                 valuesWithLabels.push("Y1: ".concat(xyySeriesInfo.formattedY1Value));
             }
+            else if (si.dataSeriesType === IDataSeries_1.EDataSeriesType.Xyz) {
+                // Bubble Series
+                var xyzSeriesInfo = si;
+                valuesWithLabels.push("X: ".concat(xyzSeriesInfo.formattedXValue));
+                valuesWithLabels.push("Y: ".concat(xyzSeriesInfo.formattedYValue));
+                valuesWithLabels.push("Z: ".concat(xyzSeriesInfo.formattedZValue));
+            }
             else if (si.dataSeriesType === IDataSeries_1.EDataSeriesType.HeatmapUniform) {
                 // Heatmap Series
                 var heatmapSeriesInfo = si;

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
      */
@@ -105,8 +90,8 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     getIncludedRenderableSeries(): IRenderableSeries[];
     /** @inheritDoc */
     toJSON(): {
-        type: string; /** @inheritDoc */
-        options: Required<Omit<IChartModifierBaseOptions, never>>;
+        type: string;
+        options: Required<Omit<IChartModifierBaseOptions, never>>; /** @inheritDoc */
     };
     /** @inheritDoc */
     delete(): void;

package/Charting/ChartModifiers/LegendModifier.js

@@ -41,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;
         /**
@@ -50,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) {
@@ -85,25 +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;
         _super.prototype.onDetach.call(this);
-        this.sciChartLegend.delete();
-        this.sciChartLegend.setRootDiv(undefined);
-        this.sciChartLegend.setRenderableSeriesArray([]);
-        this.sciChartLegend.setInvalidateParentSurface(undefined);
-        this.sciChartLegend.setParentSurface(undefined);
+        (_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) {
@@ -152,7 +142,7 @@ var LegendModifier = /** @class */ (function (_super) {
     /** @inheritDoc */
     LegendModifier.prototype.delete = function () {
         _super.prototype.delete.call(this);
-        this.sciChartLegend.delete();
+        this.onDetach();
     };
     /**
      * Callback called from inner {@link SciChartLegend} when a checkbox is checked or unchecked

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