"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
var tslib_1 = require("tslib");
var g_1 = require("@antv/g");
var util_1 = require("@antv/util");
var animation_1 = require("../../animation");
var core_1 = require("../../core");
var shapes_1 = require("../../shapes");
var util_2 = 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({ x: 0, y: 0, animate: { duration: 100, fill: 'both' }, brushable: true, formatter: function (val) { return val.toString(); }, handleSpacing: 2, orientation: 'horizontal', padding: 0, autoFitLabel: true, scrollable: true, 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], type: 'range', selectionType: 'select', handleIconOffset: 0 }, (0, util_2.superStyleProps)(constant_1.HANDLE_DEFAULT_CFG, 'handle')), (0, util_2.superStyleProps)(constant_1.HANDLE_ICON_DEFAULT_CFG, 'handleIcon')), (0, util_2.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_2.getEventViewportPos)(e));
            var _a = _this.availableSpace, x = _a.x, y = _a.y;
            var _b = _this.getBBox(), 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('pointermove', _this.onDragging);
            document.addEventListener('pointerup', _this.onDragEnd);
        }; };
        _this.onDragging = function (e) {
            var _a = _this.attributes, slidable = _a.slidable, brushable = _a.brushable, type = _a.type;
            e.stopPropagation();
            var currPos = _this.getOrientVal((0, util_2.getEventViewportPos)(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;
                    if (type === 'range') {
                        _this.innerSetValues([_this.selectionStartPos, _this.selectionStartPos + _this.selectionWidth].sort(), true);
                    }
                    else
                        _this.innerSetValues([0, _this.selectionStartPos + _this.selectionWidth], true);
                    break;
                default:
                    break;
            }
            _this.prevPos = currPos;
        };
        _this.onDragEnd = function () {
            document.removeEventListener('pointermove', _this.onDragging);
            document.removeEventListener('pointermove', _this.onDragging);
            document.removeEventListener('pointerup', _this.onDragEnd);
            _this.target = '';
            // 更新 handle 状态
            _this.updateHandlesPosition(false);
        };
        _this.onValueChange = function (oldValue) {
            var _a = _this.attributes, onChange = _a.onChange, type = _a.type;
            var internalOldValue = type === 'range' ? oldValue : oldValue[1];
            var value = type === 'range' ? _this.getValues() : _this.getValues()[1];
            var evt = new g_1.CustomEvent('valuechange', {
                detail: { oldValue: internalOldValue, value: value },
            });
            _this.dispatchEvent(evt);
            onChange === null || onChange === void 0 ? void 0 : onChange(value);
        };
        _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_2.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 _a = this.attributes, x = _a.x, y = _a.y, padding = _a.padding;
            var _b = tslib_1.__read((0, util_2.parseSeriesAttr)(padding), 4), top = _b[0], right = _b[1], bottom = _b[2], left = _b[3];
            var _c = this.shape, width = _c.width, height = _c.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;
        this.updateSelectionArea(animation);
        this.updateHandlesPosition(animation);
    };
    Slider.prototype.updateSelectionArea = function (animation) {
        var newSelectionArea = this.calcSelectionArea();
        this.foregroundGroup.selectAll(constant_1.CLASS_NAMES.selection.class).each(function (datum, index) {
            (0, animation_1.transition)(this, newSelectionArea[index], animation);
        });
    };
    Slider.prototype.updateHandlesPosition = function (animation) {
        if (!this.attributes.showHandle)
            return;
        this.startHandle && (0, animation_1.transition)(this.startHandle, this.getHandleStyle('start'), animation);
        this.endHandle && (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.attributes.values = newValues;
        this.setValues(newValues);
        if (trigger) {
            this.onValueChange(oldValues);
        }
    };
    Slider.prototype.renderTrack = function (container) {
        var _a = this.attributes, x = _a.x, y = _a.y;
        var style = (0, util_2.subStyleProps)(this.attributes, 'track');
        this.trackShape = (0, util_2.select)(container)
            .maybeAppendByClassName(constant_1.CLASS_NAMES.track, 'rect')
            .styles(tslib_1.__assign(tslib_1.__assign({ x: x, y: y }, this.shape), style));
    };
    Slider.prototype.renderBrushArea = function (container) {
        var _a = this.attributes, x = _a.x, y = _a.y, brushable = _a.brushable;
        this.brushArea = (0, util_2.select)(container)
            .maybeAppendByClassName(constant_1.CLASS_NAMES.brushArea, 'rect')
            .styles(tslib_1.__assign({ x: x, y: y, fill: 'transparent', cursor: brushable ? 'crosshair' : 'default' }, this.shape));
    };
    Slider.prototype.renderSparkline = function (container) {
        var _this = this;
        var _a = this.attributes, x = _a.x, y = _a.y, orientation = _a.orientation;
        var sparklineGroup = (0, util_2.select)(container).maybeAppendByClassName(constant_1.CLASS_NAMES.sparklineGroup, 'g');
        (0, util_2.ifShow)(orientation === 'horizontal', sparklineGroup, function (group) {
            var style = tslib_1.__assign(tslib_1.__assign({}, _this.sparklineStyle), { x: x, y: y });
            group.maybeAppendByClassName(constant_1.CLASS_NAMES.sparkline, function () { return new sparkline_1.Sparkline({ style: style }); }).update(style);
        });
    };
    Slider.prototype.renderHandles = function () {
        var _this = this;
        var _a;
        var _b = this.attributes, showHandle = _b.showHandle, type = _b.type;
        var availableHandle = type === 'range' ? ['start', 'end'] : ['end'];
        var data = showHandle ? availableHandle : [];
        var that = this;
        (_a = this.foregroundGroup) === null || _a === void 0 ? void 0 : _a.selectAll(constant_1.CLASS_NAMES.handle.class).data(data.map(function (type) { return ({ type: type }); }), 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', that.onDragStart(type));
            });
        }, 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) {
        var _a = this.attributes, x = _a.x, y = _a.y, type = _a.type, selectionType = _a.selectionType;
        this.foregroundGroup = (0, util_2.select)(container).maybeAppendByClassName(constant_1.CLASS_NAMES.foreground, 'g');
        // value 类型的 slider 不渲染选区
        var selectionStyle = (0, util_2.subStyleProps)(this.attributes, 'selection');
        var applyStyle = function (selection) {
            return selection
                .style('visibility', function (d) { return (d.show ? 'visible' : 'hidden'); })
                .style('cursor', function (d) {
                if (selectionType === 'select')
                    return 'grab';
                if (selectionType === 'invert')
                    return 'crosshair';
                return 'default';
            })
                .styles(tslib_1.__assign(tslib_1.__assign({}, selectionStyle), { transform: "translate(".concat(x, ", ").concat(y, ")") }));
        };
        var that = this;
        this.foregroundGroup
            .selectAll(constant_1.CLASS_NAMES.selection.class)
            .data(type === 'value'
            ? []
            : this.calcSelectionArea().map(function (area, index) { return ({
                style: tslib_1.__assign({}, area),
                index: index,
                // 是否可见
                show: selectionType === 'select' ? index === 1 : index !== 1,
            }); }), function (d) { return d.index; })
            .join(function (enter) {
            return enter
                .append('rect')
                .attr('className', constant_1.CLASS_NAMES.selection.name)
                .call(applyStyle)
                .each(function (datum, index) {
                var _this = this;
                if (index === 1) {
                    that.selectionShape = (0, util_2.select)(this);
                    // 选区drag事件
                    this.on('pointerdown', function (e) {
                        _this.attr('cursor', 'grabbing');
                        that.onDragStart('selection')(e);
                    });
                    // 选区hover事件
                    that.dispatchCustomEvent(this, 'pointerenter', 'selectionMouseenter');
                    that.dispatchCustomEvent(this, 'pointerleave', 'selectionMouseleave');
                    that.dispatchCustomEvent(this, 'click', 'selectionClick');
                    // 拖拽交互
                    this.addEventListener('pointerdown', function () {
                        _this.attr('cursor', 'grabbing');
                    });
                    this.addEventListener('pointerup', function () {
                        _this.attr('cursor', 'pointer');
                    });
                    this.addEventListener('pointerover', function () {
                        _this.attr('cursor', 'pointer');
                    });
                }
                else {
                    this.on('pointerdown', that.onDragStart('track'));
                }
            });
        }, function (update) { return update.call(applyStyle); }, function (exit) { return exit.remove(); });
        this.updateSelectionArea(false);
        this.renderHandles();
    };
    Slider.prototype.render = function (attributes, container) {
        this.renderTrack(container);
        this.renderSparkline(container);
        this.renderBrushArea(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_2.toPrecision)(num, precision); }), 2), prevStart = _c[0], prevEnd = _c[1];
        var internalValues = Array.isArray(values) ? values : [prevStart, values !== null && values !== void 0 ? values : prevEnd];
        var _d = tslib_1.__read((internalValues || [prevStart, prevEnd]).map(function (num) { return (0, util_2.toPrecision)(num, precision); }), 2), startVal = _d[0], endVal = _d[1];
        if (this.attributes.type === 'value')
            return [0, (0, util_1.clamp)(endVal, min, max)];
        // 交换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.calcSelectionArea = 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: x, width: start * width },
                { y: y, height: height, x: start * width + x, width: (end - start) * width },
                { y: y, height: height, x: end * width, width: (1 - end) * width },
            ],
            [
                { x: x, width: width, y: y, height: start * height },
                { x: x, width: width, y: start * height + y, height: (end - start) * height },
                { x: x, width: width, y: end * height, height: (1 - end) * height },
            ],
        ]);
    };
    /**
     * 计算手柄的x y
     */
    Slider.prototype.calcHandlePosition = function (handleType) {
        var handleIconOffset = this.attributes.handleIconOffset;
        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 offset = handleType === 'start' ? -handleIconOffset : handleIconOffset;
        var L = (handleType === 'start' ? stVal : endVal) * this.getOrientVal([width, height]) + offset;
        return {
            x: x + this.getOrientVal([L, width / 2]),
            y: y + this.getOrientVal([height / 2, L]),
        };
    };
    Slider.prototype.inferTextStyle = function (handleType) {
        var orientation = this.attributes.orientation;
        if (orientation === 'horizontal')
            return {};
        if (handleType === 'start')
            return { transformOrigin: 'left center', transform: 'rotate(90)', textAlign: 'start' };
        if (handleType === 'end')
            return { transformOrigin: 'right center', transform: 'rotate(90)', textAlign: 'end' };
        return {};
    };
    /**
     * 计算手柄应当处于的位置
     * @param handleType start手柄还是end手柄
     * @returns
     */
    Slider.prototype.calcHandleText = function (handleType) {
        var _a;
        var _b = this.attributes, type = _b.type, orientation = _b.orientation, formatter = _b.formatter, autoFitLabel = _b.autoFitLabel;
        var handleStyle = (0, util_2.subStyleProps)(this.attributes, 'handle');
        var labelStyle = (0, util_2.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(tslib_1.__assign({}, labelStyle), this.inferTextStyle(handleType)), { text: text }),
        });
        // 文字包围盒的宽高
        var _c = temp.getBBox(), textWidth = _c.width, textHeight = _c.height;
        temp.destroy();
        if (!autoFitLabel) {
            if (type === 'value')
                return { text: text, x: 0, y: -textHeight - spacing };
            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.calcSelectionArea()[1], fX = _e.x, fY = _e.y, fW = _e.width, fH = _e.height;
        var totalSpacing = spacing + size;
        if (orientation === 'horizontal') {
            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 positiveSize = totalSpacing;
            var negativeSize = textHeight + totalSpacing;
            if (handleType === 'start') {
                y = fY - size > textHeight ? -negativeSize : positiveSize;
            }
            else {
                y = iH - (fY + fH) - size > textHeight ? negativeSize : -positiveSize;
            }
        }
        return { x: x, y: y, text: text };
    };
    Slider.prototype.getHandleLabelStyle = function (handleType) {
        var style = (0, util_2.subStyleProps)(this.attributes, 'handleLabel');
        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, style), this.calcHandleText(handleType)), this.inferTextStyle(handleType));
    };
    Slider.prototype.getHandleIconStyle = function () {
        var shape = this.attributes.handleIconShape;
        var style = (0, util_2.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, ox = _a.x, oy = _a.y, showLabel = _a.showLabel, showLabelOnInteraction = _a.showLabelOnInteraction, orientation = _a.orientation;
        var _b = this.calcHandlePosition(handleType), x = _b.x, y = _b.y;
        var textStyle = this.calcHandleText(handleType);
        var internalShowLabel = showLabel;
        if (!showLabel && showLabelOnInteraction) {
            if (this.target)
                internalShowLabel = true;
            else
                internalShowLabel = false;
        }
        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (0, util_2.superStyleProps)(this.getHandleIconStyle(), 'icon')), (0, util_2.superStyleProps)(tslib_1.__assign(tslib_1.__assign({}, this.getHandleLabelStyle(handleType)), textStyle), 'label')), { transform: "translate(".concat(x + ox, ", ").concat(y + oy, ")"), orientation: orientation, showLabel: internalShowLabel, 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) {
        if (endOffset === void 0) { endOffset = 0; }
        var type = this.attributes.type;
        var _a = tslib_1.__read(this.getValues(), 2), oldStartVal = _a[0], oldEndVal = _a[1];
        var internalStartOffset = type === 'range' ? stOffset : 0;
        var values = [oldStartVal + internalStartOffset, oldEndVal + endOffset].sort();
        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 () {
        // scroll 事件
        this.addEventListener('wheel', this.onScroll);
        var brushArea = this.brushArea;
        this.dispatchCustomEvent(brushArea, 'click', 'trackClick');
        this.dispatchCustomEvent(brushArea, 'pointerenter', 'trackMouseenter');
        this.dispatchCustomEvent(brushArea, 'pointerleave', 'trackMouseleave');
        // Drag and brush
        brushArea.on('pointerdown', 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);
        }
    };
    Slider.tag = 'slider';
    return Slider;
}(core_1.Component));
exports.Slider = Slider;
//# sourceMappingURL=index.js.map