swOperation/node_modules/@antv/gui/lib/ui/slider/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
var tslib_1 = require("tslib");
var g_1 = require("@antv/g");
var animation_1 = require("../../animation");
var core_1 = require("../../core");
var shapes_1 = require("../../shapes");
var util_1 = require("../../util");
var sparkline_1 = require("../sparkline");
var constant_1 = require("./constant");
var handle_1 = require("./handle");
var Slider = /** @class */ (function (_super) {
    tslib_1.__extends(Slider, _super);
    function Slider(options) {
        var _this = _super.call(this, options, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ animate: { duration: 100, fill: 'both' }, brushable: true, formatter: function (val) { return val.toString(); }, handleSpacing: 2, orientation: 'horizontal', padding: 0, autoFitLabel: true, scrollable: true, selectionCursor: 'move', selectionFill: '#5B8FF9', selectionFillOpacity: 0.45, selectionZIndex: 2, showHandle: true, showLabel: true, slidable: true, trackFill: '#416180', trackLength: 200, trackOpacity: 0.05, trackSize: 20, trackZIndex: -1, values: [0, 1] }, (0, util_1.superStyleProps)(constant_1.HANDLE_DEFAULT_CFG, 'handle')), (0, util_1.superStyleProps)(constant_1.HANDLE_ICON_DEFAULT_CFG, 'handleIcon')), (0, util_1.superStyleProps)(constant_1.HANDLE_LABEL_DEFAULT_CFG, 'handleLabel'))) || this;
        _this.range = [0, 1];
        _this.onDragStart = function (target) { return function (e) {
            e.stopPropagation();
            _this.target = target;
            _this.prevPos = _this.getOrientVal((0, util_1.getEventPos)(e));
            var _a = _this.availableSpace, x = _a.x, y = _a.y;
            var _b = _this.attributes, X = _b.x, Y = _b.y;
            _this.selectionStartPos = _this.getRatio(_this.prevPos - _this.getOrientVal([x, y]) - _this.getOrientVal([+X, +Y]));
            _this.selectionWidth = 0;
            document.addEventListener('mousemove', _this.onDragging);
            document.addEventListener('touchmove', _this.onDragging);
            document.addEventListener('mouseup', _this.onDragEnd);
            document.addEventListener('touchend', _this.onDragEnd);
        }; };
        _this.onDragging = function (e) {
            var _a = _this.attributes, slidable = _a.slidable, brushable = _a.brushable;
            e.stopPropagation();
            var currPos = _this.getOrientVal((0, util_1.getEventPos)(e));
            var diffPos = currPos - _this.prevPos;
            if (!diffPos)
                return;
            var deltaVal = _this.getRatio(diffPos);
            switch (_this.target) {
                case 'start':
                    if (slidable)
                        _this.setValuesOffset(deltaVal);
                    break;
                case 'end':
                    if (slidable)
                        _this.setValuesOffset(0, deltaVal);
                    break;
                case 'selection':
                    if (slidable)
                        _this.setValuesOffset(deltaVal, deltaVal);
                    break;
                case 'track':
                    if (!brushable)
                        return;
                    // 绘制蒙板
                    _this.selectionWidth += deltaVal;
                    _this.innerSetValues([_this.selectionStartPos, _this.selectionStartPos + _this.selectionWidth].sort(), true);
                    break;
                default:
                    break;
            }
            _this.prevPos = currPos;
        };
        _this.onDragEnd = function () {
            document.removeEventListener('mousemove', _this.onDragging);
            document.removeEventListener('mousemove', _this.onDragging);
            document.removeEventListener('mouseup', _this.onDragEnd);
            document.removeEventListener('touchend', _this.onDragEnd);
        };
        _this.onValueChange = function (oldValue) {
            var evt = new g_1.CustomEvent('valuechange', {
                detail: {
                    oldValue: oldValue,
                    value: _this.getValues(),
                },
            });
            _this.dispatchEvent(evt);
        };
        _this.selectionStartPos = 0;
        _this.selectionWidth = 0;
        _this.prevPos = 0;
        _this.target = '';
        return _this;
    }
    Object.defineProperty(Slider.prototype, "values", {
        get: function () {
            return this.attributes.values;
        },
        set: function (values) {
            this.attributes.values = this.clampValues(values);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Slider.prototype, "sparklineStyle", {
        get: function () {
            var orientation = this.attributes.orientation;
            if (orientation !== 'horizontal')
                return null;
            var attr = (0, util_1.subStyleProps)(this.attributes, 'sparkline');
            return tslib_1.__assign(tslib_1.__assign({ zIndex: 0 }, this.availableSpace), attr);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Slider.prototype, "shape", {
        get: function () {
            var _a = this.attributes, trackLength = _a.trackLength, trackSize = _a.trackSize;
            var _b = tslib_1.__read(this.getOrientVal([
                [trackLength, trackSize],
                [trackSize, trackLength],
            ]), 2), width = _b[0], height = _b[1];
            return { width: width, height: height };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Slider.prototype, "availableSpace", {
        get: function () {
            var padding = this.attributes.padding;
            var _a = tslib_1.__read((0, util_1.parseSeriesAttr)(padding), 4), top = _a[0], right = _a[1], bottom = _a[2], left = _a[3];
            var _b = this.shape, width = _b.width, height = _b.height;
            return {
                x: left,
                y: top,
                width: width - (left + right),
                height: height - (top + bottom),
            };
        },
        enumerable: false,
        configurable: true
    });
    Slider.prototype.getValues = function () {
        return this.values;
    };
    /** 不触发重绘 */
    Slider.prototype.setValues = function (values, animate) {
        if (values === void 0) { values = [0, 0]; }
        if (animate === void 0) { animate = false; }
        this.attributes.values = values;
        var animation = animate === false ? false : this.attributes.animate;
        (0, animation_1.transition)(this.selectionShape.node(), this.selectionStyle, animation);
        this.updateHandlesPosition(animation);
    };
    Slider.prototype.updateHandlesPosition = function (animation) {
        if (!this.attributes.showHandle)
            return;
        (0, animation_1.transition)(this.startHandle, this.getHandleStyle('start'), animation);
        (0, animation_1.transition)(this.endHandle, this.getHandleStyle('end'), animation);
    };
    Slider.prototype.innerSetValues = function (values, trigger) {
        if (values === void 0) { values = [0, 0]; }
        if (trigger === void 0) { trigger = false; }
        var oldValues = this.values;
        var newValues = this.clampValues(values);
        this.attr('values', newValues);
        this.setValues(newValues);
        if (trigger) {
            this.onValueChange(oldValues);
        }
    };
    Slider.prototype.renderTrack = function (container) {
        var brushable = this.attributes.brushable;
        var style = (0, util_1.subStyleProps)(this.attributes, 'track');
        this.trackShape = (0, util_1.select)(container)
            .maybeAppendByClassName(constant_1.CLASS_NAMES.track, 'rect')
            .styles(tslib_1.__assign(tslib_1.__assign({ cursor: brushable ? 'crosshair' : 'default' }, this.shape), style));
    };
    Slider.prototype.renderSparkline = function (container) {
        var _this = this;
        var orientation = this.attributes.orientation;
        var sparklineGroup = (0, util_1.select)(container).maybeAppendByClassName(constant_1.CLASS_NAMES.sparklineGroup, 'g');
        (0, util_1.ifShow)(orientation === 'horizontal', sparklineGroup, function (group) {
            var style = _this.sparklineStyle;
            group.maybeAppendByClassName(constant_1.CLASS_NAMES.sparkline, function () { return new sparkline_1.Sparkline({ style: style }); }).update(style);
        });
    };
    Object.defineProperty(Slider.prototype, "selectionStyle", {
        get: function () {
            var style = (0, util_1.subStyleProps)(this.attributes, 'selection');
            return tslib_1.__assign(tslib_1.__assign({}, style), this.calcMask());
        },
        enumerable: false,
        configurable: true
    });
    Slider.prototype.renderHandles = function () {
        var _this = this;
        var _a;
        var showHandle = this.attributes.showHandle;
        var data = (showHandle ? ['start', 'end'] : []).map(function (type) { return ({ type: type }); });
        var that = this;
        (_a = this.foregroundGroup) === null || _a === void 0 ? void 0 : _a.selectAll(constant_1.CLASS_NAMES.handle.class).data(data, function (d) { return d.type; }).join(function (enter) {
            return enter
                .append(function (_a) {
                var type = _a.type;
                return new handle_1.Handle({ style: _this.getHandleStyle(type) });
            })
                .each(function (_a) {
                var type = _a.type;
                this.attr('class', "".concat(constant_1.CLASS_NAMES.handle.name, " ").concat(type, "-handle"));
                var name = "".concat(type, "Handle");
                that[name] = this;
                this.addEventListener('pointerdown', function (e) {
                    that.onDragStart(type)(e);
                });
            });
        }, function (update) {
            return update.each(function (_a) {
                var type = _a.type;
                this.update(that.getHandleStyle(type));
            });
        }, function (exit) {
            return exit
                .each(function (_a) {
                var type = _a.type;
                var name = "".concat(type, "Handle");
                that[name] = undefined;
            })
                .remove();
        });
    };
    Slider.prototype.renderSelection = function (container) {
        this.foregroundGroup = (0, util_1.select)(container).maybeAppendByClassName(constant_1.CLASS_NAMES.foreground, 'g');
        this.selectionShape = this.foregroundGroup
            .maybeAppendByClassName(constant_1.CLASS_NAMES.selection, 'rect')
            .styles(this.selectionStyle);
        this.renderHandles();
    };
    Slider.prototype.render = function (attributes, container) {
        this.renderTrack(container);
        this.renderSparkline(container);
        this.renderSelection(container);
    };
    Slider.prototype.clampValues = function (values, precision) {
        var _a;
        if (precision === void 0) { precision = 4; }
        var _b = tslib_1.__read(this.range, 2), min = _b[0], max = _b[1];
        var _c = tslib_1.__read(this.getValues().map(function (num) { return (0, util_1.toPrecision)(num, precision); }), 2), prevStart = _c[0], prevEnd = _c[1];
        var _d = tslib_1.__read((values || [prevStart, prevEnd]).map(function (num) { return (0, util_1.toPrecision)(num, precision); }), 2), startVal = _d[0], endVal = _d[1];
        // 交换startVal endVal
        if (startVal > endVal) {
            _a = tslib_1.__read([endVal, startVal], 2), startVal = _a[0], endVal = _a[1];
        }
        var range = endVal - startVal;
        // 超出范围就全选
        if (range > max - min)
            return [min, max];
        if (startVal < min) {
            if (prevStart === min && prevEnd === endVal)
                return [min, endVal];
            return [min, range + min];
        }
        if (endVal > max) {
            if (prevEnd === max && prevStart === startVal)
                return [startVal, max];
            return [max - range, max];
        }
        // 保留小数
        return [startVal, endVal];
    };
    /**
     * 计算蒙板坐标和宽高
     * 默认用来计算前景位置大小
     */
    Slider.prototype.calcMask = function (values) {
        var _a = tslib_1.__read(this.clampValues(values), 2), start = _a[0], end = _a[1];
        var _b = this.availableSpace, x = _b.x, y = _b.y, width = _b.width, height = _b.height;
        return this.getOrientVal([
            {
                y: y,
                height: height,
                x: start * width + x,
                width: (end - start) * width,
            },
            {
                x: x,
                width: width,
                y: start * height + y,
                height: (end - start) * height,
            },
        ]);
    };
    /**
     * 计算手柄的x y
     */
    Slider.prototype.calcHandlePosition = function (handleType) {
        var _a = this.availableSpace, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
        var _b = tslib_1.__read(this.clampValues(), 2), stVal = _b[0], endVal = _b[1];
        var L = (handleType === 'start' ? stVal : endVal) * this.getOrientVal([width, height]);
        return {
            x: x + this.getOrientVal([L, width / 2]),
            y: y + this.getOrientVal([height / 2, L]),
        };
    };
    /**
     * 计算手柄应当处于的位置
     * @param handleType start手柄还是end手柄
     * @returns
     */
    Slider.prototype.calcHandleText = function (handleType) {
        var _a;
        var _b = this.attributes, orientation = _b.orientation, formatter = _b.formatter, autoFitLabel = _b.autoFitLabel;
        var handleStyle = (0, util_1.subStyleProps)(this.attributes, 'handle');
        var labelStyle = (0, util_1.subStyleProps)(handleStyle, 'label');
        var spacing = handleStyle.spacing;
        var size = this.getHandleSize();
        var values = this.clampValues();
        var value = handleType === 'start' ? values[0] : values[1];
        var text = formatter(value);
        var temp = new shapes_1.Text({
            style: tslib_1.__assign(tslib_1.__assign({}, labelStyle), { text: text }),
        });
        // 文字包围盒的宽高
        var _c = temp.getBBox(), textWidth = _c.width, textHeight = _c.height;
        temp.destroy();
        if (!autoFitLabel) {
            var finaleWidth = spacing + size + (orientation === 'horizontal' ? textWidth / 2 : 0);
            return _a = { text: text }, _a[orientation === 'horizontal' ? 'x' : 'y'] = handleType === 'start' ? -finaleWidth : finaleWidth, _a;
        }
        var x = 0;
        var y = 0;
        // 相对于获取两端可用空间
        var _d = this.availableSpace, iW = _d.width, iH = _d.height;
        var _e = this.calcMask(), fX = _e.x, fY = _e.y, fW = _e.width, fH = _e.height;
        if (orientation === 'horizontal') {
            var totalSpacing = spacing + size;
            var finalWidth = totalSpacing + textWidth / 2;
            if (handleType === 'start') {
                var left = fX - totalSpacing - textWidth;
                x = left > 0 ? -finalWidth : finalWidth;
            }
            else {
                var sign = iW - fX - fW - totalSpacing > textWidth;
                x = sign ? finalWidth : -finalWidth;
            }
        }
        else {
            var finalWidth = spacing + size;
            if (handleType === 'start') {
                y = fY - size > textHeight ? -finalWidth : finalWidth;
            }
            else {
                y = iH - fY - fH - size > textHeight ? finalWidth : -finalWidth;
            }
        }
        return { x: x, y: y, text: text };
    };
    Slider.prototype.getHandleLabelStyle = function (handleType) {
        var showLabel = this.attributes.showLabel;
        if (!showLabel)
            return {};
        var style = (0, util_1.subStyleProps)(this.attributes, 'handleLabel');
        return tslib_1.__assign(tslib_1.__assign({}, style), this.calcHandleText(handleType));
    };
    Slider.prototype.getHandleIconStyle = function () {
        var shape = this.attributes.handleIconShape;
        var style = (0, util_1.subStyleProps)(this.attributes, 'handleIcon');
        var cursor = this.getOrientVal(['ew-resize', 'ns-resize']);
        var size = this.getHandleSize();
        return tslib_1.__assign({ cursor: cursor, shape: shape, size: size }, style);
    };
    Slider.prototype.getHandleStyle = function (handleType) {
        var _a = this.attributes, showLabel = _a.showLabel, orientation = _a.orientation;
        var handlePosition = this.calcHandlePosition(handleType);
        var textStyle = this.calcHandleText(handleType);
        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (0, util_1.superStyleProps)(this.getHandleIconStyle(), 'icon')), (0, util_1.superStyleProps)(tslib_1.__assign(tslib_1.__assign({}, this.getHandleLabelStyle(handleType)), textStyle), 'label')), handlePosition), { orientation: orientation, showLabel: showLabel, type: handleType, zIndex: 3 });
    };
    Slider.prototype.getHandleSize = function () {
        var _a = this.attributes, size = _a.handleIconSize, width = _a.width, height = _a.height;
        if (size)
            return size;
        // 没设置 size 的话，高度就取 height + 4 高度，手柄宽度是高度的 1/ 2.4
        return Math.floor((this.getOrientVal([+height, +width]) + 4) / 2.4);
    };
    Slider.prototype.getOrientVal = function (_a) {
        var _b = tslib_1.__read(_a, 2), x = _b[0], y = _b[1];
        var orientation = this.attributes.orientation;
        return orientation === 'horizontal' ? x : y;
    };
    Slider.prototype.setValuesOffset = function (stOffset, endOffset, animate) {
        if (endOffset === void 0) { endOffset = 0; }
        if (animate === void 0) { animate = false; }
        var _a = tslib_1.__read(this.getValues(), 2), oldStartVal = _a[0], oldEndVal = _a[1];
        var values = [oldStartVal + stOffset, oldEndVal + endOffset].sort();
        if (animate)
            this.setValues(values);
        else
            this.innerSetValues(values, true);
    };
    Slider.prototype.getRatio = function (val) {
        var _a = this.availableSpace, width = _a.width, height = _a.height;
        return val / this.getOrientVal([width, height]);
    };
    Slider.prototype.dispatchCustomEvent = function (target, event, name) {
        var _this = this;
        target.on(event, function (e) {
            e.stopPropagation();
            _this.dispatchEvent(new g_1.CustomEvent(name, { detail: e }));
        });
    };
    Slider.prototype.bindEvents = function () {
        var selection = this.selectionShape;
        // scroll 事件
        this.addEventListener('wheel', this.onScroll);
        // 选区drag事件
        selection.on('mousedown', this.onDragStart('selection'));
        selection.on('touchstart', this.onDragStart('selection'));
        // 选区hover事件
        this.dispatchCustomEvent(selection, 'mouseenter', 'selectionMouseenter');
        this.dispatchCustomEvent(selection, 'mouseleave', 'selectionMouseleave');
        this.dispatchCustomEvent(selection, 'click', 'selectionClick');
        var track = this.trackShape;
        this.dispatchCustomEvent(track, 'click', 'trackClick');
        this.dispatchCustomEvent(track, 'mouseenter', 'trackMouseenter');
        this.dispatchCustomEvent(track, 'mouseleave', 'trackMouseleave');
        // Drag and brush
        track.on('mousedown', this.onDragStart('track'));
        track.on('touchstart', this.onDragStart('track'));
    };
    Slider.prototype.onScroll = function (event) {
        var scrollable = this.attributes.scrollable;
        if (scrollable) {
            var deltaX = event.deltaX, deltaY = event.deltaY;
            var offset = deltaY || deltaX;
            var deltaVal = this.getRatio(offset);
            this.setValuesOffset(deltaVal, deltaVal, true);
        }
    };
    Slider.tag = 'slider';
    return Slider;
}(core_1.GUI));
exports.Slider = Slider;
//# sourceMappingURL=index.js.map