scichart 2.0.2132 → 2.0.2179

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -27,11 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisBase2D = exports.EClipMode = void 0;
 var classFactory_1 = require("../../../Builder/classFactory");
 var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
+var NumberRangeAnimator_1 = require("../../../Core/Animations/NumberRangeAnimator");
 var Deleter_1 = require("../../../Core/Deleter");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var Thickness_1 = require("../../../Core/Thickness");
 var AxisAlignment_1 = require("../../../types/AxisAlignment");
 var BaseType_1 = require("../../../types/BaseType");
+var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var RenderLayer_1 = require("../../../types/RenderLayer");
 var XyDirection_1 = require("../../../types/XyDirection");
 var parseColor_1 = require("../../../utils/parseColor");
@@ -48,7 +52,6 @@ var AxisLayoutState_1 = require("./AxisLayoutState");
 var AxisRenderer_1 = require("./AxisRenderer");
 var AxisTitleRenderer_1 = require("./AxisTitleRenderer");
 var constants_1 = require("./constants");
-var LabelAlignment_1 = require("../../../types/LabelAlignment");
 /**
  * Defines the clipping mode for scrolling operations found on {@link AxisBase2D.scroll}
  */
@@ -97,7 +100,7 @@ var AxisBase2D = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
      */
     function AxisBase2D(webAssemblyContext, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
@@ -132,23 +135,27 @@ var AxisBase2D = /** @class */ (function (_super) {
         _this.penCacheForMinorTickLines = new Pen2DCache_1.Pen2DCache(webAssemblyContext);
         _this.solidBrushCacheAxisBands = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         _this.axisRenderer = new AxisRenderer_1.AxisRenderer(webAssemblyContext);
-        _this.axisRenderer.keepLabelsWithinAxis = (_a = options === null || options === void 0 ? void 0 : options.keepLabelsWithinAxis) !== null && _a !== void 0 ? _a : _this.axisRenderer.keepLabelsWithinAxis;
-        _this.axisRenderer.hideOverlappingLabels = (_b = options === null || options === void 0 ? void 0 : options.hideOverlappingLabels) !== null && _b !== void 0 ? _b : _this.axisRenderer.hideOverlappingLabels;
+        _this.axisRenderer.keepLabelsWithinAxis =
+            (_a = options === null || options === void 0 ? void 0 : options.keepLabelsWithinAxis) !== null && _a !== void 0 ? _a : _this.axisRenderer.keepLabelsWithinAxis;
+        _this.axisRenderer.hideOverlappingLabels =
+            (_b = options === null || options === void 0 ? void 0 : options.hideOverlappingLabels) !== null && _b !== void 0 ? _b : _this.axisRenderer.hideOverlappingLabels;
+        _this.axisRenderer.axisThickness = (_c = options === null || options === void 0 ? void 0 : options.axisThickness) !== null && _c !== void 0 ? _c : _this.axisRenderer.axisThickness;
         _this.axisTitleRenderer = new AxisTitleRenderer_1.AxisTitleRenderer(webAssemblyContext);
         _this.tickCoordinatesProvider = new DefaultTickCoordinatesProvider_1.DefaultTickCoordinatesProvider();
-        _this.visibleRangeLimit = (_c = options === null || options === void 0 ? void 0 : options.visibleRangeLimit) !== null && _c !== void 0 ? _c : _this.visibleRangeLimit;
+        _this.visibleRangeLimit = (_d = options === null || options === void 0 ? void 0 : options.visibleRangeLimit) !== null && _d !== void 0 ? _d : _this.visibleRangeLimit;
         _this.zoomExtentsRange = (options === null || options === void 0 ? void 0 : options.zoomExtentsToInitialRange) ? _this.visibleRange : options === null || options === void 0 ? void 0 : options.zoomExtentsRange;
-        _this.axisAlignment = (_d = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _d !== void 0 ? _d : _this.axisAlignment;
-        _this.axisTitle = (_e = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _e !== void 0 ? _e : _this.axisTitle;
+        _this.axisAlignment = (_e = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _e !== void 0 ? _e : _this.axisAlignment;
+        _this.axisTitle = (_f = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _f !== void 0 ? _f : _this.axisTitle;
         _this.labelStyle = __assign(__assign({}, _this.labelStyle), options === null || options === void 0 ? void 0 : options.labelStyle);
         _this.axisBorder = __assign(__assign({}, _this.axisBorder), options === null || options === void 0 ? void 0 : options.axisBorder);
-        _this.isInnerAxis = (_f = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _f !== void 0 ? _f : _this.isInnerAxis;
+        _this.isInnerAxis = (_g = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _g !== void 0 ? _g : _this.isInnerAxis;
         _this.solidBrushCacheBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         if (options === null || options === void 0 ? void 0 : options.labelProvider) {
             if (!("getLabels" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
-                options.labelProvider = classFactory_1.createType(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, webAssemblyContext, options.labelProvider.options);
+                options.labelProvider = (0, classFactory_1.createType)(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, webAssemblyContext, options.labelProvider.options);
             }
         }
+        _this.autoRangeAnimationProperty = options === null || options === void 0 ? void 0 : options.autoRangeAnimation;
         return _this;
     }
     Object.defineProperty(AxisBase2D.prototype, "labelProvider", {
@@ -168,38 +175,6 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
-    AxisBase2D.prototype.applyTheme = function (themeProvider) {
-        var previousThemeProvider = this.parentSurface.previousThemeProvider;
-        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
-            this.axisBandsFill = themeProvider.axisBandsFill;
-        }
-        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
-            this.labelStyle = { color: themeProvider.tickTextBrush };
-        }
-        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
-            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
-        }
-    };
-    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
-        this.parentSurface = parentSurface;
-        this.setIsXAxis(isXAxis);
-        this.isPrimaryAxisProperty = isPrimaryAxis;
-    };
     Object.defineProperty(AxisBase2D.prototype, "axisRenderer", {
         /**
          * Gets the {@link AxisRenderer} instance responsible for drawing the axis
@@ -222,7 +197,7 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets whether the axis is currently horizontal or not
          */
         get: function () {
-            return AxisAlignment_1.getIsHorizontal(this.axisAlignment);
+            return (0, AxisAlignment_1.getIsHorizontal)(this.axisAlignment);
         },
         enumerable: false,
         configurable: true
@@ -364,7 +339,7 @@ var AxisBase2D = /** @class */ (function (_super) {
     });
     Object.defineProperty(AxisBase2D.prototype, "axisLength", {
         /**
-         * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
+         * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
          */
         get: function () {
             var _a, _b;
@@ -375,9 +350,6 @@ var AxisBase2D = /** @class */ (function (_super) {
             var defaultAxisLength = this.isHorizontalAxis ? seriesViewRect.width : seriesViewRect.height;
             return (_b = this.axisLengthProperty) !== null && _b !== void 0 ? _b : defaultAxisLength;
         },
-        /**
-         * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
-         */
         set: function (value) {
             this.axisLengthProperty = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
@@ -469,6 +441,56 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "autoRangeAnimation", {
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        get: function () {
+            return this.autoRangeAnimationProperty;
+        },
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        set: function (autoRangeAnimation) {
+            this.autoRangeAnimationProperty = __assign(__assign({}, this.autoRangeAnimation), autoRangeAnimation);
+            // No need to trigger a redraw.  This will take effect anyway if the chart redraws.
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** @inheritDoc */
+    AxisBase2D.prototype.applyTheme = function (themeProvider) {
+        var previousThemeProvider = this.parentSurface.previousThemeProvider;
+        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
+            this.axisBandsFill = themeProvider.axisBandsFill;
+        }
+        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
+            this.labelStyle = { color: themeProvider.tickTextBrush };
+        }
+        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
+            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
+        }
+    };
+    /**
+     * Called when the {@link AxisBase2D} is attached to an {@link SciChartSurface}
+     */
+    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
+        this.parentSurface = parentSurface;
+        this.setIsXAxis(isXAxis);
+        this.isPrimaryAxisProperty = isPrimaryAxis;
+    };
     /**
      * Called internally - measures the axis as part of the layout phase
      */
@@ -480,7 +502,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             var majorTickLabels = this.getTicks(true).majorTickLabels;
             var drawTicks = this.drawMinorTickLines || this.drawMajorTickLines;
             if (SciChartSurfaceBase_1.DebugForDpi) {
-                console.log("Measure. fontSize: " + this.labelStyle.fontSize + ", dpiAdjusted: " + this.dpiAdjustedLabelStyle.fontSize);
+                console.log("Measure. fontSize: ".concat(this.labelStyle.fontSize, ", dpiAdjusted: ").concat(this.dpiAdjustedLabelStyle.fontSize));
             }
             this.axisRenderer.measure(this.isHorizontalAxis, this.dpiAdjustedLabelStyle, majorTickLabels, this.getTicksMaxSize(), this.labelProvider, this.drawLabels, drawTicks);
             this.axisTitleRenderer.measure(this.dpiAdjustedAxisTitleStyle, this.isHorizontalAxis);
@@ -491,6 +513,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             this.axisTitleRenderer.desiredHeight = 0;
             this.axisTitleRenderer.desiredWidth = 0;
         }
+        this.isMeasured = true;
     };
     /**
      * Called internally - prepares render data before a draw operation
@@ -505,7 +528,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         var _this = this;
         // Draw the Axis borders
         renderContext.enqueueLayeredDraw(function () {
-            return drawBorder_1.drawBorder(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
+            return (0, drawBorder_1.drawBorder)(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
         });
         if (!this.getIsValidForDrawing()) {
             return;
@@ -530,7 +553,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             // Draw axis labels
             if (_this.drawLabels) {
                 if (SciChartSurfaceBase_1.DebugForDpi) {
-                    console.log("Draw. fontSize: " + _this.labelStyle.fontSize + ", dpiAdjusted: " + _this.dpiAdjustedLabelStyle.fontSize);
+                    console.log("Draw. fontSize: ".concat(_this.labelStyle.fontSize, ", dpiAdjusted: ").concat(_this.dpiAdjustedLabelStyle.fontSize));
                 }
                 _this.axisRenderer.drawLabels(renderContext, _this.axisAlignment, _this.isInnerAxis, tickObject.majorTickLabels, tickObject.majorTickCoords, _this.offset, _this.dpiAdjustedLabelStyle, _this.isVerticalChart, _this.flippedCoordinates, _this.labelProvider);
             }
@@ -555,8 +578,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         var drawTickViewRects = function () {
             var viewRect = _this.axisRenderer.viewRect;
             var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
-            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush(parseColor_1.parseColorToUIntArgb("rgba(255,0,0,0.7)"), false);
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
+            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)("rgba(255,0,0,0.7)"), false);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
             vecRects.push_back(nativeRect);
             renderContext.drawRects(vecRects, brush, viewRect.left, viewRect.top);
             nativeRect.delete();
@@ -567,8 +590,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         var drawTitleViewRects = function () {
             var viewRect = _this.axisTitleRenderer.viewRect;
             var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
-            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush(parseColor_1.parseColorToUIntArgb("rgba(0,255,0,0.7)"), false);
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
+            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)("rgba(0,255,0,0.7)"), false);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
             vecRects.push_back(nativeRect);
             renderContext.drawRects(vecRects, brush, viewRect.left, viewRect.top);
             nativeRect.delete();
@@ -618,7 +641,8 @@ var AxisBase2D = /** @class */ (function (_super) {
                 .filter(function (s) { return s.yAxisId === _this.id && s.isVisible && s.hasDataSeriesValues(); });
             visibleSeries.forEach(function (rSeries) {
                 // Get pre-calculated XRange if exists, otherwise, fetch from the axis for this series
-                var xVisibleRange = (xRanges === null || xRanges === void 0 ? void 0 : xRanges.containsKey(rSeries.xAxisId)) ? xRanges.item(rSeries.xAxisId)
+                var xVisibleRange = (xRanges === null || xRanges === void 0 ? void 0 : xRanges.containsKey(rSeries.xAxisId))
+                    ? xRanges.item(rSeries.xAxisId)
                     : _this.getXVisibleRange(rSeries.xAxisId);
                 var isXCategoryAxis = _this.getIsXCategoryAxis(rSeries.xAxisId);
                 if (xVisibleRange) {
@@ -712,19 +736,43 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         this.visibleRange = new NumberRange_1.NumberRange(newMin, newMax);
     };
+    /**
+     * @inheritDoc
+     */
+    AxisBase2D.prototype.animateVisibleRange = function (visibleRange, durationMs, easingFunction, onCompleted) {
+        var _this = this;
+        var _a;
+        if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outCubic; }
+        if (onCompleted === void 0) { onCompleted = function () { }; }
+        if (durationMs <= 0) {
+            // Don't allow setting visibleRange to undefined if there is no data
+            this.visibleRange = visibleRange || this.visibleRange;
+            onCompleted();
+            return undefined;
+        }
+        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.visibleRangeAnimationToken = NumberRangeAnimator_1.NumberRangeAnimator.animate(this.visibleRange, visibleRange, durationMs, function (range) {
+            _this.visibleRange = range;
+        }, function () {
+            _this.visibleRangeAnimationToken = undefined;
+            onCompleted();
+        }, easingFunction);
+        this.parentSurface.addAnimation(this.visibleRangeAnimationToken);
+        return this.visibleRangeAnimationToken;
+    };
     /**
      * @inheritDoc
      */
     AxisBase2D.prototype.delete = function () {
         _super.prototype.delete.call(this);
-        this.penCacheForMajorGridLines = Deleter_1.deleteSafe(this.penCacheForMajorGridLines);
-        this.penCacheForMinorGridLines = Deleter_1.deleteSafe(this.penCacheForMinorGridLines);
-        this.penCacheForMajorTickLines = Deleter_1.deleteSafe(this.penCacheForMajorTickLines);
-        this.penCacheForMinorTickLines = Deleter_1.deleteSafe(this.penCacheForMinorTickLines);
-        this.solidBrushCacheBorder = Deleter_1.deleteSafe(this.solidBrushCacheBorder);
-        this.solidBrushCacheAxisBands = Deleter_1.deleteSafe(this.solidBrushCacheAxisBands);
-        this.labelProviderProperty = Deleter_1.deleteSafe(this.labelProvider);
-        this.axisRendererProperty = Deleter_1.deleteSafe(this.axisRenderer);
+        this.penCacheForMajorGridLines = (0, Deleter_1.deleteSafe)(this.penCacheForMajorGridLines);
+        this.penCacheForMinorGridLines = (0, Deleter_1.deleteSafe)(this.penCacheForMinorGridLines);
+        this.penCacheForMajorTickLines = (0, Deleter_1.deleteSafe)(this.penCacheForMajorTickLines);
+        this.penCacheForMinorTickLines = (0, Deleter_1.deleteSafe)(this.penCacheForMinorTickLines);
+        this.solidBrushCacheBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheBorder);
+        this.solidBrushCacheAxisBands = (0, Deleter_1.deleteSafe)(this.solidBrushCacheAxisBands);
+        this.labelProviderProperty = (0, Deleter_1.deleteSafe)(this.labelProvider);
+        this.axisRendererProperty = (0, Deleter_1.deleteSafe)(this.axisRenderer);
     };
     AxisBase2D.prototype.toJSON = function () {
         var options = {
@@ -839,7 +887,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             if (!isThisBandEven) {
                 return;
             }
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, direction === XyDirection_1.EXyDirection.YDirection ? 0 : coord0, direction === XyDirection_1.EXyDirection.YDirection ? coord0 : 0, direction === XyDirection_1.EXyDirection.YDirection ? seriesViewRect.width : coord1, direction === XyDirection_1.EXyDirection.YDirection ? coord1 : seriesViewRect.height);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, direction === XyDirection_1.EXyDirection.YDirection ? 0 : coord0, direction === XyDirection_1.EXyDirection.YDirection ? coord0 : 0, direction === XyDirection_1.EXyDirection.YDirection ? seriesViewRect.width : coord1, direction === XyDirection_1.EXyDirection.YDirection ? coord1 : seriesViewRect.height);
             vecRects.push_back(nativeRect);
             nativeRect.delete();
         };
@@ -938,7 +986,9 @@ var AxisBase2D = /** @class */ (function (_super) {
             maximumRange = maximumRange.growBy(this.growBy);
         }
         if (this.visibleRangeLimit) {
-            maximumRange = maximumRange.clip(this.visibleRangeLimit);
+            maximumRange = maximumRange
+                ? maximumRange.clip(this.visibleRangeLimit)
+                : this.visibleRange.clip(this.visibleRangeLimit);
         }
         return maximumRange;
     };
@@ -997,5 +1047,5 @@ var AxisBase2D = /** @class */ (function (_super) {
 exports.AxisBase2D = AxisBase2D;
 /** @ignore */
 var getPenForLines = function (penCache, stroke, strokeThickness, strokeDashArray) {
-    return Pen2DCache_1.createPenInCache(penCache, stroke, strokeThickness, 1, strokeDashArray);
+    return (0, Pen2DCache_1.createPenInCache)(penCache, stroke, strokeThickness, 1, strokeDashArray);
 };

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

@@ -1,16 +1,16 @@
 import { TEasingFn } from "../../../Core/Animations/EasingFunctions";
-import { AnimationToken } from "../../../Core/AnimationToken";
+import { IGenericAnimation } from "../../../Core/Animations/GenericAnimation";
 import { EventHandler } from "../../../Core/EventHandler";
 import { IDeletable } from "../../../Core/IDeletable";
 import { NumberRange } from "../../../Core/NumberRange";
 import { Thickness } from "../../../Core/Thickness";
 import { EAutoRange } from "../../../types/AutoRange";
 import { EAxisType } from "../../../types/AxisType";
+import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { TickCoordinatesProvider } from "../../Numerics/TickCoordinateProviders/TickCoordinatesProvider";
 import { TickProvider } from "../../Numerics/TickProviders/TickProvider";
 import { DeltaCalculator } from "./DeltaCalculator/DeltaCalculator";
-import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { IAxisCoreOptions } from "./IAxisCoreOptions";
 import { LabelProvider } from "./LabelProvider/LabelProvider";
 import { VisibleRangeChangedArgs } from "./VisibleRangeChangedArgs";
@@ -136,6 +136,8 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @desc
      */
     visibleRangeChanged: EventHandler<VisibleRangeChangedArgs>;
+    /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
+    isMeasured: boolean;
     /**
      * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
@@ -271,7 +273,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * Internal backing property for {@link AxisCore.maxAutoTicks}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
     protected maxAutoTicksProperty: number;
-    protected visibleRangeAnimationToken: AnimationToken;
+    protected visibleRangeAnimationToken: IGenericAnimation;
     protected readonly defaultVisibleRange: NumberRange;
     /**
      * Creates an instance of an {@link AxisCore}
@@ -396,6 +398,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * for {@link CategoryAxis} types.
      */
     set visibleRange(visibleRange: NumberRange);
+    get animatedVisibleRange(): NumberRange;
     /**
      * Sets and animates the visibleRange of the axis from the current value to the provided value over the duration and with
      * {@link TEasingFn | Easing Function} provided
@@ -404,7 +407,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @param easingFunction the {@link TEasingFn | Easing Function to use}. Default value is outCubic
      * @param onCompleted the callback function
      */
-    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): AnimationToken;
+    abstract animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction: TEasingFn, onCompleted: () => void): IGenericAnimation;
     /**
      * The MajorDelta is the spacing between major gridlines and axis labels.
      * @remarks

package/Charting/Visuals/Axis/AxisCore.js

@@ -12,19 +12,17 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisCore = void 0;
-var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
-var NumberRangeAnimator_1 = require("../../../Core/Animations/NumberRangeAnimator");
 var Deleter_1 = require("../../../Core/Deleter");
 var EventHandler_1 = require("../../../Core/EventHandler");
 var Guard_1 = require("../../../Core/Guard");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var Thickness_1 = require("../../../Core/Thickness");
 var AutoRange_1 = require("../../../types/AutoRange");
+var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var isRealNumber_1 = require("../../../utils/isRealNumber");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var DpiHelper_1 = require("../TextureManager/DpiHelper");
 var constants_1 = require("./constants");
-var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var VisibleRangeChangedArgs_1 = require("./VisibleRangeChangedArgs");
 /** @ignore */
 var ZeroRangeGrowBy = 0.01;
@@ -52,6 +50,8 @@ var AxisCore = /** @class */ (function () {
          * @desc
          */
         this.visibleRangeChanged = new EventHandler_1.EventHandler();
+        /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
+        this.isMeasured = false;
         /**
          * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
          */
@@ -219,7 +219,7 @@ var AxisCore = /** @class */ (function () {
             return false;
         }
         var rangeIsZero = this.visibleRange.diff === 0;
-        return !rangeIsZero && isRealNumber_1.isRealNumber(this.visibleRange.max) && isRealNumber_1.isRealNumber(this.visibleRange.min);
+        return !rangeIsZero && (0, isRealNumber_1.isRealNumber)(this.visibleRange.max) && (0, isRealNumber_1.isRealNumber)(this.visibleRange.min);
     };
     /**
      * When true, the axis has the default {@link AxisCore.visibleRange}.
@@ -364,31 +364,17 @@ var AxisCore = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    /**
-     * Sets and animates the visibleRange of the axis from the current value to the provided value over the duration and with
-     * {@link TEasingFn | Easing Function} provided
-     * @param visibleRange the {@link NumberRange} which we wish to animate {@link AxisCore.visibleRange} to
-     * @param durationMs the duration of the animation in milliseconds
-     * @param easingFunction the {@link TEasingFn | Easing Function to use}. Default value is outCubic
-     * @param onCompleted the callback function
-     */
-    AxisCore.prototype.animateVisibleRange = function (visibleRange, durationMs, easingFunction, onCompleted) {
-        var _this = this;
-        var _a;
-        if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outCubic; }
-        if (onCompleted === void 0) { onCompleted = function () { }; }
-        if (durationMs <= 0) {
-            // Don't allow setting visibleRange to undefined if there is no data
-            this.visibleRange = visibleRange || this.visibleRange;
-            onCompleted();
-            return undefined;
-        }
-        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
-        this.visibleRangeAnimationToken = NumberRangeAnimator_1.NumberRangeAnimator.animate(this.visibleRange, visibleRange, durationMs, function (range) {
-            _this.visibleRange = range;
-        }, onCompleted, easingFunction);
-        return this.visibleRangeAnimationToken;
-    };
+    Object.defineProperty(AxisCore.prototype, "animatedVisibleRange", {
+        get: function () {
+            if (!this.visibleRangeAnimationToken) {
+                return this.visibleRange;
+            }
+            var animation = this.visibleRangeAnimationToken;
+            return animation.to;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AxisCore.prototype, "majorDelta", {
         /**
          * The MajorDelta is the spacing between major gridlines and axis labels.
@@ -956,7 +942,7 @@ var AxisCore = /** @class */ (function () {
     AxisCore.prototype.getCurrentCoordinateCalculator = function (forceRecreate) {
         if (forceRecreate === void 0) { forceRecreate = false; }
         if (forceRecreate && this.coordCalcCache) {
-            this.coordCalcCache = Deleter_1.deleteSafe(this.coordCalcCache);
+            this.coordCalcCache = (0, Deleter_1.deleteSafe)(this.coordCalcCache);
         }
         if (!this.coordCalcCache) {
             this.coordCalcCache = this.getCurrentCoordinateCalculatorInternal();
@@ -967,7 +953,7 @@ var AxisCore = /** @class */ (function () {
      * @inheritDoc
      */
     AxisCore.prototype.delete = function () {
-        this.coordCalcCache = Deleter_1.deleteSafe(this.coordCalcCache);
+        this.coordCalcCache = (0, Deleter_1.deleteSafe)(this.coordCalcCache);
     };
     /**
      * Tests whether the range passed in is valid
@@ -1012,7 +998,7 @@ var AxisCore = /** @class */ (function () {
         if (propertyName === constants_1.PROPERTY.TICK_COORDINATES_CALCULATOR) {
             (_d = this.tickCoordinatesProvider) === null || _d === void 0 ? void 0 : _d.attachedToAxis(this);
         }
-        if (this.invalidateParentCallback) {
+        if (this.isMeasured && this.invalidateParentCallback) {
             this.invalidateParentCallback();
         }
     };

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

@@ -21,37 +21,100 @@ export declare class AxisRenderer implements IDeletable {
     private desiredTicksSize;
     private desiredHeightProperty;
     private desiredWidthProperty;
+    private axisThicknessProperty;
     private measureTextCanvas;
     private keepLabelsWithinAxisProperty;
     private hideOverlappingLabelsProperty;
+    /**
+     * Creates an instance of a {@link AxisRenderer}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     */
     constructor(webAssemblyContext: TSciChart);
+    /** @inheritDoc */
     delete(): void;
     /**
      * Called when the {@link AxisRenderer} is attached to an {@link AxisBase2D | Axis}
      * @param axis The Axis we are attached to.
      */
     attachedToAxis(axis: AxisBase2D): void;
+    /**
+     * Called internally - measures the axis label area as part of the layout phase
+     */
     measure(isHorizontalAxis: boolean, labelStyle: TTextStyle, majorTickLabels: string[], ticksSize: number, labelProvider: LabelProviderBase2D, drawLabels: boolean, drawTicks: boolean): void;
+    /**
+     * Called internally - calculates desired labels size
+     */
     calcDesiredLabelsSize(isHorizontalAxis: boolean, labelProvider: LabelProviderBase2D, labelStyle: TTextStyle, majorTickLabels: string[]): number;
+    /**
+     * Called internally - Gets or sets desired height during the layout process
+     */
     get desiredHeight(): number;
     set desiredHeight(height: number);
+    /**
+     * Called internally - Gets or sets desired width during the layout process
+     */
     get desiredWidth(): number;
     set desiredWidth(width: number);
+    /**
+     * Gets or sets keepLabelsWithinAxis property.
+     * When true (default), first and last labels will be shifted to stay within axis bounds.
+     * If set to false, these labels will stay aligned to their ticks
+     */
     get keepLabelsWithinAxis(): boolean;
     set keepLabelsWithinAxis(value: boolean);
+    /**
+     * Gets or sets hideOverlappingLabels property.
+     * Default (true) is to not show labels that would overlap. When using rotation you may want to set this false,
+     * as the bounding box of rotated text may overlap even if the text itself does not.
+     */
     get hideOverlappingLabels(): boolean;
     set hideOverlappingLabels(value: boolean);
+    /**
+     * Gets or sets axis label area thickness, by default the size is calculated to have enough space for labels.
+     * However, this property allows to set minimal width/height for vertical/horizontal axes.
+     * Useful to align seriesViewRects for different charts
+     */
+    get axisThickness(): number;
+    set axisThickness(value: number);
+    /**
+     * Called internally as a part of the layout process
+     */
     layout(rect: Rect): void;
+    /**
+     * Called internally - draws labels
+     */
     drawLabels(renderContext: WebGlRenderContext2D, axisAlignment: EAxisAlignment, isInnerAxis: boolean, tickLabels: string[], tickCoords: number[], axisOffset: number, labelStyle: TTextStyle, isVerticalChart: boolean, isFlippedCoordinates: boolean, labelProvider: LabelProviderBase2D): void;
+    /**
+     * Called internally - adjusts labels for label alignment
+     */
     adjustForLabelAlignment(xCoord: number, labelWidth: number, labelAlignment: ELabelAlignment, axisAlignment: EAxisAlignment, isInnerAxis: boolean, axisWidth: number, tickSize: number): number;
+    /**
+     * Called internally
+     */
     layoutLabels(size: number, tickCoords: number[], labelSizes: number[], isFlippedCoordinates: boolean, padBefore?: number, padAfter?: number): {
         labelCoords: number[];
         labelIndexes: number[];
     };
+    /**
+     * Called internally
+     */
     drawTicks(renderContext: WebGlRenderContext2D, axisAlignment: EAxisAlignment, isInnerAxis: boolean, tickCoords: number[], axisOffset: number, pen: SCRTPen, tickStyle: TTickLineStyle): void;
+    /**
+     * Called internally - draws axis labels when needed, for example for line annotations
+     */
     drawModifiersAxisLabel(renderContext: WebGlRenderContext2D, displayValue: string, coord: number, axisAlignment: EAxisAlignment, textStyle: TTextStyle, fill: string): Rect;
+    /**
+     * Called internally - used for {@link AxisMarkerAnnotation}
+     */
     createAxisMarker(axisAlignment: EAxisAlignment, text: string, textStyle: TTextStyle, backgroundColor?: string, opacity?: number): import("../TextureManager/TextureManager").TTextureObject;
+    /**
+     * Called internally - used for custom {@link AxisMarkerAnnotation}
+     */
     createAxisMarkerFromImage(image: HTMLImageElement, imageWidth: number, imageHeight: number): import("../TextureManager/TextureManager").TTextureObject;
+    /**
+     * Called internally
+     */
     createAnnotationLabelTexture(text: string, textStyle: TTextStyle, backgroundColor?: string, displayVertically?: boolean, displayMirrored?: boolean, opacity?: number): import("../TextureManager/TextureManager").TTextureObject;
     protected invalidateParent(): void;
     private drawLabelViewRects;