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

package/es/legend/color/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/legend/color/color.ts"],"names":[],"mappings":"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","file":"color.js","sourcesContent":["/**\n * @description 连续颜色图例\n * TODO:\n * showHandlers 测试\n */\nimport { merge, isEmpty, get } from '@visactor/vutils';\nimport type { FederatedPointerEvent, IColor, ILinearGradient, INode } from '@visactor/vrender-core';\nimport type { ILinearScale } from '@visactor/vscale';\nimport { LinearScale } from '@visactor/vscale';\nimport { LegendBase } from '../base';\nimport { Slider } from '../../slider';\nimport { DEFAULT_TITLE_SPACE } from '../constant';\nimport type { ColorLegendAttributes } from './type';\nimport type { ComponentOptions } from '../../interface';\nimport { loadColorContinuousLegendComponent } from '../register';\n\nloadColorContinuousLegendComponent();\nexport class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {\n  name = 'colorLegend';\n\n  static defaultAttributes = {\n    layout: 'horizontal',\n    title: {\n      // orient: 'top',\n      align: 'start',\n      space: DEFAULT_TITLE_SPACE,\n      textStyle: {\n        fontSize: 12,\n        fontWeight: 'bold',\n        fill: 'rgba(46, 47, 50, 1)'\n      }\n    },\n    handlerSize: 10,\n    handlerStyle: {\n      lineWidth: 4,\n      stroke: '#fff',\n      outerBorder: {\n        distance: 2,\n        lineWidth: 1,\n        stroke: '#ccc'\n      }\n    }\n  };\n\n  private _slider!: Slider;\n  private _colorScale!: ILinearScale;\n  private _color: IColor | undefined;\n\n  constructor(attributes: ColorLegendAttributes, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, ColorContinuousLegend.defaultAttributes, attributes));\n  }\n\n  /**\n   * 更新数据选中范围\n   * @param value 选中数据范围\n   * @returns\n   */\n  setSelected(value: number[]) {\n    if (!this._slider) {\n      return;\n    }\n    this._slider.setValue(value);\n    this._updateColor();\n  }\n\n  protected _renderContent(): void {\n    const {\n      colors,\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler = true,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle,\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    } = this.attribute as ColorLegendAttributes;\n\n    // 创建 colorScale\n    const domain = [];\n    const step = (max - min) / (colors.length - 1);\n    for (let i = 0; i < colors.length; i++) {\n      domain.push(min + step * i);\n    }\n    this._colorScale = new LinearScale().domain(domain, true).range(colors);\n    this._color = this._getTrackColor();\n\n    const slider = new Slider({\n      x: 0,\n      y: 0,\n      range: {\n        draggableTrack: true\n      },\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle: {\n        fill: this._color,\n        ...trackStyle\n      },\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    });\n    this._innerView.add(slider as unknown as INode);\n    this._slider = slider;\n    // 做下位置调整，对齐\n    slider.translateTo(\n      0 - slider.AABBBounds.x1,\n      (this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', DEFAULT_TITLE_SPACE) : 0) -\n        slider.AABBBounds.y1\n    );\n    this._updateColor();\n  }\n\n  protected _bindEvents(): void {\n    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\n    if (this._slider) {\n      this._slider.addEventListener('change', this._onSliderChange as EventListenerOrEventListenerObject);\n    }\n  }\n\n  private _getTrackColor(): IColor | undefined {\n    const { colors, layout } = this.attribute as ColorLegendAttributes;\n\n    if (isEmpty(colors)) {\n      return undefined;\n    }\n    const count = colors.length;\n    if (count === 1) {\n      return colors[0];\n    }\n    const stops = [];\n\n    for (let i = 0; i < count; i++) {\n      const percent = i / (count - 1);\n      stops.push({\n        offset: percent,\n        color: colors[i]\n      });\n    }\n    const isHorizontal = layout === 'horizontal';\n    return {\n      gradient: 'linear',\n      stops,\n      x0: 0,\n      y0: 0,\n      x1: isHorizontal ? 1 : 0,\n      y1: isHorizontal ? 0 : 1\n    };\n  }\n\n  private _onSliderChange = (e: FederatedPointerEvent) => {\n    // 更新 handler 以及 track 的渐变色\n    this._updateColor();\n    this.dispatchEvent(e);\n  };\n\n  private _updateColor() {\n    const { layout = 'horizontal', colors, railWidth, railHeight } = this.attribute as ColorLegendAttributes;\n    const { startHandler, endHandler, track } = this._slider;\n    const { startValue, endValue, startPos, endPos } = this._slider.currentValue;\n\n    // 计算颜色\n    const startHandlerColor = this._colorScale.scale(startValue);\n    const endHandlerColor = this._colorScale.scale(endValue);\n    startHandler?.setAttribute('fill', startHandlerColor);\n    endHandler?.setAttribute('fill', endHandlerColor);\n\n    const isHorizontal = layout === 'horizontal';\n    const railLen = isHorizontal ? railWidth : railHeight;\n    const trackLength = Math.abs((startPos as number) - (endPos as number));\n\n    // 计算渐变色\n    if (trackLength !== railLen && colors && colors.length > 1) {\n      const stops = (this._color as ILinearGradient).stops;\n      const start = Math.min(startPos as number, endPos as number);\n      const end = Math.max(startPos as number, endPos as number);\n      const startRatio = start / railLen;\n      const endRatio = end / railLen;\n      const range = endRatio - startRatio;\n      const betweenStops = stops.filter(stop => stop.offset > startRatio && stop.offset < endRatio);\n\n      const minValue = Math.min(startValue, endValue);\n      const maxValue = Math.max(startValue, endValue);\n      const startColor = this._colorScale.scale(minValue);\n      const endColor = this._colorScale.scale(maxValue);\n      const newStops = [{ offset: 0, color: startColor }];\n      betweenStops.forEach(stop => {\n        newStops.push({\n          offset: (stop.offset - startRatio) / range,\n          color: stop.color\n        });\n      });\n      newStops.push({\n        offset: 1,\n        color: endColor\n      });\n      track.setAttribute('fill', {\n        ...(this._color as ILinearGradient),\n        stops: newStops\n      });\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../src/legend/color/color.ts"],"names":[],"mappings":"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","file":"color.js","sourcesContent":["/**\n * @description 连续颜色图例\n * TODO:\n * showHandlers 测试\n */\nimport { merge, isEmpty, get, isNil } from '@visactor/vutils';\nimport type { FederatedPointerEvent, FederatedEvent, IColor, ILinearGradient, INode } from '@visactor/vrender-core';\nimport type { ILinearScale } from '@visactor/vscale';\nimport { LinearScale } from '@visactor/vscale';\nimport { LegendBase } from '../base';\nimport { Slider } from '../../slider';\nimport { DEFAULT_TITLE_SPACE } from '../constant';\nimport type { ColorLegendAttributes } from './type';\nimport type { ComponentOptions } from '../../interface';\nimport { loadColorContinuousLegendComponent } from '../register';\n\nloadColorContinuousLegendComponent();\nexport class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {\n  name = 'colorLegend';\n\n  static defaultAttributes = {\n    layout: 'horizontal',\n    title: {\n      // orient: 'top',\n      align: 'start',\n      space: DEFAULT_TITLE_SPACE,\n      textStyle: {\n        fontSize: 12,\n        fontWeight: 'bold',\n        fill: 'rgba(46, 47, 50, 1)'\n      }\n    },\n    handlerSize: 10,\n    handlerStyle: {\n      lineWidth: 4,\n      stroke: '#fff',\n      outerBorder: {\n        distance: 2,\n        lineWidth: 1,\n        stroke: '#ccc'\n      }\n    },\n    tooltip: {\n      shapeStyle: {\n        lineWidth: 4,\n        stroke: '#fff'\n      }\n    }\n  };\n\n  private _slider!: Slider;\n  private _colorScale!: ILinearScale;\n  private _color: IColor | undefined;\n\n  constructor(attributes: ColorLegendAttributes, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, ColorContinuousLegend.defaultAttributes, attributes));\n  }\n\n  /**\n   * 更新数据选中范围\n   * @param value 选中数据范围\n   * @returns\n   */\n  setSelected(value: number[]) {\n    if (!this._slider) {\n      return;\n    }\n    this._slider.setValue(value);\n    this._updateColor();\n  }\n\n  protected _renderContent(): void {\n    const {\n      colors,\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler = true,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle,\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    } = this.attribute as ColorLegendAttributes;\n\n    // 创建 colorScale\n    const domain = [];\n    const step = (max - min) / (colors.length - 1);\n    for (let i = 0; i < colors.length; i++) {\n      domain.push(min + step * i);\n    }\n    this._colorScale = new LinearScale().domain(domain, true).range(colors);\n    this._color = this._getTrackColor();\n\n    const slider = new Slider({\n      x: 0,\n      y: 0,\n      range: {\n        draggableTrack: true\n      },\n      slidable,\n      layout,\n      align,\n      min,\n      max,\n      value,\n      railWidth,\n      railHeight,\n      showHandler,\n      handlerSize,\n      handlerStyle,\n      railStyle,\n      trackStyle: {\n        fill: this._color,\n        ...trackStyle\n      },\n      startText,\n      endText,\n      handlerText,\n      showTooltip,\n      tooltip,\n      disableTriggerEvent\n    });\n    this._innerView.add(slider as unknown as INode);\n    this._slider = slider;\n    // 做下位置调整，对齐\n    slider.translateTo(\n      0 - slider.AABBBounds.x1,\n      (this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', DEFAULT_TITLE_SPACE) : 0) -\n        slider.AABBBounds.y1\n    );\n    this._updateColor();\n  }\n\n  protected _bindEvents(): void {\n    if (this.attribute.disableTriggerEvent) {\n      return;\n    }\n    if (this._slider) {\n      this._slider.addEventListener('change', this._onSliderChange as EventListenerOrEventListenerObject);\n      this._slider.addEventListener('sliderTooltip', this._onSliderToolipChange as EventListenerOrEventListenerObject);\n    }\n  }\n\n  private _getTrackColor(): IColor | undefined {\n    const { colors, layout } = this.attribute as ColorLegendAttributes;\n\n    if (isEmpty(colors)) {\n      return undefined;\n    }\n    const count = colors.length;\n    if (count === 1) {\n      return colors[0];\n    }\n    const stops = [];\n\n    for (let i = 0; i < count; i++) {\n      const percent = i / (count - 1);\n      stops.push({\n        offset: percent,\n        color: colors[i]\n      });\n    }\n    const isHorizontal = layout === 'horizontal';\n    return {\n      gradient: 'linear',\n      stops,\n      x0: 0,\n      y0: 0,\n      x1: isHorizontal ? 1 : 0,\n      y1: isHorizontal ? 0 : 1\n    };\n  }\n\n  private _onSliderToolipChange = (e: FederatedEvent) => {\n    const tooltipShape = this._slider.tooltipShape;\n\n    if (tooltipShape && e.detail && !isNil(e.detail.value)) {\n      const color = this._colorScale.scale(e.detail.value);\n\n      tooltipShape.setAttribute('fill', color);\n    }\n\n    this.dispatchEvent(e);\n  };\n\n  private _onSliderChange = (e: FederatedEvent) => {\n    // 更新 handler 以及 track 的渐变色\n    this._updateColor();\n    this.dispatchEvent(e);\n  };\n\n  private _updateColor() {\n    const { layout = 'horizontal', colors, railWidth, railHeight } = this.attribute as ColorLegendAttributes;\n    const { startHandler, endHandler, track } = this._slider;\n    const { startValue, endValue, startPos, endPos } = this._slider.currentValue;\n\n    // 计算颜色\n    const startHandlerColor = this._colorScale.scale(startValue);\n    const endHandlerColor = this._colorScale.scale(endValue);\n    startHandler?.setAttribute('fill', startHandlerColor);\n    endHandler?.setAttribute('fill', endHandlerColor);\n\n    const isHorizontal = layout === 'horizontal';\n    const railLen = isHorizontal ? railWidth : railHeight;\n    const trackLength = Math.abs((startPos as number) - (endPos as number));\n\n    // 计算渐变色\n    if (trackLength !== railLen && colors && colors.length > 1) {\n      const stops = (this._color as ILinearGradient).stops;\n      const start = Math.min(startPos as number, endPos as number);\n      const end = Math.max(startPos as number, endPos as number);\n      const startRatio = start / railLen;\n      const endRatio = end / railLen;\n      const range = endRatio - startRatio;\n      const betweenStops = stops.filter(stop => stop.offset > startRatio && stop.offset < endRatio);\n\n      const minValue = Math.min(startValue, endValue);\n      const maxValue = Math.max(startValue, endValue);\n      const startColor = this._colorScale.scale(minValue);\n      const endColor = this._colorScale.scale(maxValue);\n      const newStops = [{ offset: 0, color: startColor }];\n      betweenStops.forEach(stop => {\n        newStops.push({\n          offset: (stop.offset - startRatio) / range,\n          color: stop.color\n        });\n      });\n      newStops.push({\n        offset: 1,\n        color: endColor\n      });\n      track.setAttribute('fill', {\n        ...(this._color as ILinearGradient),\n        stops: newStops\n      });\n    }\n  }\n}\n"]}

package/es/legend/constant.js

@@ -37,4 +37,4 @@ export var LEGEND_ELEMENT_NAME;
     LEGEND_ELEMENT_NAME.itemLabel = "legendItemLabel", LEGEND_ELEMENT_NAME.itemValue = "legendItemValue", 
     LEGEND_ELEMENT_NAME.focus = "legendItemFocus";
 }(LEGEND_ELEMENT_NAME || (LEGEND_ELEMENT_NAME = {}));
-//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

package/es/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/es/legend/discrete/discrete.js

@@ -22,6 +22,8 @@ import { loadDiscreteLegendComponent } from "../register";
 
 import { isRichText, richTextAttributeTransform } from "../../util";
 
+import { ScrollBar } from "../../scrollbar";
+
 const DEFAULT_STATES = {
     [LegendStateValue.focus]: {},
     [LegendStateValue.selected]: {},
@@ -92,39 +94,61 @@ export class DiscreteLegend extends LegendBase {
             this._setLegendItemState(item, LegendStateValue.unSelected));
         }));
     }
