swOperation/node_modules/@antv/g2plot/lib/interactions/actions/reset-button.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonAction = exports.BUTTON_ACTION_CONFIG = void 0;
var tslib_1 = require("tslib");
var g2_1 = require("@antv/g2");
var util_1 = require("@antv/util");
var utils_1 = require("../../utils");
var PADDING_RIGHT = 10;
var PADDING_TOP = 5;
/**
 * Action 中的 Button 按钮配置
 *
 * 可能的使用场景：brush filter
 */
exports.BUTTON_ACTION_CONFIG = {
    padding: [8, 10],
    text: 'reset',
    textStyle: {
        default: {
            x: 0,
            y: 0,
            fontSize: 12,
            fill: '#333333',
            cursor: 'pointer',
        },
    },
    buttonStyle: {
        default: {
            fill: '#f7f7f7',
            stroke: '#cccccc',
            cursor: 'pointer',
        },
        active: {
            fill: '#e6e6e6',
        },
    },
};
/**
 * @override 复写 G2 Button Action, 后续直接使用 GUI
 */
var ButtonAction = /** @class */ (function (_super) {
    tslib_1.__extends(ButtonAction, _super);
    function ButtonAction() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.buttonGroup = null;
        _this.buttonCfg = tslib_1.__assign({ name: 'button' }, exports.BUTTON_ACTION_CONFIG);
        return _this;
    }
    /**
     * 获取 mix 默认的配置和用户配置
     */
    ButtonAction.prototype.getButtonCfg = function () {
        var view = this.context.view;
        var buttonCfg = (0, util_1.get)(view, ['interactions', 'filter-action', 'cfg', 'buttonConfig']);
        return (0, utils_1.deepAssign)(this.buttonCfg, buttonCfg, this.cfg);
    };
    /**
     * 绘制 Button 和 文本
     */
    ButtonAction.prototype.drawButton = function () {
        var config = this.getButtonCfg();
        var group = this.context.view.foregroundGroup.addGroup({
            name: config.name,
        });
        var textShape = this.drawText(group);
        this.drawBackground(group, textShape.getBBox());
        this.buttonGroup = group;
    };
    /**
     * 绘制文本
     */
    ButtonAction.prototype.drawText = function (group) {
        var _a;
        var config = this.getButtonCfg();
        // 添加文本
        return group.addShape({
            type: 'text',
            name: 'button-text',
            attrs: tslib_1.__assign({ text: config.text }, (_a = config.textStyle) === null || _a === void 0 ? void 0 : _a.default),
        });
    };
    ButtonAction.prototype.drawBackground = function (group, bbox) {
        var _a;
        var config = this.getButtonCfg();
        var padding = (0, utils_1.normalPadding)(config.padding);
        // 添加背景按钮
        var buttonShape = group.addShape({
            type: 'rect',
            name: 'button-rect',
            attrs: tslib_1.__assign({ x: bbox.x - padding[3], y: bbox.y - padding[0], width: bbox.width + padding[1] + padding[3], height: bbox.height + padding[0] + padding[2] }, (_a = config.buttonStyle) === null || _a === void 0 ? void 0 : _a.default),
        });
        buttonShape.toBack(); // 在后面
        // active 效果内置
        group.on('mouseenter', function () {
            var _a;
            buttonShape.attr((_a = config.buttonStyle) === null || _a === void 0 ? void 0 : _a.active);
        });
        group.on('mouseleave', function () {
            var _a;
            buttonShape.attr((_a = config.buttonStyle) === null || _a === void 0 ? void 0 : _a.default);
        });
        return buttonShape;
    };
    // 重置位置
    ButtonAction.prototype.resetPosition = function () {
        var view = this.context.view;
        var coord = view.getCoordinate();
        var point = coord.convert({ x: 1, y: 1 }); // 后面直接改成左上角
        var buttonGroup = this.buttonGroup;
        var bbox = buttonGroup.getBBox();
        var matrix = g2_1.Util.transform(null, [
            ['t', point.x - bbox.width - PADDING_RIGHT, point.y + bbox.height + PADDING_TOP],
        ]);
        buttonGroup.setMatrix(matrix);
    };
    /**
     * 显示
     */
    ButtonAction.prototype.show = function () {
        if (!this.buttonGroup) {
            this.drawButton();
        }
        this.resetPosition();
        this.buttonGroup.show();
    };
    /**
     * 隐藏
     */
    ButtonAction.prototype.hide = function () {
        if (this.buttonGroup) {
            this.buttonGroup.hide();
        }
    };
    /**
     * 销毁
     */
    ButtonAction.prototype.destroy = function () {
        var buttonGroup = this.buttonGroup;
        if (buttonGroup) {
            buttonGroup.remove();
        }
        _super.prototype.destroy.call(this);
    };
    return ButtonAction;
}(g2_1.Action));
exports.ButtonAction = ButtonAction;
//# sourceMappingURL=reset-button.js.map