@visactor/vrender-components 0.21.0-vstory.2 → 0.21.0

package/es/label/overlap/shiftY.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/label/overlap/shiftY.ts"],"names":[],"mappings":"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","file":"shiftY.js","sourcesContent":["import type { IText } from '@visactor/vrender-core';\n\nexport interface IShiftYOption {\n  maxIterations?: number;\n  maxError?: number;\n  padding?: number;\n  maxY?: number;\n}\n\nexport function shiftY(texts: IText[], option: IShiftYOption = {}) {\n  const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE } = option;\n\n  const n = texts.length;\n  if (n <= 1) {\n    return texts;\n  }\n\n  const isIntersect = ([a, b]: [number, number], [c, d]: [number, number]) => {\n    return d > a && b > c;\n  };\n\n  const textInformation = new Map<IText, { y0: number; y: number; height: number; x1: number; x2: number }>();\n\n  // y0      : 初始位置\n  // y       : 最终位置\n  // height  : 高度\n  // x1, x2  : 左右边界\n  const getY0 = (text: IText) => textInformation.get(text).y0;\n  const getY = (text: IText) => textInformation.get(text).y;\n  const getHeight = (text: IText) => textInformation.get(text).height;\n  const getX1 = (text: IText) => textInformation.get(text).x1;\n  const getX2 = (text: IText) => textInformation.get(text).x2;\n  const setY = (text: IText, y: number) => {\n    textInformation.get(text).y = y;\n  };\n\n  for (const text of texts) {\n    const { y1, y2, x1, x2 } = text.AABBBounds;\n    textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });\n  }\n\n  for (let iter = 0; iter < maxIterations; iter++) {\n    texts.sort((a, b) => getY(a) - getY(b));\n    let error = 0;\n    for (let i = 0; i < n - 1; i++) {\n      const curText = texts[i];\n      let j = i + 1;\n      let nextText;\n      while (\n        (nextText = texts[j]) &&\n        !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])\n      ) {\n        j += 1;\n      }\n      if (nextText) {\n        const y0 = getY(curText);\n        const h0 = getHeight(curText);\n        const y1 = getY(nextText);\n        const delta = y1 - (y0 + h0);\n        if (delta < padding) {\n          const newDelta = (padding - delta) / 2;\n          error = Math.max(error, newDelta);\n          if (y1 + newDelta + getHeight(nextText) > maxY) {\n            setY(curText, y0 - (padding - delta));\n          } else if (y0 - newDelta < 0) {\n            setY(nextText, y1 + (padding - delta));\n          } else {\n            setY(curText, y0 - newDelta);\n            setY(nextText, y1 + newDelta);\n          }\n        }\n      }\n    }\n    if (error < maxError) {\n      break;\n    }\n  }\n\n  for (const text of texts) {\n    const finalY = text.attribute.y + getY(text) - getY0(text);\n    text.setAttribute('y', finalY);\n  }\n\n  return texts;\n}\n"]}
+{"version":3,"sources":["../src/label/overlap/shiftY.ts"],"names":[],"mappings":"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","file":"shiftY.js","sourcesContent":["import type { IText } from '@visactor/vrender-core';\nimport { isNumberClose } from '@visactor/vutils';\n\nexport interface IShiftYOption {\n  labelling: (...args: any[]) => any;\n\n  maxY?: number;\n  globalShiftY?: {\n    /**\n     * 是否开启全局调整，开启后，所有文字会整体调整，否则只会按照 x 分组调整 top/bottom\n     * @default true\n     */\n    enable?: boolean;\n    /**\n     * 最大迭代次数\n     * @default 10\n     */\n    maxIterations?: number;\n    /**\n     * 最大误差\n     * @default 0.1\n     */\n    maxError?: number;\n    /**\n     * 调整后 text 之间的 padding\n     * @default 1\n     */\n    padding?: number;\n    /**\n     * 每个 text 最大被调整的次数\n     * @default 1000\n     */\n    maxAttempts?: number;\n    /**\n     * 每个 text 调整的 y 坐标差值限制\n     */\n    deltaYTolerance?: number;\n  };\n}\n\nconst isIntersect = (top: number, bottom: number) => {\n  return Math.ceil(top) > Math.floor(bottom);\n};\n\nconst isXIntersect = ([a, b]: [number, number], [c, d]: [number, number]) => {\n  return d > a && b > c;\n};\n\nfunction getIntersectionLength(range1: number[], range2: number[]) {\n  const [start1, end1] = range1;\n  const [start2, end2] = range2;\n\n  const start = Math.max(start1, start2);\n  const end = Math.min(end1, end2);\n\n  return Math.max(0, end - start);\n}\n\nexport function shiftY(texts: IText[], option: IShiftYOption) {\n  const {\n    maxY = Number.MAX_VALUE,\n    labelling,\n    globalShiftY = { enable: true, maxIterations: 10, maxError: 0.1, padding: 1 }\n  } = option;\n\n  const n = texts.length;\n  if (n <= 1) {\n    return texts;\n  }\n\n  // 根据 x 坐标给 text 分组，存放信息到 map 中\n  const xMap = new Map<{ start: number; end: number }, IText[]>();\n  const textInformation = new Map<\n    IText,\n    {\n      y1Initial: number;\n      y1: number;\n      y: number;\n      y2: number;\n      height: number;\n      x1: number;\n      x2: number;\n      x: number;\n      attempts: number;\n    }\n  >();\n\n  const getY1Initial = (text: IText) => textInformation.get(text).y1Initial;\n  const getHeight = (text: IText) => textInformation.get(text).height;\n  const getY1 = (text: IText) => textInformation.get(text).y1;\n  const getY = (text: IText) => textInformation.get(text).y;\n  const getX = (text: IText) => textInformation.get(text).x;\n  const getX1 = (text: IText) => textInformation.get(text).x1;\n  const getX2 = (text: IText) => textInformation.get(text).x2;\n  const getAdjustAttempts = (text: IText) => textInformation.get(text).attempts;\n\n  const setY1 = (text: IText, y: number) => {\n    textInformation.get(text).y1 = y;\n  };\n\n  const setAdjustAttempts = (text: IText, attempts: number) => {\n    textInformation.get(text).attempts = attempts;\n  };\n\n  function adjustPositionInOneGroup(texts: IText[]) {\n    if (texts.length === 1) {\n      return;\n    }\n    // 从最后一个 text 向前遍历，如果与前一个 text 相交，则尝试放到下方（需要判断和前一个 text 是否相交，若相交则不能放到下方）\n    for (let i = texts.length - 1; i > 0; i--) {\n      const curText = texts[i];\n      const upperText = texts[i - 1];\n      const lowerText = texts[i + 1];\n\n      // 当前 text 和上面一个 text 相交\n      if (isIntersect(getY1(upperText) + getHeight(upperText), getY1(curText))) {\n        const { y } = labelling(curText);\n        // 挪动当前 text 后， 和下面一个 text 不相交\n        if (!lowerText || !isIntersect(y + getHeight(curText) / 2, getY1(lowerText))) {\n          if (y + getHeight(curText) / 2 <= maxY) {\n            setY1(curText, getY1(curText) + y - getY(curText));\n          }\n        }\n      }\n    }\n  }\n\n  // 根据 x 坐标进行分组\n  texts.sort((a, b) => a.attribute.x - b.attribute.x);\n  for (const text of texts) {\n    const { y1, y2, x1, x2 } = text.AABBBounds;\n    const { x, y } = text.attribute;\n    textInformation.set(text, { y1Initial: y1, y1, y2, y, height: y2 - y1, x1, x2, x, attempts: 0 });\n    let hasRange = false;\n\n    for (const [range, xGroupTexts] of xMap) {\n      const { start, end } = range;\n      // 1. x1,x2 在 start 和 end 范围内\n      if (x1 >= start && x2 <= end) {\n        xGroupTexts.push(text);\n        hasRange = true;\n      }\n      // 2. x 坐标接近，相差在 5px 以内\n      else if (isNumberClose(x, getX(xGroupTexts[0]), undefined, 5)) {\n        // x 坐标相等，也纳入到一个分组中，并且要扩大分组 range\n        const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };\n        xGroupTexts.push(text);\n        xMap.set(newRange, xGroupTexts);\n        xMap.delete(range);\n        hasRange = true;\n      }\n      // 3. 与区间相交范围 > 50%\n      else if (getIntersectionLength([start, end], [x1, x2]) / (end - start) > 0.5) {\n        const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };\n        xGroupTexts.push(text);\n        xMap.set(newRange, xGroupTexts);\n        xMap.delete(range);\n        hasRange = true;\n      }\n\n      if (hasRange) {\n        break;\n      }\n    }\n\n    if (!hasRange) {\n      xMap.set({ start: x1, end: x2 }, [text]);\n    }\n  }\n\n  // 对每个 x 坐标的 text 数组进行排序\n  for (const xTexts of xMap.values()) {\n    // 从上到下排序\n    xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b));\n    adjustPositionInOneGroup(xTexts);\n  }\n\n  // 整体调整一次 Y 坐标，进行散开\n  if (globalShiftY.enable !== false) {\n    const {\n      maxIterations = 10,\n      maxError = 0.1,\n      padding = 1,\n      maxAttempts = 1000,\n      deltaYTolerance = Number.MAX_VALUE\n    } = globalShiftY;\n    for (let iter = 0; iter < maxIterations; iter++) {\n      texts.sort((a, b) => getY1(a) - getY1(b));\n      let error = 0;\n      for (let i = 0; i < n - 1; i++) {\n        const curText = texts[i];\n        if (getAdjustAttempts(curText) >= maxAttempts) {\n          continue;\n        }\n        let j = i + 1;\n        let nextText;\n        while (\n          (nextText = texts[j]) &&\n          !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])\n        ) {\n          j += 1;\n        }\n        if (nextText) {\n          const y1 = getY1(curText);\n          const h0 = getHeight(curText);\n          const nextY1 = getY1(nextText);\n          const delta = nextY1 - (y1 + h0);\n          if (delta < padding) {\n            const newDelta = (padding - delta) / 2;\n            error = Math.max(error, newDelta);\n            if (y1 + newDelta + getHeight(nextText) > maxY) {\n              const newY1 = y1 - (padding - delta);\n              const curTextDelta = getY1Initial(curText) - newY1;\n              if (Math.abs(curTextDelta) <= deltaYTolerance) {\n                setY1(curText, newY1);\n                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);\n              }\n            } else if (y1 - newDelta < 0) {\n              const newY1 = nextY1 + (padding - delta);\n              const nextTextDelta = getY1Initial(nextText) - newY1;\n              if (Math.abs(nextTextDelta) <= deltaYTolerance) {\n                setY1(nextText, newY1);\n                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);\n              }\n            } else {\n              const newCurY1 = y1 - newDelta;\n              const curTextDelta = getY1Initial(curText) - newCurY1;\n              const newNextY1 = nextY1 + newDelta;\n              const nextTextDelta = getY1Initial(nextText) - newNextY1;\n              if (Math.abs(curTextDelta) <= deltaYTolerance && Math.abs(nextTextDelta) <= deltaYTolerance) {\n                setY1(curText, newCurY1);\n                setY1(nextText, newNextY1);\n                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);\n                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);\n              }\n            }\n          }\n        }\n      }\n      if (error < maxError) {\n        break;\n      }\n    }\n  }\n\n  for (const text of texts) {\n    const finalY = text.attribute.y + getY1(text) - getY1Initial(text);\n    text.setAttribute('y', finalY);\n  }\n\n  const result = [];\n  // 调整文字顺序，越靠前的越优先占据空间\n  // texts 按照 x 进行排序，然后左右交替，保证首尾标签优先展示\n  texts.sort((a, b) => a.attribute.x - b.attribute.x);\n  let start = 0;\n  let end = texts.length - 1;\n\n  while (start <= end) {\n    if (start === end) {\n      result.push(texts[start]);\n    } else {\n      result.push(texts[start]);\n      result.push(texts[end]);\n    }\n    start++;\n    end--;\n  }\n  return result;\n}\n"]}

