@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
159 lines • 7.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var g_1 = require("@antv/g");
var gui_1 = require("@antv/gui");
var util_1 = require("@antv/util");
var base_1 = tslib_1.__importDefault(require("./base"));
var data_range_1 = require("./helper/data-range");
var DEFAULT_PADDING = 4;
var DEFAULT_SIZE = 8;
var DEFAULT_CATEGORY_SIZE = 32;
var MIN_THUMB_LENGTH = 8;
var SCROLL_BAR_Z_INDEX = 999;
var getValidScrollBarConfig = function (cfg) {
if (cfg === void 0) { cfg = {}; }
var _cfg = tslib_1.__assign({ type: 'horizontal', categorySize: DEFAULT_CATEGORY_SIZE, width: DEFAULT_SIZE, height: DEFAULT_SIZE, padding: [0, 0, 0, 0] }, cfg);
// default padding
if (!cfg.padding) {
_cfg.padding =
_cfg.type === 'horizontal' ? [DEFAULT_PADDING, 0, DEFAULT_PADDING, 0] : [0, DEFAULT_PADDING, 0, DEFAULT_PADDING];
}
return _cfg;
};
var ScrollBarInteraction = /** @class */ (function (_super) {
tslib_1.__extends(ScrollBarInteraction, _super);
function ScrollBarInteraction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onChangeFn = util_1.throttle(_this.onChange.bind(_this), 20, {
leading: true,
});
return _this;
}
ScrollBarInteraction.getInteractionRange = function (layerRange, interaction) {
var config = getValidScrollBarConfig(interaction);
var _a = config.padding, paddingTop = _a[0], paddingRight = _a[1], paddingBottom = _a[2], paddingLeft = _a[3];
if (config.type === 'horizontal') {
return new g_1.BBox(layerRange.minX, layerRange.maxY - config.height - paddingTop - paddingBottom, layerRange.width, config.height + paddingTop + paddingBottom);
}
else {
return new g_1.BBox(layerRange.maxX - config.width - paddingLeft - paddingRight, layerRange.minY, config.width + paddingLeft + paddingRight, layerRange.height);
}
};
ScrollBarInteraction.prototype.render = function () {
var _this = this;
var view = this.view;
this.ratio = 0;
this.thumbOffset = 0;
view.on('afterrender', function () {
var padding = _this.view.get('padding');
// if we're not in `auto padding` process
if (!util_1.isEqual([0, 0, 0, 0], padding)) {
if (!_this.trackLen) {
_this.measureScrollBar();
_this.changeViewData(_this.getScrollRange());
}
else {
_this.renderScrollbar();
}
}
});
};
ScrollBarInteraction.prototype.clear = function () {
if (this.scrollBar) {
this.scrollBar.destroy();
this.scrollBar = null;
}
if (this.container) {
this.container.remove(true);
this.container = null;
}
this.trackLen = null;
this.thumbLen = null;
};
ScrollBarInteraction.prototype.renderScrollbar = function () {
var config = getValidScrollBarConfig(this.getInteractionConfig());
var range = this.getRange();
var isHorizontal = config.type !== 'vertical';
var panelRange = this.view.get('panelRange');
var _a = config.padding, paddingTop = _a[0], paddingLeft = _a[3];
var position = isHorizontal
? { x: panelRange.minX + paddingLeft, y: range.tl.y + paddingTop }
: { x: range.tl.x + paddingLeft, y: panelRange.minY + paddingTop };
if (!this.scrollBar) {
this.container = this.canvas.addGroup();
this.scrollBar = new gui_1.ScrollBar({
isHorizontal: isHorizontal,
trackLen: this.trackLen,
thumbLen: this.thumbLen,
position: position,
thumbOffset: this.ratio * this.trackLen,
});
this.container.add(this.scrollBar);
this.scrollBar.set('zIndex', SCROLL_BAR_Z_INDEX);
this.scrollBar.on('scrollchange', this.onChangeFn);
}
else {
this.scrollBar.updateTrackLen(this.trackLen);
this.scrollBar.updateThumbLen(this.thumbLen);
this.scrollBar.updateScrollBarPos(position);
this.scrollBar.updateThumbOffset(this.thumbOffset);
}
};
ScrollBarInteraction.prototype.measureScrollBar = function () {
var config = getValidScrollBarConfig(this.getInteractionConfig());
var _a = config.padding, paddingTop = _a[0], paddingRight = _a[1], paddingBottom = _a[2], paddingLeft = _a[3];
var isHorizontal = config.type !== 'vertical';
var panelRange = this.view.get('panelRange');
var xScale = this.view.getXScale();
var yScales = this.view.getYScales();
this.cnt = xScale.values.length;
this.xScaleCfg = { field: xScale.field, values: xScale.values || [] };
this.yScalesCfg = util_1.map(yScales, function (item) { return ({
field: item.field,
type: item.type,
min: item.min,
max: item.max,
ticks: item.ticks,
formatter: item.formatter,
}); });
this.step = Math.floor((isHorizontal ? panelRange.width : panelRange.height) / config.categorySize);
this.trackLen = isHorizontal
? panelRange.width - paddingLeft - paddingRight
: panelRange.height - paddingTop - paddingBottom;
this.thumbLen = Math.max(this.trackLen * util_1.clamp(this.step / xScale.values.length, 0, 1), MIN_THUMB_LENGTH);
};
ScrollBarInteraction.prototype.getScrollRange = function () {
var startIdx = Math.floor((this.cnt - this.step) * util_1.clamp(this.ratio, 0, 1));
var endIdx = Math.min(startIdx + this.step, this.cnt);
return [startIdx, endIdx];
};
ScrollBarInteraction.prototype.changeViewData = function (_a) {
var _this = this;
var startIdx = _a[0], endIdx = _a[1];
var config = getValidScrollBarConfig(this.getInteractionConfig());
var viewLayer = this.getViewLayer();
var meta = viewLayer.options.meta;
var origData = viewLayer.getData();
var newData = data_range_1.getDataByScaleRange(this.xScaleCfg.field, this.xScaleCfg.values, origData, [startIdx, endIdx], config.type === 'vertical');
// ScrollBar在滚动过程中保持Y轴上scale配置: min/max/ticks
this.yScalesCfg.forEach(function (cfg) {
var metaCfg = util_1.get(meta, cfg.field) || {};
_this.view.scale(cfg.field, tslib_1.__assign(tslib_1.__assign({ formatter: cfg.formatter }, metaCfg), { type: cfg.type, min: cfg.min, max: cfg.max }));
});
this.view.set('data', newData);
this.view.repaint();
};
ScrollBarInteraction.prototype.onChange = function (_a) {
var ratio = _a.ratio, thumbOffset = _a.thumbOffset;
this.ratio = ratio;
this.thumbOffset = thumbOffset;
var origAnimation = this.view.get('animation');
this.view.animate(false);
this.changeViewData(this.getScrollRange());
this.view.animate(origAnimation);
};
return ScrollBarInteraction;
}(base_1.default));
exports.default = ScrollBarInteraction;
//# sourceMappingURL=scrollbar.js.map