scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
285 lines (284 loc) • 15.2 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.PolarPanModifier = exports.EPolarPanModifierPanMode = void 0;
var NumberRange_1 = require("../../../Core/NumberRange");
var ExecuteOn_1 = require("../../../types/ChartModifiers/ExecuteOn");
var ModifierMouseArgKey_1 = require("../../../types/ChartModifiers/ModifierMouseArgKey");
var ChartModifierType_1 = require("../../../types/ChartModifierType");
var ModifierType_1 = require("../../../types/ModifierType");
var XyDirection_1 = require("../../../types/XyDirection");
var ZoomState_1 = require("../../../types/ZoomState");
var translate_1 = require("../../../utils/translate");
var PinchZoomModifier_1 = require("../PinchZoomModifier");
var EPolarPanModifierPanMode;
(function (EPolarPanModifierPanMode) {
EPolarPanModifierPanMode["PolarStartAngle"] = "PolarStartAngle";
EPolarPanModifierPanMode["PolarVisibleRange"] = "PolarVisibleRange";
EPolarPanModifierPanMode["Cartesian"] = "Cartesian";
})(EPolarPanModifierPanMode = exports.EPolarPanModifierPanMode || (exports.EPolarPanModifierPanMode = {}));
/**
* The PolarPanModifier provides drag to pan behavior on a 2D {@link SciChartPolarSurface}
* as well as pinch zoom behavior on touchscreen devices
* within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
* @remarks
*
* To apply the PolarPanModifier to a {@link SciChartPolarSurface} and add drag to pan behavior,
* use the following code:
*
* ```ts
* const sciChartSurface: SciChartPolarSurface;
* sciChartSurface.chartModifiers.add(new PolarPanModifier());
* ```
*
* ---
* 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/polar-modifiers/polar-pan-modifier/}
*/
var PolarPanModifier = /** @class */ (function (_super) {
__extends(PolarPanModifier, _super);
/**
* Creates an instance of a PolarPanModifier
* @param options optional parameters to pass to the PolarPanModifier to configure it upon construction
*
* ---
* 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/polar-modifiers/polar-pan-modifier/}
*/
function PolarPanModifier(options) {
var _this = this;
var _a, _b, _c, _d, _e, _f;
_this = _super.call(this, options) || this;
/** The pan mode to use with primary action {@link executeCondition} */
_this.primaryPanMode = EPolarPanModifierPanMode.Cartesian;
/** The pan mode to use with secondary action {@link secondaryExecuteCondition} */
_this.secondaryPanMode = EPolarPanModifierPanMode.PolarStartAngle;
/** The multiplier which applies to sensitivity of panning. Should be greater than 0 */
_this.growFactor = 1;
/** If True uses length scale zoom on the radial axis, otherwise uses visible range zoom. Default True */
_this.zoomSize = true;
_this.type = ChartModifierType_1.EChart2DModifierType.PolarPan;
_this.primaryPanMode = (_a = options === null || options === void 0 ? void 0 : options.primaryPanMode) !== null && _a !== void 0 ? _a : _this.primaryPanMode;
_this.secondaryPanMode = (_b = options === null || options === void 0 ? void 0 : options.secondaryPanMode) !== null && _b !== void 0 ? _b : _this.secondaryPanMode;
_this.growFactor = (_c = options === null || options === void 0 ? void 0 : options.growFactor) !== null && _c !== void 0 ? _c : _this.growFactor;
_this.executeCondition = (_d = options === null || options === void 0 ? void 0 : options.executeCondition) !== null && _d !== void 0 ? _d : {
button: ExecuteOn_1.EExecuteOn.MouseLeftButton,
key: ModifierMouseArgKey_1.EModifierMouseArgKey.None
};
_this.secondaryExecuteCondition = (_e = options === null || options === void 0 ? void 0 : options.secondaryExecuteCondition) !== null && _e !== void 0 ? _e : {
button: ExecuteOn_1.EExecuteOn.MouseRightButton,
key: ModifierMouseArgKey_1.EModifierMouseArgKey.None
};
_this.zoomSize = (_f = options === null || options === void 0 ? void 0 : options.zoomSize) !== null && _f !== void 0 ? _f : _this.zoomSize;
return _this;
}
Object.defineProperty(PolarPanModifier.prototype, "modifierType", {
/** @inheritDoc */
get: function () {
return ModifierType_1.EModifierType.Chart2DPolarModifier;
},
enumerable: false,
configurable: true
});
/** @inheritDoc */
PolarPanModifier.prototype.modifierMouseDown = function (args) {
// handles default browser dragging behavior when canvas was selected with Ctrl + A
args.nativeEvent.preventDefault();
var _a = this.checkExecuteConditions(args), isPrimary = _a.isPrimary, isSecondary = _a.isSecondary;
if (isPrimary) {
this.panMode = this.primaryPanMode;
}
else if (isSecondary) {
this.panMode = this.secondaryPanMode;
}
else {
this.panMode = undefined;
}
if (!this.panMode)
return;
if (!this.isAttached) {
throw new Error("Should not call PolarPanModifier.modifierMouseDown if not attached");
}
var translatedPoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(args.mousePoint, this.parentSurface.seriesViewRect);
if (!translatedPoint) {
return;
}
this.activePointerEvents.set(args.pointerId, args);
this.parentSurface.setZoomState(ZoomState_1.EZoomState.UserZooming);
};
/** @inheritDoc */
PolarPanModifier.prototype.modifierMouseMove = function (args) {
if (this.parentSurface.isSubSurface && !args.isActiveSubChartEvent)
return;
this.updatePointerInfo(args);
if (!this.previousPoint)
return;
// execute if action was triggered
var isActionAllowed = this.getIsActionAllowed(args);
if (isActionAllowed) {
if (this.panMode === EPolarPanModifierPanMode.Cartesian) {
this.performCartesianPan(args);
}
else if (this.panMode === EPolarPanModifierPanMode.PolarStartAngle) {
this.performPolarPan(true, this.zoomSize);
}
else if (this.panMode === EPolarPanModifierPanMode.PolarVisibleRange) {
this.performPolarPan(false, this.zoomSize);
}
}
};
/** @inheritDoc */
PolarPanModifier.prototype.modifierPointerCancel = function (args) {
_super.prototype.modifierPointerCancel.call(this, args);
this.activePointerEvents.clear();
};
/** @inheritDoc */
PolarPanModifier.prototype.modifierMouseUp = function (args) {
_super.prototype.modifierMouseUp.call(this, args);
this.panMode = undefined;
};
/** @inheritDoc */
PolarPanModifier.prototype.toJSON = function () {
var json = _super.prototype.toJSON.call(this);
var options = {
primaryPanMode: this.primaryPanMode,
secondaryPanMode: this.secondaryPanMode,
growFactor: this.growFactor,
zoomSize: this.zoomSize
};
Object.assign(json.options, options);
return json;
};
PolarPanModifier.prototype.getIsActionAllowed = function (args) {
// allow drag and pan only for the first active pointer in order of event occurrence
var capturedPointerEvent = this.activePointerEvents.values().next().value;
if (capturedPointerEvent.pointerId !== args.pointerId) {
return false;
}
return true;
};
PolarPanModifier.prototype.performCartesianPan = function (args) {
var currentPoint = args.mousePoint;
var xDelta = currentPoint.x - this.previousPoint.x;
var yDelta = this.previousPoint.y - currentPoint.y;
if (this.xyDirection === XyDirection_1.EXyDirection.XDirection) {
yDelta = 0;
}
if (this.xyDirection === XyDirection_1.EXyDirection.YDirection) {
xDelta = 0;
}
this.getIncludedXAxis().forEach(function (x) {
if (x.isPolarAxis) {
var axis = x;
if (axis.isAngular) {
axis.xCenterOffset += xDelta;
axis.yCenterOffset -= yDelta;
}
}
});
this.getIncludedYAxis().forEach(function (y) {
if (y.isPolarAxis) {
var axis = y;
if (axis.isAngular) {
axis.xCenterOffset += xDelta;
axis.yCenterOffset -= yDelta;
}
}
});
};
/**
* Performs polar pan
* @param isStartAngleMode If True uses the start angle pan on X axis, if False the visible range pan
* @param isLengthScaleZoom If True uses the length scale zoom on Y axis, if False the visible range zoom
*/
PolarPanModifier.prototype.performPolarPan = function (isStartAngleMode, isLengthScaleZoom) {
var _this = this;
var seriesViewRect = this.parentSurface.seriesViewRect;
var pointFrom = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.previousPoint, seriesViewRect);
var pointTo = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, seriesViewRect);
if (pointFrom && pointTo) {
this.getIncludedXAxis().forEach(function (xAxis) {
if (xAxis.isPolarAxis) {
var polarXAxis = xAxis;
var polarYAxis = polarXAxis.otherAxis;
if (polarXAxis.isAngular) {
var polarPointFrom = polarXAxis.reverseTransform(pointFrom.x, pointFrom.y);
var polarPointTo = polarXAxis.reverseTransform(pointTo.x, pointTo.y);
var angleDelta = polarPointTo.x - polarPointFrom.x;
var startAngle0 = polarXAxis.startAngle;
// handles both normal and flipped X Axis
if (_this.xyDirection !== XyDirection_1.EXyDirection.YDirection) {
if (isStartAngleMode) {
var startAngle1 = startAngle0 + angleDelta * _this.growFactor;
polarXAxis.startAngle = startAngle1;
polarYAxis.startAngle = startAngle1;
}
else {
var visibleRange = polarXAxis.visibleRange, totalAngle = polarXAxis.totalAngle;
var xDelta = (angleDelta * _this.growFactor * (visibleRange.max - visibleRange.min)) / totalAngle;
polarXAxis.visibleRange = new NumberRange_1.NumberRange(visibleRange.min - xDelta, visibleRange.max - xDelta);
}
}
if (_this.xyDirection !== XyDirection_1.EXyDirection.XDirection) {
if (isLengthScaleZoom) {
polarYAxis.lengthScale =
polarYAxis.lengthScale +
polarYAxis.lengthScale * (polarPointTo.y / polarPointFrom.y - 1) * _this.growFactor;
}
else {
var _a = polarYAxis.visibleRange, min = _a.min, max = _a.max;
var newMax = max + ((max * polarPointFrom.y) / polarPointTo.y - max) * _this.growFactor;
polarYAxis.visibleRange = new NumberRange_1.NumberRange(min, newMax);
}
}
}
else {
var polarPointFrom = polarXAxis.reverseTransform(pointFrom.x, pointFrom.y);
var polarPointTo = polarXAxis.reverseTransform(pointTo.x, pointTo.y);
var angleDelta = polarPointTo.y - polarPointFrom.y;
var startAngle0 = polarXAxis.startAngle;
// handles both normal and flipped X Axis
if (_this.xyDirection !== XyDirection_1.EXyDirection.XDirection) {
if (isStartAngleMode) {
var startAngle1 = startAngle0 + angleDelta * _this.growFactor;
polarXAxis.startAngle = startAngle1;
polarYAxis.startAngle = startAngle1;
}
else {
var visibleRange = polarYAxis.visibleRange, totalAngle = polarYAxis.totalAngle;
var xDelta = (angleDelta * _this.growFactor * (visibleRange.max - visibleRange.min)) / totalAngle;
polarYAxis.visibleRange = new NumberRange_1.NumberRange(visibleRange.min - xDelta, visibleRange.max - xDelta);
}
}
if (_this.xyDirection !== XyDirection_1.EXyDirection.YDirection) {
if (isLengthScaleZoom) {
polarXAxis.lengthScale =
polarXAxis.lengthScale +
polarXAxis.lengthScale * (polarPointTo.x / polarPointFrom.x - 1) * _this.growFactor;
}
else {
var _b = polarXAxis.visibleRange, min = _b.min, max = _b.max;
var newMax = max + ((max * polarPointFrom.x) / polarPointTo.x - max) * _this.growFactor;
polarXAxis.visibleRange = new NumberRange_1.NumberRange(min, newMax);
}
}
}
}
});
}
};
return PolarPanModifier;
}(PinchZoomModifier_1.PinchZoomModifier));
exports.PolarPanModifier = PolarPanModifier;