@antv/f2
Version:
Charts for mobile visualization.
241 lines (240 loc) • 7.21 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _layout = _interopRequireDefault(require("../base/layout"));
var _util = require("@antv/util");
function transposedRect(_ref) {
var xMin = _ref.xMin,
xMax = _ref.xMax,
yMin = _ref.yMin,
yMax = _ref.yMax;
return {
xMin: yMin,
xMax: yMax,
yMin: xMin,
yMax: xMax
};
}
function _convertRect(_ref2) {
var x = _ref2.x,
y = _ref2.y,
size = _ref2.size,
y0 = _ref2.y0;
var xMin;
var xMax;
if ((0, _util.isArray)(x)) {
xMin = x[0];
xMax = x[1];
} else {
xMin = x - size / 2;
xMax = x + size / 2;
}
var yMin;
var yMax;
if ((0, _util.isArray)(y)) {
yMin = y[0];
yMax = y[1];
} else {
yMin = Math.min(y0, y);
yMax = Math.max(y0, y);
}
return {
xMin: xMin,
xMax: xMax,
yMin: yMin,
yMax: yMax
};
}
/**
* 直角坐标系
* convert相关的方法，涉及将标准坐标系映射到实际坐标系内
* transform相关的方法，是仅将某一种关键点转换成另一种关键点 (比如将x/y/size/y0转换成yMin/yMax/..)
*/
var Base = /*#__PURE__*/function (_Layout) {
(0, _inherits2.default)(Base, _Layout);
var _super = (0, _createSuper2.default)(Base);
function Base(option) {
var _this;
(0, _classCallCheck2.default)(this, Base);
_this = _super.call(this, option);
// x y 调换
_this.transposed = false;
// x，y 的值域，在极坐标中对应的就是弧度和半径
_this.x = [0, 1];
_this.y = [0, 1];
_this.update(option);
return _this;
}
(0, _createClass2.default)(Base, [{
key: "update",
value: function update(option) {
(0, _get2.default)((0, _getPrototypeOf2.default)(Base.prototype), "update", this).call(this, option);
var left = this.left,
top = this.top,
width = this.width,
height = this.height;
var center = option.center;
var coordCenter = center ? (0, _util.isFunction)(center) ? center(width, height) : center : [width / 2, height / 2];
this.center = {
x: left + coordCenter[0],
y: top + coordCenter[1]
};
return this;
}
// 是循环， 比如极坐标是以 2π 循环的
}, {
key: "isCyclic",
value: function isCyclic() {
return false;
}
}, {
key: "_zoomVal",
value: function _zoomVal(val, func) {
return (0, _util.isArray)(val) ? val.map(function (v) {
return func(v);
}) : func(val);
}
/**
* 把归一后的值映射到对应的定义域
* @param point
*/
}, {
key: "convert",
value: function convert(point) {
var transposed = this.transposed,
x = this.x,
y = this.y;
var xDim = transposed ? 'y' : 'x';
var yDim = transposed ? 'x' : 'y';
var pointX = point[xDim];
var pointY = point[yDim];
// 超出边界不绘制
if (pointX < 0 || pointX > 1 || pointY < 0 || pointY > 1) {
return {
x: NaN,
y: NaN
};
}
return {
x: this._zoomVal(point[xDim], function (v) {
return x[0] + (x[1] - x[0]) * v;
}),
y: this._zoomVal(point[yDim], function (v) {
return y[0] + (y[1] - y[0]) * v;
})
};
}
/**
* convert 的反处理，把定义域的值，反处理到归一的值
*/
}, {
key: "invert",
value: function invert(point) {
var _ref3;
var transposed = this.transposed,
x = this.x,
y = this.y;
var xDim = transposed ? 'y' : 'x';
var yDim = transposed ? 'x' : 'y';
return _ref3 = {}, (0, _defineProperty2.default)(_ref3, xDim, this._zoomVal(point.x, function (v) {
return (v - x[0]) / (x[1] - x[0]);
})), (0, _defineProperty2.default)(_ref3, yDim, this._zoomVal(point.y, function (v) {
return (v - y[0]) / (y[1] - y[0]);
})), _ref3;
}
/**
* 把归一化的值映射到 canvas 的坐标点
* @param point
* @returns
*/
}, {
key: "convertPoint",
value: function convertPoint(point) {
return this.convert(point);
}
/**
* 把canvas坐标的点位映射回归一的值
*/
}, {
key: "invertPoint",
value: function invertPoint(point) {
return this.invert(point);
}
// 将标准坐标系下的矩形绘制关键点映射成实际绘制的坐标点
}, {
key: "convertRect",
value: function convertRect(rectPoint) {
var xRange = this.x,
yRange = this.y,
transposed = this.transposed;
var _xRange = (0, _slicedToArray2.default)(xRange, 2),
xStart = _xRange[0],
xEnd = _xRange[1];
var _yRange = (0, _slicedToArray2.default)(yRange, 2),
yStart = _yRange[0],
yEnd = _yRange[1];
var rect = _convertRect(rectPoint);
var _ref4 = transposed ? transposedRect(rect) : rect,
xMin = _ref4.xMin,
xMax = _ref4.xMax,
yMin = _ref4.yMin,
yMax = _ref4.yMax;
var x0 = xStart + (xEnd - xStart) * xMin;
var x1 = xStart + (xEnd - xStart) * xMax;
var y0 = yStart + (yEnd - yStart) * yMin;
var y1 = yStart + (yEnd - yStart) * yMax;
return {
xMin: Math.min(x0, x1),
xMax: Math.max(x0, x1),
yMin: Math.min(y0, y1),
yMax: Math.max(y0, y1)
};
}
// 将已经映射好的矩形绘制关键点转换成实际绘制的坐标点
}, {
key: "transformToRect",
value: function transformToRect(rectPoint) {
var x = rectPoint.x,
y = rectPoint.y,
y0 = rectPoint.y0,
size = rectPoint.size;
var coordOrigin = this.convertPoint({
x: 0,
y: y0
});
var transposed = this.transposed;
var _rectPoint = {
size: size,
x: transposed ? y : x,
y: transposed ? x : y,
y0: transposed ? coordOrigin.x : coordOrigin.y
};
var rect = _convertRect(_rectPoint);
var _ref5 = transposed ? transposedRect(rect) : rect,
xMin = _ref5.xMin,
xMax = _ref5.xMax,
yMin = _ref5.yMin,
yMax = _ref5.yMax;
return {
xMin: xMin,
xMax: xMax,
yMin: yMin,
yMax: yMax
};
}
}]);
return Base;
}(_layout.default);
var _default = Base;
exports.default = _default;