@visactor/vrender-components 0.18.0-alpha.1 → 0.18.0-alpha.2

package/cjs/legend/discrete/discrete.d.ts

@@ -1,5 +1,5 @@
 import { LegendBase } from '../base';
-import type { DiscreteLegendAttrs } from './type';
+import type { DiscreteLegendAttrs, LegendItemDatum } from './type';
 import type { ComponentOptions } from '../../interface';
 export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     name: string;
@@ -8,15 +8,32 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _itemHeightByUser;
     private _itemHeight;
     private _itemMaxWidth;
-    private _pager;
+    private _pagerComponent;
     private _lastActiveItem;
+    private _itemContext;
     static defaultAttributes: Partial<DiscreteLegendAttrs>;
     constructor(attributes: DiscreteLegendAttrs, options?: ComponentOptions);
     setSelected(selectedData: (string | number)[]): void;
+    protected _renderItems(): {
+        doWrap: boolean;
+        maxWidthInCol: number;
+        startX: number;
+        startY: number;
+        maxPages: number;
+        pages: number;
+        startIndex: number;
+        items: LegendItemDatum[];
+        isHorizontal: boolean;
+        currentPage: number;
+        totalPage: number;
+    };
     protected _renderContent(): void;
     protected _bindEvents(): void;
     private _renderEachItem;
-    private _renderPager;
+    private _createPager;
+    private _updatePositionOfPager;
+    private _bindEventsOfPager;
+    private _renderPagerComponent;
     private _onHover;
     private _onUnHover;
     private _onClick;

package/cjs/legend/discrete/discrete.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DiscreteLegend = void 0;
 
-const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), util_1 = require("../../util"), DEFAULT_STATES = {
+const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), util_1 = require("../../util"), scrollbar_1 = require("../../scrollbar"), DEFAULT_STATES = {
     [constant_1.LegendStateValue.focus]: {},
     [constant_1.LegendStateValue.selected]: {},
     [constant_1.LegendStateValue.selectedHover]: {},
@@ -86,39 +86,63 @@ class DiscreteLegend extends base_1.LegendBase {
             this._setLegendItemState(item, constant_1.LegendStateValue.unSelected));
         }));
     }
