import { __assign, __extends } from "tslib"; import { deepMix, get, isObject, size } from '@antv/util'; import { COMPONENT_TYPE, DIRECTION, LAYER } from '../../constant'; import { Slider as SliderComponent } from '../../dependents'; import { BBox } from '../../util/bbox'; import { directionToPosition } from '../../util/direction'; import { isBetween, omit } from '../../util/helper'; import { Controller } from './base'; /** * @ignore * slider Controller */ var Slider = /** @class */ (function (_super) { __extends(Slider, _super); function Slider(view) { var _this = _super.call(this, view) || this; /** * 滑块滑动的时候出发 * @param v */ _this.onValueChanged = function (v) { var min = v[0], max = v[1]; _this.updateMinMaxText(min, max); _this.view.render(true); }; _this.container = _this.view.getLayer(LAYER.FORE).addGroup(); return _this; } Object.defineProperty(Slider.prototype, "name", { get: function () { return 'slider'; }, enumerable: false, configurable: true }); /** * 初始化 */ Slider.prototype.init = function () { }; /** * 渲染 */ Slider.prototype.render = function () { this.option = this.view.getOptions().slider; if (this.option) { if (this.slider) { // exist, update this.slider = this.updateSlider(); } else { // not exist, create this.slider = this.createSlider(); // 监听事件,绑定交互 this.slider.component.on('sliderchange', this.onValueChanged); } // changeData 的时候同样需要更新 // 设置初始的 text var min = this.slider.component.get('start') || 0; var max = this.slider.component.get('end') || 1; this.updateMinMaxText(min, max); } else { if (this.slider) { // exist, destroy this.slider.component.destroy(); this.slider = undefined; } else { // do nothing } } }; /** * 布局 */ Slider.prototype.layout = function () { if (this.slider) { var width = this.view.coordinateBBox.width; // 获取组件的 layout bbox var bboxObject = this.slider.component.getLayoutBBox(); var bbox = new BBox(bboxObject.x, bboxObject.y, Math.min(bboxObject.width, width), bboxObject.height); var _a = directionToPosition(this.view.viewBBox, bbox, DIRECTION.BOTTOM), x1 = _a[0], y1 = _a[1]; var _b = directionToPosition(this.view.coordinateBBox, bbox, DIRECTION.BOTTOM), x2 = _b[0], y2 = _b[1]; // 默认放在 bottom this.slider.component.update({ x: x2, y: y1, width: width, }); } }; /** * 更新 */ Slider.prototype.update = function () { // 逻辑和 render 保持一致 this.render(); }; /** * 创建 slider 组件 */ Slider.prototype.createSlider = function () { var cfg = this.getSliderCfg(); // 添加 slider 组件 var component = new SliderComponent(__assign({ container: this.container }, cfg)); component.init(); return { component: component, layer: LAYER.FORE, direction: DIRECTION.BOTTOM, type: COMPONENT_TYPE.OTHER, }; }; /** * 更新配置 */ Slider.prototype.updateSlider = function () { var cfg = this.getSliderCfg(); omit(cfg, ['x', 'y', 'width', 'start', 'end', 'minText', 'maxText']); this.slider.component.update(cfg); return this.slider; }; /** * 生成 slider 配置 */ Slider.prototype.getSliderCfg = function () { if (isObject(this.option)) { // 用户配置的数据,优先级更高 var trendCfg = __assign({ data: this.getData() }, get(this.option, 'trendCfg', {})); // 初始的位置大小信息 var x = 0; var y = 0; var width = this.view.coordinateBBox.width; // 因为有样式,所以深层覆盖 var cfg = deepMix({}, { x: x, y: y, width: width }, this.option); // trendCfg 因为有数据数组,所以使用浅替换 return __assign(__assign({}, cfg), { trendCfg: trendCfg }); } return {}; }; /** * 从 view 中获取数据,缩略轴使用全量的数据 */ Slider.prototype.getData = function () { var data = this.view.getOptions().data; var yScale = this.view.getYScales()[0]; return data.map(function (datum) { return datum[yScale.field] || 0; }); }; Slider.prototype.updateMinMaxText = function (min, max) { var data = this.view.getOptions().data; var dataSize = size(data); var xScale = this.view.getXScale(); if (!xScale || !dataSize) { return; } var x = xScale.field; // x 轴数据 var xData = data.map(function (datum) { return datum[x] || ''; }); var minIndex = Math.floor(min * (dataSize - 1)); var maxIndex = Math.floor(max * (dataSize - 1)); var minText = get(xData, [minIndex]); var maxText = get(xData, [maxIndex]); var formatter = this.getSliderCfg().formatter; if (formatter) { minText = formatter(minText, data[minIndex], minIndex); maxText = formatter(maxText, data[maxIndex], maxIndex); } // 更新文本 this.slider.component.update({ minText: minText, maxText: maxText, start: min, end: max, }); // 增加 x 轴的过滤器 this.view.filter(xScale.field, function (value, datum, idx) { return isBetween(idx, minIndex, maxIndex); }); }; /** * 覆写父类方法 */ Slider.prototype.getComponents = function () { return this.slider ? [this.slider] : []; }; return Slider; }(Controller)); export default Slider; //# sourceMappingURL=slider.js.map