@visactor/vrender-components/es/pager/pager.js

components library for dp visualization

import { graphicCreator } from "@visactor/vrender-core";

import { merge, normalizePadding, isNumber, isFunction } from "@visactor/vutils";

import { AbstractComponent } from "../core/base";

import { measureTextSize } from "../util";

import { loadPagerComponent } from "./register";

const DEFAULT_HANDLER_STYLE = {
    space: 8,
    style: {
        fill: "rgb(47, 69, 84)",
        cursor: "pointer",
        size: 15
    },
    state: {
        disable: {
            fill: "rgb(170, 170, 170)",
            cursor: "not-allowed"
        },
        hover: {}
    }
};

loadPagerComponent();

export class Pager extends AbstractComponent {
    getCurrent() {
        return this._current;
    }
    constructor(attributes, options) {
        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Pager.defaultAttributes, attributes)), 
        this.name = "pager", this._current = 1, this._onHover = e => {
            const target = e.target;
            target.hasState("disable") || target.addState("hover");
        }, this._onUnHover = e => {
            e.target.removeState("hover");
        }, this._onClick = e => {
            const target = e.target;
            if ("preHandler" === target.name) {
                if (1 === this._current) return;
                this._current -= 1, 1 === this._current ? target.addState("disable") : target.removeState("disable"), 
                this._dispatchEvent("toPrev", {
                    current: this._current,
                    total: this._total,
                    direction: "pre",
                    event: e
                });
            }
            if ("nextHandler" === target.name) {
                if (this._current === this._total) return;
                this._current += 1, this._current === this._total ? target.addState("disable") : target.removeState("disable"), 
                this._dispatchEvent("toNext", {
                    current: this._current,
                    total: this._total,
                    direction: "next",
                    event: e
                });
            }
            this._current > 1 && this.preHandler.removeState("disable"), this._current < this._total && this.nextHandler.removeState("disable"), 
            this.text.setAttribute("text", this._getPageText(this._current));
        };
    }
    render() {
        var _a, _b, _c;
        this._reset();
        const {layout: layout = "horizontal", handler: handler = DEFAULT_HANDLER_STYLE, total: total, defaultCurrent: defaultCurrent = 1, textStyle: textStyle, padding: padding = 0} = this.attribute;
        this._current = defaultCurrent;
        const parsedPadding = normalizePadding(padding), isHorizontal = "horizontal" === layout, container = graphicCreator.group({
            x: 0,
            y: 0
        }), handlerStyle = handler.style || {}, handlerSize = handlerStyle.size || 15, handlerSpace = null !== (_a = handler.space) && void 0 !== _a ? _a : 8, handlerState = handler.state || {};
        let {preShape: preShape, nextShape: nextShape} = handler;
        preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
        const preHandler = graphicCreator.symbol(Object.assign(Object.assign({
            strokeBoundsBuffer: 0,
            pickMode: "imprecise"
        }, handlerStyle), {
            x: 0,
            y: 0,
            symbolType: preShape,
            size: handlerSize
        }));
        preHandler.states = handlerState, preHandler.name = "preHandler", this.preHandler = preHandler, 
        container.add(preHandler);
        const {width: maxTextWidth, height: maxTextHeight} = measureTextSize(this._getPageText(total), Object.assign({
            textAlign: "center",
            textBaseline: "middle"
        }, textStyle), null === (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme()) || void 0 === _c ? void 0 : _c.text), handlerSizeX = isNumber(handlerSize) ? handlerSize : handlerSize[0], handlerSizeY = isNumber(handlerSize) ? handlerSize : handlerSize[1], text = graphicCreator.text(Object.assign({
            x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
            y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
            text: this._getPageText(defaultCurrent),
            textAlign: "center",
            textBaseline: "middle",
            lineHeight: null == textStyle ? void 0 : textStyle.fontSize
        }, textStyle));
        this.text = text, container.add(text);
        const nextHandler = graphicCreator.symbol(Object.assign(Object.assign({
            strokeBoundsBuffer: 0,
            pickMode: "imprecise"
        }, handlerStyle), {
            x: isHorizontal ? handlerSizeX + 2 * handlerSpace + maxTextWidth : 0,
            y: isHorizontal ? 0 : handlerSizeY + 2 * handlerSpace + maxTextHeight,
            symbolType: nextShape,
            size: handlerSize
        }));
        nextHandler.name = "nextHandler", nextHandler.states = handlerState, this.nextHandler = nextHandler, 
        container.add(nextHandler), 1 === this._total ? (preHandler.addState("disable"), 
        nextHandler.addState("disable")) : 1 === this._current ? preHandler.addState("disable") : this._current === total && nextHandler.addState("disable");
        const containerBounds = container.AABBBounds, width = containerBounds.width(), height = containerBounds.height();
        container.translateTo(0 - containerBounds.x1 + parsedPadding[3], 0 - containerBounds.y1 + parsedPadding[0]), 
        this.add(container), this.attribute.width = width + parsedPadding[1] + parsedPadding[3], 
        this.attribute.height = height + parsedPadding[0] + parsedPadding[2], this._bindEvents();
    }
    _bindEvents() {
        this.attribute.disableTriggerEvent || (this.preHandler && (this.preHandler.addEventListener("pointerenter", this._onHover), 
        this.preHandler.addEventListener("pointerleave", this._onUnHover), this.preHandler.addEventListener("pointerdown", this._onClick)), 
        this.nextHandler && (this.nextHandler.addEventListener("pointerenter", this._onHover), 
        this.nextHandler.addEventListener("pointerleave", this._onUnHover), this.nextHandler.addEventListener("pointerdown", this._onClick)));
    }
    _reset() {
        this.removeAllChild(!0), this._current = 1, this._total = this.attribute.total, 
        this.preHandler = this.nextHandler = this.text = null;
    }
    _getPageText(current) {
        const {pageFormatter: pageFormatter} = this.attribute;
        return pageFormatter ? isFunction(pageFormatter) ? pageFormatter(current, this._total) : `${pageFormatter}`.replace("{current}", `${current}`).replace("{total}", `${this._total}`) : `${current}/${this._total}`;
    }
    setTotal(total) {
        total !== this.attribute.total && (this._total = total, 1 !== this._current && this._current <= total ? this.setAttributes({
            total: total,
            defaultCurrent: this._current
        }) : this.setAttribute("total", total));
    }
}

Pager.defaultAttributes = {
    handler: DEFAULT_HANDLER_STYLE,
    textStyle: {
        fill: "rgb(51, 51, 51)",
        fontSize: 12
    }
};
//# sourceMappingURL=pager.js.map