package/es/legend/color/type.d.ts

@@ -1,5 +1,5 @@
-import { SliderAttributes } from '../../slider/type';
-import { LegendBaseAttributes } from '../type';
+import type { SliderAttributes } from '../../slider/type';
+import type { LegendBaseAttributes } from '../type';
 export type ColorLegendAttributes = {
     colors: string[];
 } & Omit<SliderAttributes, 'step' | 'range'> & LegendBaseAttributes;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/legend/color/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import { SliderAttributes } from '../../slider/type';\nimport { LegendBaseAttributes } from '../type';\nexport type ColorLegendAttributes = {\n  /**\n   * 图例的颜色\n   */\n  colors: string[];\n} & Omit<SliderAttributes, 'step' | 'range'> &\n  LegendBaseAttributes;\n"]}
+{"version":3,"sources":["../src/legend/color/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { SliderAttributes } from '../../slider/type';\nimport type { LegendBaseAttributes } from '../type';\nexport type ColorLegendAttributes = {\n  /**\n   * 图例的颜色\n   */\n  colors: string[];\n} & Omit<SliderAttributes, 'step' | 'range'> &\n  LegendBaseAttributes;\n"]}

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

@@ -1,3 +1,4 @@
+import type { IGroup } from '@visactor/vrender-core';
 import { LegendBase } from '../base';
 import type { DiscreteLegendAttrs, LegendItemDatum } from './type';
 import type { ComponentOptions } from '../../interface';
