@antv/f2
Version:
Charts for mobile visualization.
233 lines • 6.6 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _get from "@babel/runtime/helpers/esm/get";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import Layout from '../base/layout';
import { isArray, isFunction } from '@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 (isArray(x)) {
xMin = x[0];
xMax = x[1];
} else {
xMin = x - size / 2;
xMax = x + size / 2;
}
var yMin;
var yMax;
if (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) {
_inherits(Base, _Layout);
var _super = _createSuper(Base);
function Base(option) {
var _this;
_classCallCheck(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;
}
_createClass(Base, [{
key: "update",
value: function update(option) {
_get(_getPrototypeOf(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 ? 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 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 = {}, _defineProperty(_ref3, xDim, this._zoomVal(point.x, function (v) {
return (v - x[0]) / (x[1] - x[0]);
})), _defineProperty(_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 = _slicedToArray(xRange, 2),
xStart = _xRange[0],
xEnd = _xRange[1];
var _yRange = _slicedToArray(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);
export default Base;