-    _renderContent() {
-        const {item: item = {}, items: items, reversed: reversed, maxCol: maxCol = 1, maxRow: maxRow = 2} = this.attribute;
-        if (!1 === item.visible || (0, vutils_1.isEmpty)(items)) return;
-        let legendItems = items;
-        reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = vrender_core_1.graphicCreator.group({
-            x: 0,
-            y: 0
-        });
-        this._itemsContainer = itemsContainer;
-        const {layout: layout, maxWidth: maxWidth, maxHeight: maxHeight, defaultSelected: defaultSelected = [], autoPage: autoPage} = this.attribute, isHorizontal = "horizontal" === layout, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW, maxWidth: maxItemWidth, width: itemWidth, height: itemHeight} = item;
-        (0, vutils_1.isValid)(maxItemWidth) ? (0, vutils_1.isValid)(itemWidth) ? this._itemWidthByUser = Math.min(maxItemWidth, itemWidth) : this._itemWidthByUser = maxItemWidth : (0, 
-        vutils_1.isValid)(itemWidth) && (this._itemWidthByUser = itemWidth), (0, vutils_1.isValid)(itemHeight) && (this._itemHeightByUser = itemHeight);
-        let doWrap = !1, maxWidthInCol = 0, startX = 0, startY = 0, maxPages = 1, pages = 1;
-        legendItems.forEach(((item, index) => {
-            item.id || (item.id = item.label), item.index = index;
+    _renderItems() {
+        const {item: itemAttrs = {}, maxCol: maxCol = 1, maxRow: maxRow = 2, maxWidth: maxWidth, maxHeight: maxHeight, defaultSelected: defaultSelected = [], lazyload: lazyload} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = itemAttrs, itemsContainer = this._itemsContainer, {items: legendItems, isHorizontal: isHorizontal, startIndex: startIndex} = this._itemContext, maxPages = isHorizontal ? maxRow : maxCol;
+        let item, {doWrap: doWrap, maxWidthInCol: maxWidthInCol, startX: startX, startY: startY, pages: pages} = this._itemContext;
+        for (let index = startIndex, len = legendItems.length; index < len; index++) {
+            if (lazyload && pages > this._itemContext.currentPage * maxPages) {
+                this._itemContext.startIndex = index;
+                break;
+            }
+            item = legendItems[index], item.id || (item.id = item.label), item.index = index;
             const itemGroup = this._renderEachItem(item, !!(0, vutils_1.isEmpty)(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index, legendItems), itemWidth = itemGroup.attribute.width, itemHeight = itemGroup.attribute.height;
             this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), 
-            this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (maxPages = maxRow, 
-            (0, vutils_1.isValid)(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, 
+            this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? ((0, 
+            vutils_1.isValid)(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, 
             startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, 
             startX = 0, startY += itemHeight + spaceRow, pages += 1)), index > 0 && itemGroup.setAttributes({
                 x: startX,
                 y: startY
-            }), startX += spaceCol + itemWidth) : (maxPages = maxCol, (0, vutils_1.isValid)(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, 
+            }), startX += spaceCol + itemWidth) : ((0, vutils_1.isValid)(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, 
             startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), 
             index > 0 && itemGroup.setAttributes({
                 x: startX,
                 y: startY
             }), startY += spaceRow + itemHeight), itemsContainer.add(itemGroup);
-        }));
+        }
+        return this._itemContext.doWrap = doWrap, this._itemContext.startX = startX, this._itemContext.startY = startY, 
+        this._itemContext.maxWidthInCol = maxWidthInCol, this._itemContext.pages = pages, 
+        this._itemContext.maxPages = maxPages, lazyload || (this._itemContext.startIndex = legendItems.length), 
+        this._itemContext;
+    }
+    _renderContent() {
+        const {item: item = {}, items: items, reversed: reversed} = this.attribute;
+        if (!1 === item.visible || (0, vutils_1.isEmpty)(items)) return;
+        let legendItems = items;
+        reversed && (legendItems = null == items ? void 0 : items.reverse());
+        const itemsContainer = vrender_core_1.graphicCreator.group({
+            x: 0,
+            y: 0
+        });
+        this._itemsContainer = itemsContainer;
+        const {layout: layout, autoPage: autoPage} = this.attribute, isHorizontal = "horizontal" === layout, {maxWidth: maxItemWidth, width: itemWidth, height: itemHeight} = item;
+        (0, vutils_1.isValid)(maxItemWidth) ? (0, vutils_1.isValid)(itemWidth) ? this._itemWidthByUser = Math.min(maxItemWidth, itemWidth) : this._itemWidthByUser = maxItemWidth : (0, 
+        vutils_1.isValid)(itemWidth) && (this._itemWidthByUser = itemWidth), (0, vutils_1.isValid)(itemHeight) && (this._itemHeightByUser = itemHeight), 
+        this._itemContext = {
+            currentPage: this.attribute.pager && this.attribute.pager.defaultCurrent || 1,
+            doWrap: !1,
+            maxWidthInCol: 0,
+            maxPages: 1,
+            pages: 1,
+            startX: 0,
+            startY: 0,
+            startIndex: 0,
+            items: legendItems,
+            isHorizontal: isHorizontal,
+            totalPage: 1 / 0
+        }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        doWrap && autoPage && pages > maxPages && (pagerRendered = this._renderPager(isHorizontal)), 
+        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent(isHorizontal)), 
         pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + (0, 
         vutils_1.get)(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
     }