@@ -12,6 +13,8 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _pagerComponent;
     private _lastActiveItem;
     private _itemContext;
+    private _scrollMask;
+    private _scrollMaskContext;
     static defaultAttributes: Partial<DiscreteLegendAttrs>;
     constructor(attributes: DiscreteLegendAttrs, options?: ComponentOptions);
     render(): void;
@@ -29,6 +32,7 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
         currentPage: number;
         totalPage: number;
         isScrollbar: boolean;
+        clipContainer: IGroup;
     };
     protected _renderContent(): void;
     protected _bindEvents(): void;
@@ -37,10 +41,13 @@ export declare class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     private _createPager;
     private _createScrollbar;
     private _updatePositionOfPager;
+    private _computeScrollbarDelta;
     private _updatePositionOfScrollbar;
     private _bindEventsOfPager;
     private _renderPager;
     private _renderScrollbar;
+    private renderScrollMask;
+    private updateScrollMask;
     private _renderPagerComponent;
     private _onHover;
     private _onUnHover;

package/es/legend/discrete/discrete.js

@@ -8,7 +8,7 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle } from "@visactor/vutils";
+import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle, isNumberClose, clamp, isObject } from "@visactor/vutils";
 
 import { graphicCreator } from "@visactor/vrender-core";
 
@@ -153,7 +153,8 @@ export class DiscreteLegend extends LegendBase {
             items: legendItems,
             isHorizontal: isHorizontal,
             totalPage: 1 / 0,
-            isScrollbar: pager && "scrollbar" === pager.type
+            isScrollbar: pager && "scrollbar" === pager.type,
+            clipContainer: void 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
         this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), 
