@visactor/vrender-components 0.18.4 → 0.18.6

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC;AAEhC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.18.4\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './util';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC;AAEhC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.18.6\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './util';\n"]}

package/es/legend/discrete/discrete.d.ts

@@ -26,14 +26,19 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
         isHorizontal: boolean;
         currentPage: number;
         totalPage: number;
+        isScrollbar: boolean;
     };
     protected _renderContent(): void;
     protected _bindEvents(): void;
     private _autoEllipsis;
     private _renderEachItem;
     private _createPager;
+    private _createScrollbar;
     private _updatePositionOfPager;
+    private _updatePositionOfScrollbar;
     private _bindEventsOfPager;
+    private _renderPager;
+    private _renderScrollbar;
     private _renderPagerComponent;
     private _onHover;
     private _onUnHover;

package/es/legend/discrete/discrete.js

@@ -95,32 +95,29 @@ export class DiscreteLegend extends LegendBase {
         }));
     }
     _renderItems() {
-        const {item: itemAttrs = {}, maxCol: maxCol = 1, maxRow: maxRow = 2, maxWidth: maxWidth, maxHeight: maxHeight, defaultSelected: defaultSelected = [], lazyload: lazyload} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = itemAttrs, itemsContainer = this._itemsContainer, {items: legendItems, isHorizontal: isHorizontal, startIndex: startIndex} = this._itemContext, maxPages = isHorizontal ? maxRow : maxCol;
+        const {item: itemAttrs = {}, maxCol: maxCol = 1, maxRow: maxRow = 2, maxWidth: maxWidth, maxHeight: maxHeight, defaultSelected: defaultSelected = [], lazyload: lazyload, autoPage: autoPage} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = itemAttrs, itemsContainer = this._itemsContainer, {items: legendItems, isHorizontal: isHorizontal, startIndex: startIndex, isScrollbar: isScrollbar} = this._itemContext, maxPages = isScrollbar ? 1 : 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;
+        for (let index = startIndex, len = legendItems.length; index < len && !(lazyload && pages > this._itemContext.currentPage * maxPages); index++) {
+            lazyload && (this._itemContext.startIndex = index + 1), item = legendItems[index], 
+            item.id || (item.id = item.label), item.index = index;
             const itemGroup = this._renderEachItem(item, !!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 ? (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({
+            this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid(maxWidth) && (isScrollbar && autoPage ? (pages = Math.ceil((startX + itemWidth) / maxWidth), 
+            doWrap = pages > 1) : startX + itemWidth > maxWidth && (doWrap = !0, startX > 0 && (pages += 1, 
+            startX = 0, startY += itemHeight + spaceRow))), 0 === startX && 0 === startY || itemGroup.setAttributes({
                 x: startX,
                 y: startY
-            }), startX += spaceCol + itemWidth) : (isValid(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, 
-            startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), 
-            index > 0 && itemGroup.setAttributes({
+            }), startX += spaceCol + itemWidth) : (isValid(maxHeight) && (isScrollbar && autoPage ? (pages = Math.ceil((startY + itemHeight) / maxHeight), 
+            doWrap = pages > 1) : maxHeight < startY + itemHeight && (pages += 1, doWrap = !0, 
+            startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0)), 0 === startX && 0 === startY || 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;
+        this._itemContext.maxPages = maxPages, isScrollbar && (this._itemContext.totalPage = pages), 
+        lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
     }
     _renderContent() {
         const {item: item = {}, items: items, reversed: reversed, maxWidth: maxWidth} = this.attribute;
@@ -135,8 +132,10 @@ export class DiscreteLegend extends LegendBase {
         const {layout: layout, autoPage: autoPage} = this.attribute, isHorizontal = "horizontal" === layout, {maxWidth: maxItemWidth, width: itemWidth, height: itemHeight} = item, widthsOptions = [];
         isValid(maxItemWidth) && widthsOptions.push(maxItemWidth), isValid(itemWidth) && widthsOptions.push(itemWidth), 
         widthsOptions.length && (isValid(maxWidth) && widthsOptions.push(maxWidth), this._itemWidthByUser = minInArray(widthsOptions)), 
-        isValid(itemHeight) && (this._itemHeightByUser = itemHeight), this._itemContext = {
-            currentPage: this.attribute.pager && this.attribute.pager.defaultCurrent || 1,
+        isValid(itemHeight) && (this._itemHeightByUser = itemHeight);
+        const pager = this.attribute.pager;
+        this._itemContext = {
+            currentPage: pager && pager.defaultCurrent || 1,
             doWrap: !1,
             maxWidthInCol: 0,
             maxPages: 1,
@@ -146,10 +145,11 @@ export class DiscreteLegend extends LegendBase {
             startIndex: 0,
             items: legendItems,
             isHorizontal: isHorizontal,
-            totalPage: 1 / 0
+            totalPage: 1 / 0,
+            isScrollbar: pager && "scrollbar" === pager.type
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent(isHorizontal)), 
+        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), 
         pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0), 
         this._innerView.add(itemsContainer));
     }
@@ -274,24 +274,10 @@ export class DiscreteLegend extends LegendBase {
         focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), 
         itemGroup;
     }
-    _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+    _createPager(compStyle) {
         var _a, _b;
         const {disableTriggerEvent: disableTriggerEvent, maxRow: maxRow} = this.attribute;
-        return isScrollbar ? new ScrollBar(isHorizontal ? Object.assign(Object.assign({
-            direction: "vertical",
-            width: 12,
-            range: [ 0, .5 ]
-        }, compStyle), {
-            height: compSize,
-            disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign(Object.assign({
-            direction: "horizontal",
-            disableTriggerEvent: disableTriggerEvent,
-            range: [ 0, .5 ],
-            height: 12
-        }, compStyle), {
-            width: compSize
-        })) : new Pager(isHorizontal ? Object.assign(Object.assign({
+        return this._itemContext.isHorizontal ? new Pager(Object.assign(Object.assign({
             layout: 1 === maxRow ? "horizontal" : "vertical",
             total: 99
         }, merge({
@@ -302,43 +288,62 @@ export class DiscreteLegend extends LegendBase {
         }, compStyle)), {
             defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
             disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign({
+        })) : new 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 ]), 
+    _createScrollbar(compStyle, compSize) {
+        const {disableTriggerEvent: disableTriggerEvent} = this.attribute;
+        return this._itemContext.isHorizontal ? new ScrollBar(Object.assign(Object.assign({
+            direction: "horizontal",
+            disableTriggerEvent: disableTriggerEvent,
+            range: [ 0, .5 ],
+            height: 12
+        }, compStyle), {
+            width: compSize
+        })) : new ScrollBar(Object.assign(Object.assign({
+            direction: "vertical",
+            width: 12,
+            range: [ 0, .5 ]
+        }, compStyle), {
+            height: compSize,
+            disableTriggerEvent: disableTriggerEvent
+        }));
+    }
+    _updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight) {
+        const {maxHeight: maxHeight, pager: pager} = this.attribute, {totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext, position = pager && pager.position || "middle";
+        if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
+            let y;
+            y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2, 
+            this._pagerComponent.setAttributes({
+                x: contentWidth,
+                y: y
+            });
+        } else {
+            let x;
+            x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2, 
+            this._pagerComponent.setAttributes({
+                x: x,
+                y: maxHeight - this._pagerComponent.AABBBounds.height()
+            });
+        }
+    }
+    _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
+        const {currentPage: currentPage, totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext;
+        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()
-                });
-            }
-        }
+            y: renderStartY + contentHeight
+        }) : this._pagerComponent.setAttributes({
+            x: contentWidth,
+            y: renderStartY
+        });
     }
-    _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
-        const pager = this.attribute.pager || {}, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn"} = pager, pageParser = isScrollbar ? e => {
+    _bindEventsOfPager(pageSize, channel) {
+        const pager = this.attribute.pager || {}, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn"} = pager, pageParser = this._itemContext.isScrollbar ? e => {
             const {value: value} = e.detail;
             let newPage = value[0] * this._itemContext.totalPage;
             return pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1, 
@@ -351,58 +356,89 @@ export class DiscreteLegend extends LegendBase {
                     const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
                     this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([ (newPage - 1) / newTotalPage, newPage / newTotalPage ]);
                 }
-                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));
+                animation ? this._itemsContainer.animate().to({
+                    [channel]: -(newPage - 1) * pageSize
+                }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
         };
-        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), 
+        this._itemContext.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() + 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 = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = 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;
+    _renderPager() {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + 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 = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent: defaultCurrent = 1} = pager, compStyle = __rest(pager, [ "space", "defaultCurrent" ]), {isHorizontal: isHorizontal} = this._itemContext;
+        let comp, compWidth = 0, compHeight = 0, contentWidth = 0, contentHeight = 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;
+            if (compHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, compWidth = maxWidth, 
+            comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), 
+            contentWidth = maxWidth - comp.AABBBounds.width() - pagerSpace, contentWidth <= 0) return this._innerView.removeChild(comp), 
+            !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {width: width, height: height} = item.attribute;
-                contentSize < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
+                contentWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
                 index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startX += spaceCol + width;
             })), 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);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         } else {
-            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;
+            if (compWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, compHeight = maxHeight, 
+            contentWidth = compWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, 
+            this._innerView.add(comp), contentHeight = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, 
+            contentHeight <= 0) return this._innerView.removeChild(comp), !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {height: height} = item.attribute;
-                contentSize < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
+                contentHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
                 pages += 1), index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startY += spaceRow + height;
             }));
             const total = Math.ceil(pages / maxCol);
