scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
224 lines (223 loc) • 11 kB
JavaScript
"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.MouseWheelZoomModifier = exports.EActionType = void 0;
var ModifierMouseArgKey_1 = require("../../types/ChartModifiers/ModifierMouseArgKey");
var ChartModifierType_1 = require("../../types/ChartModifierType");
var XyDirection_1 = require("../../types/XyDirection");
var ZoomState_1 = require("../../types/ZoomState");
var translate_1 = require("../../utils/translate");
var AxisBase2D_1 = require("../Visuals/Axis/AxisBase2D");
var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
/**
* Defines enumeration constants for the zoom or pan action on {@link MouseWheelZoomModifier}
*/
var EActionType;
(function (EActionType) {
/**
* Zooms in and out when the Mouse Wheel event occurs
*/
EActionType["Zoom"] = "Zoom";
/**
* Pans when the Mouse Wheel event occurs
*/
EActionType["Pan"] = "Pan";
})(EActionType = exports.EActionType || (exports.EActionType = {}));
/**
* The MouseWheelZoomModifier provides Mouse wheel zooming behavior on a 2D {@link SciChartSurface}
* within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
* @remarks
*
* To apply the MouseWheelZoomModifier to a {@link SciChartSurface} and add Mouse-wheel zoom behavior,
* use the following code:
*
* ```ts
* const sciChartSurface: SciChartSurface;
* sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
* ```
*
* The speed of mouse-wheel zoom can be modified via the {@link MouseWheelZoomModifier.growFactor} property.
*
* ---
* 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/zooming-and-panning/mouse-wheel-zoom-modifier/}
*/
var MouseWheelZoomModifier = /** @class */ (function (_super) {
__extends(MouseWheelZoomModifier, _super);
/**
* Creates an instance of MouseWheelZoomModifier
* @param options Optional parameters to configure the modifier via {@link IMouseWheelZoomModifierOptions}
*
* ---
* 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/zooming-and-panning/mouse-wheel-zoom-modifier/}
*/
function MouseWheelZoomModifier(options) {
var _this = this;
var _a, _b, _c, _d, _e;
_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.
*/
_this.applyToSeriesViewRect = true;
/**
* Whether the modifier applies when the mouse is over the axes. Default true.
*/
_this.applyToAxes = true;
_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;
}
_this.executeCondition = (_e = options === null || options === void 0 ? void 0 : options.executeCondition) !== null && _e !== void 0 ? _e : { button: undefined, key: ModifierMouseArgKey_1.EModifierMouseArgKey.None };
return _this;
}
/**
* @inheritDoc
*/
MouseWheelZoomModifier.prototype.modifierMouseWheel = function (args) {
var _this = this;
if (!this.checkExecuteConditions(args).isPrimary)
return;
_super.prototype.modifierMouseWheel.call(this, args);
var zoomPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect);
if (zoomPoint && this.applyToSeriesViewRect) {
if (this.actionType === EActionType.Zoom) {
args.handled = this.performZoom(zoomPoint, args.mouseWheelDelta);
}
else if (this.actionType === EActionType.Pan) {
args.handled = this.performPan(args.mouseWheelDelta);
}
}
else if (this.applyToAxes) {
var targetAxes = [];
if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
targetAxes.push.apply(targetAxes, this.getIncludedXAxis());
}
if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
targetAxes.push.apply(targetAxes, this.getIncludedYAxis());
}
var activeAxes = (0, ChartModifierBase2D_1.getActiveAxes)(targetAxes, args.mousePoint);
if (activeAxes.length > 0) {
args.handled = true;
if (this.actionType === EActionType.Zoom) {
var fraction_1 = this.growFactor * args.mouseWheelDelta;
var mousePoint_1 = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect, true);
activeAxes.forEach(function (axis) {
_this.growBy(mousePoint_1, axis, fraction_1);
});
}
else if (this.actionType === EActionType.Pan) {
activeAxes.forEach(function (axis) {
var size = _this.getAxisSize(axis);
var pixels = args.mouseWheelDelta * _this.growFactor * size;
axis.scroll(pixels, AxisBase2D_1.EClipMode.None);
});
}
}
}
if (args.handled) {
this.parentSurface.setZoomState(ZoomState_1.EZoomState.UserZooming);
}
};
/**
* Performs the zoom operation around the mouse point
* @param mousePoint The X,Y location of the mouse at the time of the zoom
* @param wheelDelta the MouseWheel delta
*/
MouseWheelZoomModifier.prototype.performZoom = function (mousePoint, wheelDelta) {
var _this = this;
var fraction = this.growFactor * wheelDelta;
var anyUpdated = false;
if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
this.getIncludedXAxis().forEach(function (axis) {
_this.growBy(mousePoint, axis, fraction);
anyUpdated = true;
});
}
if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
this.getIncludedYAxis().forEach(function (axis) {
_this.growBy(mousePoint, axis, fraction);
anyUpdated = true;
});
}
return anyUpdated;
};
/**
* Performs a pan operation
* @param wheelDelta the MouseWheel delta
*/
MouseWheelZoomModifier.prototype.performPan = function (wheelDelta) {
var _this = this;
var anyUpdated = false;
if ([XyDirection_1.EXyDirection.XDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
this.getIncludedXAxis().forEach(function (axis) {
var size = _this.getAxisSize(axis);
var pixels = wheelDelta * _this.growFactor * size;
axis.scroll(pixels, AxisBase2D_1.EClipMode.None);
anyUpdated = true;
});
}
if ([XyDirection_1.EXyDirection.YDirection, XyDirection_1.EXyDirection.XyDirection].includes(this.xyDirection)) {
this.getIncludedYAxis().forEach(function (axis) {
var size = _this.getAxisSize(axis);
var pixels = wheelDelta * _this.growFactor * size;
axis.scroll(pixels, AxisBase2D_1.EClipMode.None);
anyUpdated = true;
});
}
return anyUpdated;
};
MouseWheelZoomModifier.prototype.toJSON = function () {
var json = _super.prototype.toJSON.call(this);
var options = {
actionType: this.actionType,
growFactor: this.growFactor,
applyToSeriesViewRect: this.applyToSeriesViewRect,
applyToAxes: this.applyToAxes
};
Object.assign(json.options, options);
return json;
};
/**
* Gets the axis size for scroll calculations
* @param axis
* @protected
*/
MouseWheelZoomModifier.prototype.getAxisSize = function (axis) {
var size = axis.isHorizontalAxis ? axis.viewRect.width : axis.viewRect.height;
if (Math.abs(size) < 0.00000001 && this.parentSurface) {
size = axis.isHorizontalAxis
? this.parentSurface.seriesViewRect.width
: this.parentSurface.seriesViewRect.height;
}
return size;
};
return MouseWheelZoomModifier;
}(ChartModifierBase2D_1.ChartModifierBase2D));
exports.MouseWheelZoomModifier = MouseWheelZoomModifier;