@@ -164,8 +165,15 @@ export class DiscreteLegend extends LegendBase {
         if (this.attribute.disableTriggerEvent) return;
         if (!this._itemsContainer) return;
         const {hover: hover = !0, select: select = !0} = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), 
-        select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
+        if (hover) {
+            let trigger = "pointermove", triggerOff = "pointerleave";
+            isObject(hover) && (hover.trigger && (trigger = hover.trigger), hover.triggerOff && (triggerOff = hover.triggerOff)), 
+            this._itemsContainer.addEventListener(trigger, this._onHover), this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
+        }
+        if (select) {
+            let trigger = "pointerdown";
+            isObject(select) && select.trigger && (trigger = select.trigger), this._itemsContainer.addEventListener(trigger, this._onClick);
+        }
     }
     _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
         var _a, _b;
@@ -307,12 +315,12 @@ export class DiscreteLegend extends LegendBase {
             direction: "horizontal",
             disableTriggerEvent: disableTriggerEvent,
             range: [ 0, .5 ],
-            height: 12
+            height: !1 === compStyle.visible ? 0 : 12
         }, compStyle), {
             width: compSize
         })) : new ScrollBar(Object.assign(Object.assign({
             direction: "vertical",
-            width: 12,
+            width: !1 === compStyle.visible ? 0 : 12,
             range: [ 0, .5 ]
         }, compStyle), {
             height: compSize,
@@ -337,9 +345,15 @@ export class DiscreteLegend extends LegendBase {
             });
         }
     }