-            this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         }
-        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
         const clipGroup = graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: isHorizontal ? contentSize : compSize,
-            height: isHorizontal ? compSize : contentSize,
+            width: isHorizontal ? contentWidth : compWidth,
+            height: isHorizontal ? compHeight : contentHeight,
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
+        !0;
+    }
+    _renderScrollbar() {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, item: item = {}, pager: pager = {}} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent: defaultCurrent = 1} = pager, compStyle = __rest(pager, [ "space", "defaultCurrent" ]), {isHorizontal: isHorizontal} = this._itemContext;
+        let comp, compSize = 0, contentWidth = 0, contentHeight = 0, startY = 0, pages = 1;
+        if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, 
+        comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, 
+        this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY); else {
+            if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, 
+            this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, 
+            contentHeight <= 0) return this._innerView.removeChild(comp), !1;
+            itemsContainer.getChildren().forEach(((item, index) => {
+                const {height: height} = item.attribute;
+                pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height;
+            })), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+        }
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
+        const clipGroup = graphicCreator.group({
+            x: 0,
+            y: renderStartY,
+            width: contentWidth,
+            height: contentHeight,
+            clip: !0,
+            pickable: !1
+        });
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
+        !0;
+    }
+    _renderPagerComponent() {
+        return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), 
         !0;
     }
     _hover(legendItem, e) {