KGPython/vue/node_modules/@antv/component/esm/ui/timebar/icons.js

import { __assign, __extends, __read, __rest, __spreadArray } from "tslib";
import { clamp, omit } from '@antv/util';
import { Component } from '../../core';
import { Group, Path, Rect } from '../../shapes';
import { deepAssign, parseSeriesAttr, select, subStyleProps } from '../../util';
import { Indicator } from '../indicator';
import { Select } from '../select';
var IconBase = /** @class */ (function (_super) {
    __extends(IconBase, _super);
    function IconBase(options) {
        var _this = _super.call(this, deepAssign({}, { style: { backgroundOpacity: IconBase.backgroundOpacities.default } }, IconBase.defaultOptions, options)) || this;
        /** hover 时是否显示背景 */
        _this.showBackground = true;
        _this.background = _this.appendChild(new Rect({}));
        _this.icon = _this.appendChild(new Group({}));
        return _this;
    }
    Object.defineProperty(IconBase.prototype, "label", {
        get: function () {
            return 'BaseIcon';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IconBase.prototype, "lineWidth", {
        get: function () {
            return Math.log10(this.attributes.size);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IconBase.prototype, "padding", {
        get: function () {
            return parseSeriesAttr(this.attributes.size / 5);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IconBase.prototype, "iconSize", {
        get: function () {
            var size = this.attributes.size;
            var _a = __read(this.padding, 4), top = _a[0], right = _a[1], bottom = _a[2], left = _a[3];
            return Math.max(size - Math.max(left + right, top + bottom), this.lineWidth * 2 + 1);
        },
        enumerable: false,
        configurable: true
    });
    IconBase.prototype.renderBackground = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, size = _a.size;
        var halfSize = size / 2;
        var backgroundStyle = subStyleProps(this.attributes, 'background');
        this.background.attr(__assign({ x: x - halfSize, y: y - halfSize, width: size, height: size }, backgroundStyle));
    };
    IconBase.prototype.showIndicator = function () {
        if (!this.label)
            return;
        var size = this.attributes.size;
        var _a = this.background.getBBox(), x = _a.x, y = _a.y;
        this.indicator.update({ x: x + size / 2, y: y - 5, labelText: this.label, visibility: 'visible' });
    };
    IconBase.prototype.hideIndicator = function () {
        this.indicator.update({ visibility: 'hidden' });
    };
    IconBase.prototype.connectedCallback = function () {
        var _a;
        _super.prototype.connectedCallback.call(this);
        // indicator 脱离文档流，需要手动添加到 canvas
        var size = this.attributes.size;
        var _b = this.background.getBBox(), x = _b.x, y = _b.y;
        var canvas = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
        if (canvas) {
            this.indicator = canvas.appendChild(new Indicator({
                style: {
                    x: x + size / 2,
                    y: y - size / 2,
                    visibility: 'hidden',
                    position: 'top',
                    radius: 3,
                    zIndex: 100,
                },
            }));
        }
    };
    IconBase.prototype.disconnectedCallback = function () {
        this.indicator.destroy();
    };
    IconBase.prototype.render = function () {
        this.renderIcon();
        if (this.showBackground)
            this.renderBackground();
    };
    IconBase.prototype.bindEvents = function () {
        var _this = this;
        var onClick = this.attributes.onClick;
        this.addEventListener('click', function () {
            onClick === null || onClick === void 0 ? void 0 : onClick(_this);
        });
        if (this.showBackground) {
            var resetBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.default }); };
            var hoverBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.hover }); };
            var activeBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.active }); };
            this.addEventListener('pointerenter', function () {
                hoverBackground_1();
                _this.showIndicator();
            });
            this.addEventListener('pointerleave', function () {
                resetBackground_1();
                _this.hideIndicator();
            });
            this.addEventListener('pointerdown', function () {
                activeBackground_1();
            });
            this.addEventListener('pointerup', function () {
                resetBackground_1();
            });
        }
    };
    IconBase.tag = 'IconBase';
    IconBase.defaultOptions = {
        style: {
            x: 0,
            y: 0,
            size: 10,
            color: '#565758',
            backgroundRadius: 4,
            backgroundFill: '#e2e2e2',
        },
    };
    IconBase.backgroundOpacities = {
        default: 0,
        hover: 0.8,
        active: 1,
    };
    return IconBase;
}(Component));
export { IconBase };
var arrow = function (size, color) {
    if (color === void 0) { color = '#565758'; }
    return new Path({
        style: {
            fill: color,
            d: "M ".concat(size, ",").concat(size, " L -").concat(size, ",0 L ").concat(size, ",-").concat(size, " Z"),
            transformOrigin: 'center',
        },
    });
};
/** 重置 */
var Reset = /** @class */ (function (_super) {
    __extends(Reset, _super);
    function Reset() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Reset.prototype.arcPath = function (cx, cy, radius) {
        var _a = __read([radius, radius], 2), rx = _a[0], ry = _a[1];
        var getPosByAngle = function (angle) { return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; };
        var _b = __read(getPosByAngle((-5 / 4) * Math.PI), 2), x1 = _b[0], y1 = _b[1];
        var _c = __read(getPosByAngle((1 / 4) * Math.PI), 2), x2 = _c[0], y2 = _c[1];
        return "M".concat(x1, ",").concat(y1, ",A").concat(rx, ",").concat(ry, ",0,1,1,").concat(x2, ",").concat(y2);
    };
    Object.defineProperty(Reset.prototype, "label", {
        get: function () {
            return '重置';
        },
        enumerable: false,
        configurable: true
    });
    Reset.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var size = this.iconSize;
        var lineWidth = this.lineWidth;
        var arrowSize = lineWidth + 0.5;
        select(this.icon)
            .maybeAppend('.reset', 'path')
            .styles({
            stroke: color,
            lineWidth: lineWidth,
            d: this.arcPath(x, y, size / 2 - lineWidth),
            markerStart: arrow(arrowSize, color),
        });
    };
    return Reset;
}(IconBase));
export { Reset };
/** 快退 */
var Backward = /** @class */ (function (_super) {
    __extends(Backward, _super);
    function Backward() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Backward.prototype, "label", {
        get: function () {
            return '快退';
        },
        enumerable: false,
        configurable: true
    });
    Backward.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var size = this.iconSize;
        var deltaX = size / 2;
        var deltaY = size / 2 / Math.pow(3, 0.5);
        var points = [
            [x, y],
            [x, y - deltaY],
            [x - deltaX, y],
            [x, y + deltaY],
            [x, y],
            [x + deltaX, y - deltaY],
            [x + deltaX, y + deltaY],
            [x, y],
        ];
        select(this.icon).maybeAppend('.backward', 'polygon').styles({
            points: points,
            fill: color,
        });
    };
    return Backward;
}(IconBase));
export { Backward };
/** 快进 */
var Forward = /** @class */ (function (_super) {
    __extends(Forward, _super);
    function Forward() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Forward.prototype, "label", {
        get: function () {
            return '快进';
        },
        enumerable: false,
        configurable: true
    });
    Forward.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var size = this.iconSize;
        var deltaX = size / 2;
        var deltaY = size / 2 / Math.pow(3, 0.5);
        var points = [
            [x, y],
            [x, y - deltaY],
            [x + deltaX, y],
            [x, y + deltaY],
            [x, y],
            [x - deltaX, y - deltaY],
            [x - deltaX, y + deltaY],
            [x, y],
        ];
        select(this.icon).maybeAppend('.forward', 'polygon').styles({
            points: points,
            fill: color,
        });
    };
    return Forward;
}(IconBase));
export { Forward };
var Play = /** @class */ (function (_super) {
    __extends(Play, _super);
    function Play() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Play.prototype, "label", {
        get: function () {
            return '播放';
        },
        enumerable: false,
        configurable: true
    });
    Play.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var size = this.iconSize;
        var deltaX = (size / 3) * Math.pow(3, 0.5) * 0.8;
        var points = [
            [x + deltaX, y],
            [x - deltaX / 2, y - (size / 2) * 0.8],
            [x - deltaX / 2, y + (size / 2) * 0.8],
            [x + deltaX, y],
        ];
        select(this.icon).maybeAppend('.play', 'polygon').styles({
            points: points,
            fill: color,
        });
    };
    return Play;
}(IconBase));
export { Play };
var Pause = /** @class */ (function (_super) {
    __extends(Pause, _super);
    function Pause() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Pause.prototype, "label", {
        get: function () {
            return '暂停';
        },
        enumerable: false,
        configurable: true
    });
    Pause.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var size = this.iconSize;
        var deltaX = size / 3;
        var points = [
            [x - deltaX, y - size / 2],
            [x - deltaX, y + size / 2],
            [x - deltaX / 2, y + size / 2],
            [x - deltaX / 2, y - size / 2],
            [x - deltaX, y - size / 2],
            [x + deltaX / 2, y - size / 2],
            [x + deltaX / 2, y + size / 2],
            [x + deltaX, y + size / 2],
            [x + deltaX, y - size / 2],
        ];
        select(this.icon).maybeAppend('.pause', 'polygon').styles({
            points: points,
            fill: color,
        });
    };
    return Pause;
}(IconBase));
export { Pause };
/** 时间范围 */
var Range = /** @class */ (function (_super) {
    __extends(Range, _super);
    function Range() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Range.prototype, "label", {
        get: function () {
            return '范围时间';
        },
        enumerable: false,
        configurable: true
    });
    Range.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
        var gap = lineWidth;
        select(this.icon)
            .maybeAppend('.left-line', 'line')
            .styles({
            x1: x - size / 2,
            y1: y - size / 2,
            x2: x - size / 2,
            y2: y + size / 2,
            stroke: color,
            lineWidth: lineWidth,
        });
        select(this.icon)
            .maybeAppend('.right-line', 'line')
            .styles({
            x1: x + size / 2,
            y1: y - size / 2,
            x2: x + size / 2,
            y2: y + size / 2,
            stroke: color,
            lineWidth: lineWidth,
        });
        select(this.icon)
            .maybeAppend('.left-arrow', 'line')
            .styles({
            x1: x,
            y1: y,
            x2: x - size / 2 + gap * 2,
            y2: y,
            stroke: color,
            lineWidth: lineWidth,
            markerEnd: arrow(lineWidth * 2, color),
        });
        select(this.icon)
            .maybeAppend('.right-arrow', 'line')
            .styles({
            x1: x,
            y1: y,
            x2: x + size / 2 - gap * 2,
            y2: y,
            stroke: color,
            lineWidth: lineWidth,
            markerEnd: arrow(lineWidth * 2, color),
        });
    };
    return Range;
}(IconBase));
export { Range };
/** 值范围 */
var Value = /** @class */ (function (_super) {
    __extends(Value, _super);
    function Value() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Value.prototype, "label", {
        get: function () {
            return '单一时间';
        },
        enumerable: false,
        configurable: true
    });
    Value.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
        select(this.icon)
            .maybeAppend('.line', 'line')
            .styles({
            x1: x,
            y1: y - size / 2,
            x2: x,
            y2: y + size / 2,
            stroke: color,
            lineWidth: lineWidth,
        });
        var gap = lineWidth;
        select(this.icon)
            .maybeAppend('.left-arrow', 'line')
            .styles({
            x1: x - size / 2 - gap * 2,
            y1: y,
            x2: x - gap * 2,
            y2: y,
            stroke: color,
            lineWidth: lineWidth,
            markerEnd: arrow(lineWidth * 2, color),
        });
        select(this.icon)
            .maybeAppend('.right-arrow', 'line')
            .styles({
            x1: x + size / 2 + gap * 2,
            y1: y,
            x2: x + gap * 2,
            y2: y,
            stroke: color,
            lineWidth: lineWidth,
            markerEnd: arrow(lineWidth * 2, color),
        });
    };
    return Value;
}(IconBase));
export { Value };
var getCoordinatePoints = function (size) {
    return [
        [-size / 2, -size / 2],
        [-size / 2, size / 2],
        [size / 2, size / 2],
    ];
};
var LineChart = /** @class */ (function (_super) {
    __extends(LineChart, _super);
    function LineChart() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(LineChart.prototype, "label", {
        get: function () {
            return '折线图';
        },
        enumerable: false,
        configurable: true
    });
    LineChart.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
        var gap = lineWidth;
        var deltaX = (size - gap * 2 - lineWidth) / 4;
        var deltaY = (size - gap * 2 - lineWidth) / 2;
        var _c = __read([x - size / 2 + gap, y + size / 2 - gap * 2], 2), ox = _c[0], oy = _c[1];
        select(this.icon)
            .maybeAppend('.coordinate', 'polyline')
            .styles({
            points: getCoordinatePoints(size).map(function (_a) {
                var _b = __read(_a, 2), px = _b[0], py = _b[1];
                return [px + x, py + y];
            }),
            stroke: color,
            lineWidth: lineWidth,
        });
        select(this.icon)
            .maybeAppend('.line', 'polyline')
            .styles({
            points: [
                [ox, oy],
                [ox + deltaX, oy - deltaY],
                [ox + deltaX * 2, oy],
                [ox + deltaX * 4, oy - deltaY * 2],
            ],
            stroke: color,
            lineWidth: lineWidth,
        });
    };
    return LineChart;
}(IconBase));
export { LineChart };
var BarChart = /** @class */ (function (_super) {
    __extends(BarChart, _super);
    function BarChart() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(BarChart.prototype, "label", {
        get: function () {
            return '条形图';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BarChart.prototype, "data", {
        get: function () {
            return [1, 4, 2, 4, 3];
        },
        enumerable: false,
        configurable: true
    });
    BarChart.prototype.renderIcon = function () {
        var data = this.data;
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
        var gap = lineWidth;
        var deltaX = (size - gap) / data.length;
        var deltaY = (size - gap * 2) / 4;
        var _c = __read([x - size / 2 + gap * 2, y + size / 2 - gap], 2), ox = _c[0], oy = _c[1];
        select(this.icon)
            .maybeAppend('.coordinate', 'polyline')
            .styles({
            points: getCoordinatePoints(size).map(function (_a) {
                var _b = __read(_a, 2), px = _b[0], py = _b[1];
                return [px + x, py + y];
            }),
            stroke: color,
            lineWidth: lineWidth,
        });
        select(this.icon)
            .maybeAppend('.bars', 'g')
            .selectAll('.column')
            .data(this.data.map(function (value, index) { return ({ value: value, index: index }); }))
            .join(function (enter) {
            return enter
                .append('line')
                .attr('className', 'column')
                .style('x1', function (_a) {
                var index = _a.index;
                return ox + deltaX * index;
            })
                .style('y1', oy)
                .style('x2', function (_a) {
                var index = _a.index;
                return ox + deltaX * index;
            })
                .style('y2', function (_a) {
                var value = _a.value;
                return oy - deltaY * value;
            })
                .styles({
                y1: oy,
                stroke: color,
                lineWidth: lineWidth,
            });
        });
    };
    return BarChart;
}(IconBase));
export { BarChart };
/** 分割线 */
var Split = /** @class */ (function (_super) {
    __extends(Split, _super);
    function Split(options) {
        var _this = _super.call(this, deepAssign({}, { style: { color: '#d8d9d9' } }, options)) || this;
        _this.showBackground = false;
        return _this;
    }
    Split.prototype.renderIcon = function () {
        var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
        var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
        select(this.icon)
            .maybeAppend('.split', 'line')
            .styles({
            x1: x,
            y1: y - size / 2,
            x2: x,
            y2: y + size / 2,
            stroke: color,
            lineWidth: lineWidth,
        });
    };
    return Split;
}(IconBase));
export { Split };
var SpeedSelect = /** @class */ (function (_super) {
    __extends(SpeedSelect, _super);
    function SpeedSelect() {
        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
        _this.showBackground = false;
        return _this;
    }
    Object.defineProperty(SpeedSelect.prototype, "padding", {
        get: function () {
            return parseSeriesAttr(0);
        },
        enumerable: false,
        configurable: true
    });
    SpeedSelect.prototype.renderIcon = function () {
        var iconSize = this.iconSize;
        var _a = this.attributes, x = _a.x, y = _a.y, _b = _a.speed, speed = _b === void 0 ? 1 : _b;
        var inheritStyle = omit(this.attributes, [
            'x',
            'y',
            'transform',
            'transformOrigin',
            'width',
            'height',
            'size',
            'color',
            'speed',
        ]);
        var width = clamp(iconSize, 20, Infinity);
        var height = 20;
        var style = __assign(__assign({}, inheritStyle), { x: x - width / 2, y: y - height / 2, width: width, height: height, defaultValue: speed, bordered: false, showDropdownIcon: false, selectRadius: 2, dropdownPadding: this.padding, dropdownRadius: 2, dropdownSpacing: iconSize / 5, placeholderFontSize: iconSize / 2, optionPadding: 0, optionLabelFontSize: iconSize / 2, optionBackgroundRadius: 1, options: [
                { label: '1x', value: 1 },
                { label: '1.5x', value: 1.5 },
                { label: '2x', value: 2 },
            ] });
        select(this.icon)
            .maybeAppend('.speed', function () { return new Select({ style: style }); })
            .attr('className', 'speed')
            .each(function () {
            this.update(style);
        });
    };
    SpeedSelect.tag = 'SpeedSelect';
    return SpeedSelect;
}(IconBase));
export { SpeedSelect };
var ToggleIcon = /** @class */ (function (_super) {
    __extends(ToggleIcon, _super);
    function ToggleIcon(options) {
        var _this = _super.call(this, options) || this;
        _this.icon = _this.appendChild(new Group({}));
        _this.currentType = _this.attributes.type;
        return _this;
    }
    ToggleIcon.prototype.getType = function () {
        return this.currentType;
    };
    ToggleIcon.prototype.render = function () {
        var _this = this;
        var _a = this.attributes, onChange = _a.onChange, restStyles = __rest(_a, ["onChange"]);
        select(this.icon)
            .selectAll('.icon')
            .data([this.currentType])
            .join(function (enter) {
            return enter
                .append(function (type) {
                var _a;
                var Ctor = (_a = _this.toggles.find(function (_a) {
                    var _b = __read(_a, 1), key = _b[0];
                    return key === type;
                })) === null || _a === void 0 ? void 0 : _a[1];
                if (!Ctor)
                    throw new Error("Invalid type: ".concat(type));
                return new Ctor({});
            })
                .attr('className', 'icon')
                .styles(restStyles, false)
                .update({});
        }, function (update) { return update.styles({ restStyles: restStyles }).update({}); }, function (exit) { return exit.remove(); });
    };
    ToggleIcon.prototype.bindEvents = function () {
        var _this = this;
        var onChange = this.attributes.onChange;
        this.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var nextIndex = (_this.toggles.findIndex(function (_a) {
                var _b = __read(_a, 1), key = _b[0];
                return key === _this.currentType;
            }) + 1) % _this.toggles.length;
            var nextType = _this.toggles[nextIndex][0];
            onChange === null || onChange === void 0 ? void 0 : onChange(_this.currentType);
            _this.currentType = nextType;
            _this.render();
        });
    };
    ToggleIcon.tag = 'ToggleIcon';
    return ToggleIcon;
}(Component));
export { ToggleIcon };
var PlayPause = /** @class */ (function (_super) {
    __extends(PlayPause, _super);
    function PlayPause(options) {
        var _this = _super.call(this, deepAssign({}, { style: { type: 'play' } }, options)) || this;
        _this.toggles = [
            ['play', Play],
            ['pause', Pause],
        ];
        return _this;
    }
    return PlayPause;
}(ToggleIcon));
export { PlayPause };
var SelectionType = /** @class */ (function (_super) {
    __extends(SelectionType, _super);
    function SelectionType(options) {
        var _this = _super.call(this, deepAssign({}, { style: { type: 'range' } }, options)) || this;
        _this.toggles = [
            ['range', Range],
            ['value', Value],
        ];
        return _this;
    }
    return SelectionType;
}(ToggleIcon));
export { SelectionType };
var ChartType = /** @class */ (function (_super) {
    __extends(ChartType, _super);
    function ChartType(options) {
        var _this = _super.call(this, deepAssign({}, { style: { type: 'column' } }, options)) || this;
        _this.toggles = [
            ['line', LineChart],
            ['column', BarChart],
        ];
        return _this;
    }
    return ChartType;
}(ToggleIcon));
export { ChartType };
//# sourceMappingURL=icons.js.map