@@ -131,7 +155,7 @@ class DiscreteLegend extends base_1.LegendBase {
     }
     _renderEachItem(item, isSelected, index, items) {
         var _a, _b;
-        const {id: id, label: label, value: value, shape: shape} = item, {padding: padding = 0, focus: focus, focusIconStyle: focusIconStyle} = this.attribute.item, {shape: shapeAttr, label: labelAttr, value: valueAttr, background: background} = this.attribute.item, shapeStyle = this._handleStyle(shapeAttr, item, isSelected, index, items), labelStyle = this._handleStyle(labelAttr, item, isSelected, index, items), valueStyle = this._handleStyle(valueAttr, item, isSelected, index, items), backgroundStyle = this._handleStyle(background, item, isSelected, index, items), parsedPadding = (0, 
+        const {id: id, label: label, value: value, shape: shape} = item, {padding: padding = 0, focus: focus, focusIconStyle: focusIconStyle, align: align} = this.attribute.item, {shape: shapeAttr, label: labelAttr, value: valueAttr, background: background} = this.attribute.item, shapeStyle = this._handleStyle(shapeAttr, item, isSelected, index, items), labelStyle = this._handleStyle(labelAttr, item, isSelected, index, items), valueStyle = this._handleStyle(valueAttr, item, isSelected, index, items), backgroundStyle = this._handleStyle(background, item, isSelected, index, items), parsedPadding = (0, 
         vutils_1.normalizePadding)(padding);
         let itemGroup;
         !1 === background.visible ? (itemGroup = vrender_core_1.graphicCreator.group({
@@ -224,83 +248,150 @@ class DiscreteLegend extends base_1.LegendBase {
         } else this._itemWidthByUser ? (labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace), 
         focusStartX = labelShape.AABBBounds.x2 + labelSpace) : focusStartX = labelShape.AABBBounds.x2 + labelSpace;
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
-        const innerGroupBounds = innerGroup.AABBBounds, innerGroupWidth = innerGroupBounds.width(), innerGroupHeight = innerGroupBounds.height(), itemGroupWidth = (0, 
-        vutils_1.isValid)(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3], itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
+        const innerGroupBounds = innerGroup.AABBBounds, innerGroupWidth = innerGroupBounds.width();
+        if ("right" === align) {
+            const x2 = innerGroupBounds.x2, x1 = innerGroupBounds.x1;
+            innerGroup.forEachChildren(((child, index) => {
+                "symbol" !== child.type && "right" !== child.attribute.textAlign || child === focusShape ? child.setAttribute("x", x1 + x2 - child.attribute.x - child.AABBBounds.width()) : "symbol" !== child.type ? child.setAttributes({
+                    x: x1 + x2 - child.attribute.x,
+                    textAlign: "left"
+                }) : child.setAttribute("x", x1 + x2 - child.attribute.x);
+            }));
+        }
+        const innerGroupHeight = innerGroupBounds.height(), itemGroupWidth = (0, vutils_1.isValid)(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3], itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
         return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, 
         focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), 
         itemGroup;
     }
-    _renderPager(isHorizontal) {
-        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.get)(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, item: item = {}, pager: pager = {}, disableTriggerEvent: disableTriggerEvent} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE, position: position = "middle"} = pager, pageStyle = __rest(pager, [ "animation", "animationDuration", "animationEasing", "space", "position" ]);
-        let pagerComp, pageHeight = 0, pageWidth = 0, startX = 0, startY = 0, pages = 1;
-        if (isHorizontal) {
-            if (pagerComp = new pager_1.Pager(Object.assign(Object.assign({
-                layout: 1 === maxRow ? "horizontal" : "vertical",
-                total: 99
-            }, (0, vutils_1.merge)({
-                handler: {
-                    preShape: "triangleUp",
-                    nextShape: "triangleDown"
+    _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+        var _a, _b;
+        const {disableTriggerEvent: disableTriggerEvent, maxRow: maxRow} = this.attribute;
+        return isScrollbar ? isHorizontal ? new scrollbar_1.ScrollBar(Object.assign(Object.assign({
+            direction: "vertical",
+            width: 12,
+            range: [ 0, .5 ]
+        }, compStyle), {
+            height: compSize,
+            disableTriggerEvent: disableTriggerEvent
+        })) : new scrollbar_1.ScrollBar(Object.assign(Object.assign({
+            direction: "horizontal",
+            disableTriggerEvent: disableTriggerEvent,
+            range: [ 0, .5 ],
+            height: 12
+        }, compStyle), {
+            width: compSize
+        })) : isHorizontal ? new pager_1.Pager(Object.assign(Object.assign({
+            layout: 1 === maxRow ? "horizontal" : "vertical",
+            total: 99
+        }, (0, vutils_1.merge)({
+            handler: {
+                preShape: "triangleUp",
+                nextShape: "triangleDown"
+            }
+        }, compStyle)), {
+            defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
+            disableTriggerEvent: disableTriggerEvent
+        })) : new pager_1.Pager(Object.assign({
+            layout: "horizontal",
+            total: 99,
+            disableTriggerEvent: disableTriggerEvent,
+            defaultCurrent: null === (_b = this.attribute.pager) || void 0 === _b ? void 0 : _b.defaultCurrent
+        }, compStyle));
+    }
+    _updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize) {
+        const {maxHeight: maxHeight, pager: pager} = this.attribute, {currentPage: currentPage, totalPage: totalPage} = this._itemContext;
+        if (isScrollbar) this._pagerComponent.setScrollRange([ (currentPage - 1) / totalPage, currentPage / totalPage ]), 
+        isHorizontal ? this._pagerComponent.setAttributes({
+            x: contentSize,
+            y: renderStartY
+        }) : this._pagerComponent.setAttributes({
+            x: 0,
+            y: maxHeight - this._pagerComponent.AABBBounds.height()
+        }); else {
+            const position = pager && pager.position || "middle";
+            if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
+                let y;
+                y = "start" === position ? renderStartY : "end" === position ? renderStartY + compSize - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compSize / 2 - this._pagerComponent.AABBBounds.height() / 2, 
+                this._pagerComponent.setAttributes({
+                    x: contentSize,
+                    y: y
+                });
+            } else {
+                let x;
+                x = "start" === position ? 0 : "end" === position ? compSize - this._pagerComponent.AABBBounds.width() : (compSize - this._pagerComponent.AABBBounds.width()) / 2, 
+                this._pagerComponent.setAttributes({
+                    x: x,
+                    y: maxHeight - this._pagerComponent.AABBBounds.height()
+                });
+            }
+        }
+    }
+    _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
+        const pager = this.attribute.pager || {}, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn"} = pager, pageParser = isScrollbar ? e => {
+            const {value: value} = e.detail;
+            let newPage = value[0] * this._itemContext.totalPage;
+            return pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1, 
+            newPage;
+        } : e => e.detail.current, onPaging = e => {
+            const newPage = pageParser(e);
+            if (newPage !== this._itemContext.currentPage) {
+                if (this._itemContext.currentPage = newPage, this._itemContext && this._itemContext.startIndex < this._itemContext.items.length) {
+                    this._renderItems();
+                    const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
+                    this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([ (newPage - 1) / newTotalPage, newPage / newTotalPage ]);
                 }
-            }, pageStyle)), {
-                disableTriggerEvent: disableTriggerEvent
-            })), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, 
-            pageWidth = maxWidth - pagerComp.AABBBounds.width() - pagerSpace, pageWidth <= 0) return this._innerView.removeChild(pagerComp), 
-            !1;
-            let y;
+                animation ? this._itemsContainer.animate().to(isHorizontal ? {
+                    y: -(newPage - 1) * (compSize + spaceSize)
+                } : {
+                    x: -(newPage - 1) * (compSize + spaceSize)
+                }, animationDuration, animationEasing) : isHorizontal ? this._itemsContainer.setAttribute("y", -(newPage - 1) * (compSize + spaceSize)) : this._itemsContainer.setAttribute("x", -(newPage - 1) * (compSize + spaceSize));
+            }
+        };
+        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), 
+        this._pagerComponent.addEventListener("toNext", onPaging));
+    }
+    _renderPagerComponent(isHorizontal) {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.get)(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, item: item = {}, pager: pager = {}} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE, defaultCurrent: defaultCurrent = 1} = pager, compStyle = __rest(pager, [ "space", "defaultCurrent" ]), isScrollbar = "scrollbar" === pager.type;
+        let comp, compSize = 0, contentSize = 0, startX = 0, startY = 0, pages = 1;
+        if (isHorizontal) {
+            if (compSize = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), 
+            this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxWidth - comp.AABBBounds.width() - pagerSpace, 
+            contentSize <= 0) return this._innerView.removeChild(comp), !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {width: width, height: height} = item.attribute;
-                pageWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
+                contentSize < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
                 index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startX += spaceCol + width;