+    _computeScrollbarDelta() {
+        const {isHorizontal: isHorizontal, clipContainer: clipContainer} = this._itemContext, itemContainerBounds = this._itemsContainer.AABBBounds, clipContainerBounds = clipContainer.AABBBounds;
+        let delta, innerViewSize;
+        return isHorizontal ? (innerViewSize = clipContainerBounds.width(), delta = innerViewSize / itemContainerBounds.width()) : (innerViewSize = clipContainerBounds.height(), 
+        delta = innerViewSize / itemContainerBounds.height()), delta;
+    }
     _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
-        const {currentPage: currentPage, totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext;
-        this._pagerComponent.setScrollRange([ (currentPage - 1) / totalPage, currentPage / totalPage ]), 
+        const {isHorizontal: isHorizontal, currentPage: currentPage, totalPage: totalPage} = this._itemContext, start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([ start, start + this._computeScrollbarDelta() ]), 
         isHorizontal ? this._pagerComponent.setAttributes({
             x: 0,
             y: renderStartY + contentHeight
@@ -352,20 +366,32 @@ export class DiscreteLegend extends LegendBase {
         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;
-            return 0 === value[0] ? newPage = 1 : 1 === value[1] ? newPage = this._itemContext.totalPage : (newPage = value[0] * this._itemContext.totalPage, 
-            pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1), newPage;
+            return newPage = 0 === value[0] ? 1 : 1 === value[1] ? this._itemContext.totalPage : value[0] * this._itemContext.totalPage + 1, 
+            newPage;
         } : e => e.detail.current, onScroll = e => {
             const scrollComponent = this._pagerComponent, preScrollRange = scrollComponent.getScrollRange(), {direction: direction} = scrollComponent.attribute, {width: width, height: height} = scrollComponent.getSliderRenderBounds(), currentScrollValue = "vertical" === direction ? e.deltaY / height : e.deltaX / width;
-            scrollComponent.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0);
+            scrollComponent.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0), 
+            this.updateScrollMask();
         }, 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 ]);
+                    if (this._itemContext.totalPage = newTotalPage, this._itemContext.isScrollbar && this._pagerComponent) {
+                        const newDelta = this._computeScrollbarDelta(), [start] = this._pagerComponent.getScrollRange();
+                        this._pagerComponent.setScrollRange([ start, start + newDelta ]);
+                    }
                 }
