@antv/g2/lib/chart/controller/scrollbar.js

the Grammar of Graphics in Javascript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var base_1 = require("./base");
var dependents_1 = require("../../dependents");
var bbox_1 = require("../../util/bbox");
var direction_1 = require("../../util/direction");
var constant_1 = require("../../constant");
var util_1 = require("@antv/util");
var helper_1 = require("../../util/helper");
var DEFAULT_PADDING = 0;
var DEFAULT_SIZE = 8;
var DEFAULT_CATEGORY_SIZE = 32;
var MIN_THUMB_LENGTH = 20;
var Scrollbar = /** @class */ (function (_super) {
    tslib_1.__extends(Scrollbar, _super);
    function Scrollbar(view) {
        var _this = _super.call(this, view) || this;
        _this.onChangeFn = util_1.noop;
        _this.resetMeasure = function () {
            _this.clear();
        };
        _this.onValueChange = function (_a) {
            var ratio = _a.ratio;
            var animate = _this.getValidScrollbarCfg().animate;
            _this.ratio = (0, util_1.clamp)(ratio, 0, 1);
            var originalAnimate = _this.view.getOptions().animate;
            if (!animate) {
                _this.view.animate(false);
            }
            _this.changeViewData(_this.getScrollRange(), true);
            _this.view.animate(originalAnimate);
        };
        _this.container = _this.view.getLayer(constant_1.LAYER.FORE).addGroup();
        _this.onChangeFn = (0, util_1.throttle)(_this.onValueChange, 20, {
            leading: true,
        });
        _this.trackLen = 0;
        _this.thumbLen = 0;
        _this.ratio = 0;
        _this.view.on(constant_1.VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, _this.resetMeasure);
        _this.view.on(constant_1.VIEW_LIFE_CIRCLE.BEFORE_CHANGE_SIZE, _this.resetMeasure);
        return _this;
    }
    Object.defineProperty(Scrollbar.prototype, "name", {
        get: function () {
            return 'scrollbar';
        },
        enumerable: false,
        configurable: true
    });
    Scrollbar.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        this.view.off(constant_1.VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, this.resetMeasure);
        this.view.off(constant_1.VIEW_LIFE_CIRCLE.BEFORE_CHANGE_SIZE, this.resetMeasure);
    };
    Scrollbar.prototype.init = function () { };
    /**
     * 渲染
     */
    Scrollbar.prototype.render = function () {
        this.option = this.view.getOptions().scrollbar;
        if (this.option) {
            if (this.scrollbar) {
                // exist, update
                this.scrollbar = this.updateScrollbar();
            }
            else {
                // not exist, create
                this.scrollbar = this.createScrollbar();
                this.scrollbar.component.on('scrollchange', this.onChangeFn);
            }
        }
        else {
            if (this.scrollbar) {
                // exist, destroy
                this.scrollbar.component.destroy();
                this.scrollbar = undefined;
            }
        }
    };
    /**
     * 布局
     */
    Scrollbar.prototype.layout = function () {
        var _this = this;
        if (this.option && !this.trackLen) {
            this.measureScrollbar();
            setTimeout(function () {
                if (!_this.view.destroyed) {
                    _this.changeViewData(_this.getScrollRange(), true);
                }
            });
        }
        if (this.scrollbar) {
            var width = this.view.coordinateBBox.width;
            var padding = this.scrollbar.component.get('padding');
            var bboxObject = this.scrollbar.component.getLayoutBBox();
            var bbox = new bbox_1.BBox(bboxObject.x, bboxObject.y, Math.min(bboxObject.width, width), bboxObject.height).expand(padding);
            var cfg = this.getScrollbarComponentCfg();
            var x = void 0;
            var y = void 0;
            if (cfg.isHorizontal) {
                var _a = tslib_1.__read((0, direction_1.directionToPosition)(this.view.viewBBox, bbox, constant_1.DIRECTION.BOTTOM), 2), x1 = _a[0], y1 = _a[1];
                var _b = tslib_1.__read((0, direction_1.directionToPosition)(this.view.coordinateBBox, bbox, constant_1.DIRECTION.BOTTOM), 2), x2 = _b[0], y2 = _b[1];
                x = x2;
                y = y1;
            }
            else {
                var _c = tslib_1.__read((0, direction_1.directionToPosition)(this.view.viewBBox, bbox, constant_1.DIRECTION.RIGHT), 2), x1 = _c[0], y1 = _c[1];
                var _d = tslib_1.__read((0, direction_1.directionToPosition)(this.view.viewBBox, bbox, constant_1.DIRECTION.RIGHT), 2), x2 = _d[0], y2 = _d[1];
                x = x2;
                y = y1;
            }
            x += padding[3];
            y += padding[0];
            // 默认放在 bottom
            if (this.trackLen) {
                this.scrollbar.component.update(tslib_1.__assign(tslib_1.__assign({}, cfg), { x: x, y: y, trackLen: this.trackLen, thumbLen: this.thumbLen, thumbOffset: (this.trackLen - this.thumbLen) * this.ratio }));
            }
            else {
                this.scrollbar.component.update(tslib_1.__assign(tslib_1.__assign({}, cfg), { x: x, y: y }));
            }
            this.view.viewBBox = this.view.viewBBox.cut(bbox, cfg.isHorizontal ? constant_1.DIRECTION.BOTTOM : constant_1.DIRECTION.RIGHT);
        }
    };
    /**
     * 更新
     */
    Scrollbar.prototype.update = function () {
        // 逻辑和 render 保持一致
        this.render();
    };
    Scrollbar.prototype.getComponents = function () {
        return this.scrollbar ? [this.scrollbar] : [];
    };
    Scrollbar.prototype.clear = function () {
        if (this.scrollbar) {
            this.scrollbar.component.destroy();
            this.scrollbar = undefined;
        }
        this.trackLen = 0;
        this.thumbLen = 0;
        this.ratio = 0;
        this.cnt = 0;
        this.step = 0;
        this.data = undefined;
        this.xScaleCfg = undefined;
        this.yScalesCfg = [];
    };
    /** 设置滚动条位置  */
    Scrollbar.prototype.setValue = function (ratio) {
        this.onValueChange({ ratio: ratio });
    };
    /** 获得滚动条位置  */
    Scrollbar.prototype.getValue = function () {
        return this.ratio;
    };
    /**
     * 获取 scrollbar 的主题配置
     */
    Scrollbar.prototype.getThemeOptions = function () {
        var theme = this.view.getTheme();
        return (0, util_1.get)(theme, ['components', 'scrollbar', 'common'], {});
    };
    /**
     * 获取 scrollbar 组件的主题样式
     */
    Scrollbar.prototype.getScrollbarTheme = function (style) {
        var theme = (0, util_1.get)(this.view.getTheme(), ['components', 'scrollbar']);
        var _a = style || {}, thumbHighlightColor = _a.thumbHighlightColor, restStyles = tslib_1.__rest(_a, ["thumbHighlightColor"]);
        return {
            default: (0, util_1.deepMix)({}, (0, util_1.get)(theme, ['default', 'style'], {}), restStyles),
            hover: (0, util_1.deepMix)({}, (0, util_1.get)(theme, ['hover', 'style'], {}), { thumbColor: thumbHighlightColor }),
        };
    };
    Scrollbar.prototype.measureScrollbar = function () {
        var xScale = this.view.getXScale();
        var yScales = this.view.getYScales().slice();
        this.data = this.getScrollbarData();
        this.step = this.getStep();
        this.cnt = this.getCnt();
        var _a = this.getScrollbarComponentCfg(), trackLen = _a.trackLen, thumbLen = _a.thumbLen;
        this.trackLen = trackLen;
        this.thumbLen = thumbLen;
        this.xScaleCfg = {
            field: xScale.field,
            values: xScale.values || [],
        };
        this.yScalesCfg = yScales;
    };
    Scrollbar.prototype.getScrollRange = function () {
        var startIdx = Math.floor((this.cnt - this.step) * (0, util_1.clamp)(this.ratio, 0, 1));
        var endIdx = Math.min(startIdx + this.step - 1, this.cnt - 1);
        return [startIdx, endIdx];
    };
    Scrollbar.prototype.changeViewData = function (_a, render) {
        var _this = this;
        var _b = tslib_1.__read(_a, 2), startIdx = _b[0], endIdx = _b[1];
        var type = this.getValidScrollbarCfg().type;
        var isHorizontal = type !== 'vertical';
        var values = (0, util_1.valuesOfKey)(this.data, this.xScaleCfg.field);
        // 如果是 xScale 数值类型，则进行排序
        var xScaleValues = this.view.getXScale().isLinear ? values.sort(function (a, b) { return Number(a) - Number(b); }) : values;
        var xValues = isHorizontal ? xScaleValues : xScaleValues.reverse();
        this.yScalesCfg.forEach(function (cfg) {
            _this.view.scale(cfg.field, {
                formatter: cfg.formatter,
                type: cfg.type,
                min: cfg.min,
                max: cfg.max,
                tickMethod: cfg.tickMethod
            });
        });
        this.view.filter(this.xScaleCfg.field, function (val) {
            var idx = xValues.indexOf(val);
            return idx > -1 ? (0, helper_1.isBetween)(idx, startIdx, endIdx) : true;
        });
        this.view.render(true);
    };
    Scrollbar.prototype.createScrollbar = function () {
        var type = this.getValidScrollbarCfg().type;
        var isHorizontal = type !== 'vertical';
        var component = new dependents_1.Scrollbar(tslib_1.__assign(tslib_1.__assign({ container: this.container }, this.getScrollbarComponentCfg()), { x: 0, y: 0 }));
        component.init();
        return {
            component: component,
            layer: constant_1.LAYER.FORE,
            direction: isHorizontal ? constant_1.DIRECTION.BOTTOM : constant_1.DIRECTION.RIGHT,
            type: constant_1.COMPONENT_TYPE.SCROLLBAR,
        };
    };
    Scrollbar.prototype.updateScrollbar = function () {
        var config = this.getScrollbarComponentCfg();
        var realConfig = this.trackLen
            ? tslib_1.__assign(tslib_1.__assign({}, config), { trackLen: this.trackLen, thumbLen: this.thumbLen, thumbOffset: (this.trackLen - this.thumbLen) * this.ratio }) : tslib_1.__assign({}, config);
        this.scrollbar.component.update(realConfig);
        return this.scrollbar;
    };
    Scrollbar.prototype.getStep = function () {
        if (this.step) {
            return this.step;
        }
        var coordinateBBox = this.view.coordinateBBox;
        var _a = this.getValidScrollbarCfg(), type = _a.type, categorySize = _a.categorySize;
        var isHorizontal = type !== 'vertical';
        return Math.floor((isHorizontal ? coordinateBBox.width : coordinateBBox.height) / categorySize);
    };
    Scrollbar.prototype.getCnt = function () {
        if (this.cnt) {
            return this.cnt;
        }
        var xScale = this.view.getXScale();
        var data = this.getScrollbarData();
        var values = (0, util_1.valuesOfKey)(data, xScale.field);
        return (0, util_1.size)(values);
    };
    Scrollbar.prototype.getScrollbarComponentCfg = function () {
        var _a = this.view, coordinateBBox = _a.coordinateBBox, viewBBox = _a.viewBBox;
        var _b = this.getValidScrollbarCfg(), type = _b.type, padding = _b.padding, width = _b.width, height = _b.height, style = _b.style;
        var isHorizontal = type !== 'vertical';
        var _c = tslib_1.__read(padding, 4), paddingTop = _c[0], paddingRight = _c[1], paddingBottom = _c[2], paddingLeft = _c[3];
        var position = isHorizontal
            ? {
                x: coordinateBBox.minX + paddingLeft,
                y: viewBBox.maxY - height - paddingBottom,
            }
            : {
                x: viewBBox.maxX - width - paddingRight,
                y: coordinateBBox.minY + paddingTop,
            };
        var step = this.getStep();
        var cnt = this.getCnt();
        var trackLen = isHorizontal
            ? coordinateBBox.width - paddingLeft - paddingRight
            : coordinateBBox.height - paddingTop - paddingBottom;
        var thumbLen = Math.max(trackLen * (0, util_1.clamp)(step / cnt, 0, 1), MIN_THUMB_LENGTH);
        return tslib_1.__assign(tslib_1.__assign({}, this.getThemeOptions()), { x: position.x, y: position.y, size: isHorizontal ? height : width, isHorizontal: isHorizontal, trackLen: trackLen, thumbLen: thumbLen, thumbOffset: 0, theme: this.getScrollbarTheme(style) });
    };
    /**
     * 填充一些默认的配置项目
     */
    Scrollbar.prototype.getValidScrollbarCfg = function () {
        var cfg = {
            type: 'horizontal',
            categorySize: DEFAULT_CATEGORY_SIZE,
            width: DEFAULT_SIZE,
            height: DEFAULT_SIZE,
            padding: [0, 0, 0, 0],
            animate: true,
            style: {},
        };
        if ((0, util_1.isObject)(this.option)) {
            cfg = tslib_1.__assign(tslib_1.__assign({}, cfg), this.option);
        }
        if (!(0, util_1.isObject)(this.option) || !this.option.padding) {
            cfg.padding =
                cfg.type === 'horizontal' ? [DEFAULT_PADDING, 0, DEFAULT_PADDING, 0] : [0, DEFAULT_PADDING, 0, DEFAULT_PADDING];
        }
        return cfg;
    };
    /**
     * 获取数据
     */
    Scrollbar.prototype.getScrollbarData = function () {
        var coordinate = this.view.getCoordinate();
        var cfg = this.getValidScrollbarCfg();
        var data = this.view.getOptions().data || [];
        // 纵向做了 y 轴镜像之后，数据也需要镜像反转
        if (coordinate.isReflect('y') && cfg.type === 'vertical') {
            data = tslib_1.__spreadArray([], tslib_1.__read(data), false).reverse();
        }
        return data;
    };
    return Scrollbar;
}(base_1.Controller));
exports.default = Scrollbar;
//# sourceMappingURL=scrollbar.js.map