-            })), pagerComp.setAttribute("total", Math.ceil(pages / maxRow)), y = "start" === position ? renderStartY : "end" === position ? renderStartY + pageHeight - pagerComp.AABBBounds.height() / 2 : renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2, 
-            pagerComp.setAttributes({
-                x: pageWidth,
-                y: y
-            });
+            })), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages;
+            const total = Math.ceil(pages / maxRow);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         } else {
-            if (pagerComp = new pager_1.Pager(Object.assign({
-                layout: "horizontal",
-                total: 99,
-                disableTriggerEvent: disableTriggerEvent
-            }, pageStyle)), this._pager = pagerComp, this._innerView.add(pagerComp), pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, 
-            pageHeight = maxHeight - pagerComp.AABBBounds.height() - pagerSpace - renderStartY, 
-            pageHeight <= 0) return this._innerView.removeChild(pagerComp), !1;
-            let x;
+            if (compSize = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), 
+            this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, 
+            contentSize <= 0) return this._innerView.removeChild(comp), !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {height: height} = item.attribute;
-                pageHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
+                contentSize < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
                 pages += 1), index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startY += spaceRow + height;
-            })), pagerComp.setAttribute("total", Math.ceil(pages / maxCol)), x = "start" === position ? 0 : "end" === position ? pageWidth - pagerComp.AABBBounds.width() : (pageWidth - pagerComp.AABBBounds.width()) / 2, 
-            pagerComp.setAttributes({
-                x: x,
-                y: maxHeight - pagerComp.AABBBounds.height()
-            });
+            }));
+            const total = Math.ceil(pages / maxCol);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         }
-        pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
         const clipGroup = vrender_core_1.graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: pageWidth,
-            height: pageHeight,
+            width: isHorizontal ? contentSize : compSize,
+            height: isHorizontal ? compSize : contentSize,
             clip: !0,
             pickable: !1
         });
-        clipGroup.add(itemsContainer), this._innerView.add(clipGroup);
-        const onPaging = e => {
-            const {current: current} = e.detail;
-            animation ? itemsContainer.animate().to(isHorizontal ? {
-                y: -(current - 1) * (pageHeight + spaceRow)
-            } : {
-                x: -(current - 1) * (pageWidth + spaceCol)
-            }, animationDuration, animationEasing) : isHorizontal ? itemsContainer.setAttribute("y", -(current - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(current - 1) * (pageWidth + spaceCol));
-        };
-        return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), 
         !0;
     }
     _hover(legendItem, e) {