-                animation ? this._itemsContainer.animate().to({
+                if (this._itemContext.isScrollbar) {
+                    const [start] = this._pagerComponent.getScrollRange();
+                    let containerSize;
+                    containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
+                    const startOffset = containerSize * start;
+                    this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
+                        [channel]: -startOffset
+                    }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
+                } else animation ? this._itemsContainer.animate().to({
                     [channel]: -(newPage - 1) * pageSize
                 }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
@@ -421,18 +447,20 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, 
+        this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
         !0;
     }
     _renderScrollbar() {
+        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, 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, maxHeight = this._contentMaxHeight;
-        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;
+        let comp, contentWidth = 0, contentHeight = 0, startY = 0, pages = 1;
+        if (isHorizontal) contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, contentWidth), 
+        this._pagerComponent = comp, this._innerView.add(comp); else {
+            if (contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, 
+            comp = this._createScrollbar(compStyle, contentHeight), this._pagerComponent = comp, 
+            this._innerView.add(comp), contentHeight <= 0) return this._innerView.removeChild(comp), 
+            !1;
             const items = itemsContainer.getChildren(), itemsHeightArr = items.map((item => item.attribute.height));
             if (1 === itemsHeightArr.length || itemsHeightArr.every((entry => entry === itemsHeightArr[0]))) {
                 const itemHeight = itemsHeightArr[0], maxContentHeight = contentHeight, pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
@@ -443,9 +471,15 @@ export class DiscreteLegend extends LegendBase {
                 prePages !== pages && index === itemsContainer.getChildren().length - 1 && startY - contentHeight >= 1 / 3 * height && (contentHeight = preStartY + height, 
                 pages -= 1);
             }));
-            this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+            this._itemContext.totalPage = pages, this._itemContext.pages = pages;
+        }
+        if (defaultCurrent > 1) if (isHorizontal) {
+            const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
+            itemsContainer.setAttribute("x", -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
+        } else {
+            const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
+            itemsContainer.setAttribute("y", -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
         }
-        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,
@@ -454,9 +488,57 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, 
+        this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY), (null === (_a = pager.scrollMask) || void 0 === _a ? void 0 : _a.visible) && this.renderScrollMask(clipGroup), 
+        this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
         !0;
     }
+    renderScrollMask(clipGroup) {
+        const {scrollMask: scrollMask = {}} = this.attribute.pager, {visible: visible = !0, gradientLength: gradientLength = 16, gradientStops: gradientStops} = scrollMask;
+        if (!visible || !gradientStops) return;
+        const width = clipGroup.AABBBounds.width(), height = clipGroup.AABBBounds.height(), totalLength = this._itemContext.isHorizontal ? width : height, startStops = gradientStops.map((stop => ({
+            offset: gradientLength * stop.offset / totalLength,
+            color: stop.color
+        }))), endStops = gradientStops.map((stop => ({
+            offset: (totalLength - gradientLength * stop.offset) / totalLength,
+            color: stop.color
+        }))), mask = graphicCreator.rect({
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+        });
+        this._scrollMask = mask, this._scrollMaskContext = {
+            startStops: startStops,
+            endStops: endStops
+        }, this.updateScrollMask(), clipGroup.add(mask);
+    }
+    updateScrollMask() {
+        if (!this._scrollMask || !this._pagerComponent) return;
+        if (!this._itemContext.isScrollbar) return;
+        const [start, end] = this._pagerComponent.getScrollRange(), stops = [];
+        isNumberClose(clamp(end, 0, 1), 1) || stops.push(...this._scrollMaskContext.endStops), 
+        isNumberClose(clamp(start, 0, 1), 0) || stops.push(...this._scrollMaskContext.startStops), 
+        stops.length && (this._itemContext.isHorizontal ? this._scrollMask.setAttributes({
+            fill: {
+                gradient: "linear",
+                x0: 0,
+                y0: 0,
+                x1: 1,
+                y1: 0,
+                stops: stops
+            }
+        }) : this._scrollMask.setAttributes({
+            fill: {
+                gradient: "linear",
+                x0: 0,
+                y0: 0,
+                x1: 0,
+                y1: 1,
+                stops: stops
+            }
+        }));
+    }
     _renderPagerComponent() {
         return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), 
         !0;