-    _renderContent() {
-        const {item: item = {}, items: items, reversed: reversed, maxCol: maxCol = 1, maxRow: maxRow = 2} = this.attribute;
-        if (!1 === item.visible || isEmpty(items)) return;
-        let legendItems = items;
-        reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = 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 = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW, maxWidth: maxItemWidth, width: itemWidth, height: itemHeight} = item;
-        isValid(maxItemWidth) ? isValid(itemWidth) ? this._itemWidthByUser = Math.min(maxItemWidth, itemWidth) : this._itemWidthByUser = maxItemWidth : isValid(itemWidth) && (this._itemWidthByUser = itemWidth), 
-        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 = 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;
+        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, !!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, 
-            isValid(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, 
-            startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, 
+            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({
                 x: startX,
                 y: startY
-            }), startX += spaceCol + itemWidth) : (maxPages = maxCol, isValid(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, 
+            }), startX += spaceCol + itemWidth) : (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 || isEmpty(items)) return;
+        let legendItems = items;
+        reversed && (legendItems = null == items ? void 0 : items.reverse());
+        const itemsContainer = 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;
+        isValid(maxItemWidth) ? isValid(itemWidth) ? this._itemWidthByUser = Math.min(maxItemWidth, itemWidth) : this._itemWidthByUser = maxItemWidth : isValid(itemWidth) && (this._itemWidthByUser = itemWidth), 
+        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() + get(this.attribute, "title.space", 8) : 0), 
         this._innerView.add(itemsContainer));
     }
@@ -137,7 +161,7 @@ export class DiscreteLegend extends 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 = normalizePadding(padding);
+        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 = normalizePadding(padding);
         let itemGroup;
         !1 === background.visible ? (itemGroup = graphicCreator.group({
             x: 0,
@@ -227,82 +251,150 @@ export class DiscreteLegend extends 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 = 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 = 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() + 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 = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = 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(Object.assign(Object.assign({
-                layout: 1 === maxRow ? "horizontal" : "vertical",
-                total: 99
-            }, merge({
-                handler: {
-                    preShape: "triangleUp",
-                    nextShape: "triangleDown"
+    _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+        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({
+            layout: 1 === maxRow ? "horizontal" : "vertical",
+            total: 99
+        }, merge({
+            handler: {
+                preShape: "triangleUp",
+                nextShape: "triangleDown"
+            }
+        }, compStyle)), {
+            defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
+            disableTriggerEvent: disableTriggerEvent
+        }) : 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() + 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;
+        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(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 = 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) {