@visactor/vrender-components 0.18.5 → 0.18.6

package/es/axis/overlap/auto-limit.js

@@ -1,15 +1,40 @@
 import { isEmpty, isNil, isValidNumber } from "@visactor/vutils";
 
+import { borderPoint } from "./util";
+
 export function autoLimit(labels, config) {
-    const {limitLength: limitLength, verticalLimitLength: verticalLimitLength, ellipsis: ellipsis = "...", orient: orient} = config;
+    const {limitLength: limitLength, verticalLimitLength: verticalLimitLength, ellipsis: ellipsis = "...", orient: orient, axisLength: axisLength} = config;
     !isEmpty(labels) && isValidNumber(limitLength) && labels.forEach((label => {
         var _a;
-        const angle = label.attribute.angle, isRotated = !isNil(angle) && 0 !== angle;
-        if (("top" === orient || "bottom" === orient) && (isRotated && Math.floor(label.AABBBounds.height()) <= limitLength || !isRotated && Math.floor(label.AABBBounds.width()) <= verticalLimitLength)) return;
+        const angle = label.attribute.angle, hasAngle = !isNil(angle), isHorizontal = !hasAngle || 0 === angle || angle === Math.PI, isVertical = hasAngle && (angle === Math.PI / 2 || angle === 2 * Math.PI / 3), isX = "top" === orient || "bottom" === orient;
+        if (isX) {
+            if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
+            if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+        }
         const direction = label.attribute.direction;
-        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
+        if (!isX) {
+            if ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+            if ("vertical" !== direction) {
+                if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
+                if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+            }
+        }
         let limitLabelLength = null;
-        limitLabelLength = isRotated ? Math.abs(limitLength / Math.sin(angle)) : "top" === orient || "bottom" === orient || "vertical" === direction ? verticalLimitLength : limitLength, 
+        if (isHorizontal || isVertical) limitLabelLength = isX || "vertical" === direction ? verticalLimitLength : limitLength; else {
+            const {x1: x, y1: y} = label.AABBBounds, intersection = borderPoint({
+                width: isX ? axisLength : limitLength,
+                height: isX ? limitLength : axisLength,
+                left: 0,
+                top: 0
+            }, {
+                x: x,
+                y: y
+            }, label.attribute.angle);
+            if (intersection) {
+                const {x: _x, y: _y} = intersection;
+                limitLabelLength = Math.floor(Math.sqrt((_x - x) ** 2 + (_y - y) ** 2));
+            } else limitLabelLength = Math.abs(limitLength / Math.sin(angle));
+        }
         isValidNumber(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), 
         label.setAttributes({
             maxLineWidth: limitLabelLength,

package/es/axis/overlap/auto-limit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/overlap/auto-limit.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjE,MAAM,UAAU,SAAS,CAAC,MAAe,EAAE,MAAmB;IAC5D,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAE9E,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAClD,OAAO;KACR;IAED,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QACpC,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;QAE/C,IACE,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,QAAQ,CAAC;YACzC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,IAAI,WAAW,CAAC;gBAClE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,mBAAmB,CAAC,CAAC,EAC9E;YACA,OAAO;SACR;QACD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QAC5C,IACE,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,OAAO,CAAC;YACzC,CAAC,CAAC,SAAS,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,IAAI,mBAAmB,CAAC;gBACzF,CAAC,SAAS,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,EACpF;YACA,OAAO;SACR;QAGD,IAAI,gBAAgB,GAAG,IAAI,CAAC;QAE5B,IAAI,SAAS,EAAE;YACb,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5D;aAAM,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,QAAQ,EAAE;YAClD,gBAAgB,GAAG,mBAAmB,CAAC;SACxC;aAAM;YACL,gBAAgB,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC;SACjF;QAED,IAAI,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE;YAC/C,gBAAgB,GAAG,aAAa,CAAC,gBAAgB,CAAC;gBAChD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,gBAAgB,CAAC;gBAC1D,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;SAClC;QACD,KAAK,CAAC,aAAa,CAAC;YAClB,YAAY,EAAE,gBAAgB;YAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,SAAS,CAAC,QAAQ,mCAAI,QAAQ;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC","file":"auto-limit.js","sourcesContent":["/**\n * 自动省略\n */\nimport type { IText } from '@visactor/vrender-core';\nimport { isEmpty, isNil, isValidNumber } from '@visactor/vutils';\n\ntype LimitConfig = {\n  orient: string;\n  limitLength: number;\n  verticalLimitLength?: number;\n  ellipsis?: string;\n};\n\nexport function autoLimit(labels: IText[], config: LimitConfig) {\n  const { limitLength, verticalLimitLength, ellipsis = '...', orient } = config;\n\n  if (isEmpty(labels) || !isValidNumber(limitLength)) {\n    return;\n  }\n\n  labels.forEach(label => {\n    const angle = label.attribute.angle;\n    const isRotated = !isNil(angle) && angle !== 0;\n\n    if (\n      (orient === 'top' || orient === 'bottom') &&\n      ((isRotated && Math.floor(label.AABBBounds.height()) <= limitLength) ||\n        (!isRotated && Math.floor(label.AABBBounds.width()) <= verticalLimitLength))\n    ) {\n      return;\n    }\n    const direction = label.attribute.direction;\n    if (\n      (orient === 'left' || orient === 'right') &&\n      ((direction === 'vertical' && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) ||\n        (direction !== 'vertical' && Math.floor(label.AABBBounds.width()) <= limitLength))\n    ) {\n      return;\n    }\n\n    // 如果水平并且文本未发生旋转，则不配置 maxLineWidth\n    let limitLabelLength = null;\n\n    if (isRotated) {\n      limitLabelLength = Math.abs(limitLength / Math.sin(angle));\n    } else if (orient === 'top' || orient === 'bottom') {\n      limitLabelLength = verticalLimitLength;\n    } else {\n      limitLabelLength = direction === 'vertical' ? verticalLimitLength : limitLength;\n    }\n\n    if (isValidNumber(label.attribute.maxLineWidth)) {\n      limitLabelLength = isValidNumber(limitLabelLength)\n        ? Math.min(label.attribute.maxLineWidth, limitLabelLength)\n        : label.attribute.maxLineWidth;\n    }\n    label.setAttributes({\n      maxLineWidth: limitLabelLength,\n      ellipsis: label.attribute.ellipsis ?? ellipsis\n    });\n  });\n}\n"]}
+{"version":3,"sources":["../src/axis/overlap/auto-limit.ts"],"names":[],"mappings":"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","file":"auto-limit.js","sourcesContent":["/**\n * 自动省略\n */\nimport type { IText } from '@visactor/vrender-core';\nimport { isEmpty, isNil, isValidNumber } from '@visactor/vutils';\nimport { borderPoint } from './util';\n\ntype LimitConfig = {\n  orient: string;\n  limitLength: number;\n  axisLength: number;\n  verticalLimitLength?: number;\n  ellipsis?: string;\n};\n\nexport function autoLimit(labels: IText[], config: LimitConfig) {\n  const { limitLength, verticalLimitLength, ellipsis = '...', orient, axisLength } = config;\n  if (isEmpty(labels) || !isValidNumber(limitLength)) {\n    return;\n  }\n\n  labels.forEach(label => {\n    const angle = label.attribute.angle;\n\n    const hasAngle = !isNil(angle);\n    const isHorizontal = !hasAngle || angle === 0 || angle === Math.PI;\n    const isVertical = hasAngle && (angle === Math.PI / 2 || angle === (Math.PI * 2) / 3);\n    const isX = orient === 'top' || orient === 'bottom';\n\n    if (isX) {\n      if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {\n        return;\n      }\n      if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) {\n        return;\n      }\n    }\n\n    const direction = label.attribute.direction;\n    if (!isX) {\n      if (direction === 'vertical' && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {\n        return;\n      }\n\n      if (direction !== 'vertical') {\n        if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) {\n          return;\n        }\n        if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {\n          return;\n        }\n      }\n    }\n\n    // 如果水平并且文本未发生旋转，则不配置 maxLineWidth\n    let limitLabelLength = null;\n\n    if (!isHorizontal && !isVertical) {\n      const { x1: x, y1: y } = label.AABBBounds;\n\n      const width = isX ? axisLength : limitLength;\n      const height = isX ? limitLength : axisLength;\n\n      const intersection = borderPoint({ width, height, left: 0, top: 0 }, { x, y }, label.attribute.angle);\n      if (intersection) {\n        const { x: _x, y: _y } = intersection;\n        limitLabelLength = Math.floor(Math.sqrt((_x - x) ** 2 + (_y - y) ** 2));\n      } else {\n        limitLabelLength = Math.abs(limitLength / Math.sin(angle));\n      }\n    } else if (isX) {\n      limitLabelLength = verticalLimitLength;\n    } else {\n      limitLabelLength = direction === 'vertical' ? verticalLimitLength : limitLength;\n    }\n\n    if (isValidNumber(label.attribute.maxLineWidth)) {\n      limitLabelLength = isValidNumber(limitLabelLength)\n        ? Math.min(label.attribute.maxLineWidth, limitLabelLength)\n        : label.attribute.maxLineWidth;\n    }\n    label.setAttributes({\n      maxLineWidth: limitLabelLength,\n      ellipsis: label.attribute.ellipsis ?? ellipsis\n    });\n  });\n}\n"]}

package/es/axis/overlap/util.d.ts

@@ -1,3 +1,15 @@
 import type { IText } from '@visactor/vrender-core';
 export declare function genRotateBounds(items: IText[]): void;
 export declare function itemIntersect(item1: IText, item2: IText): boolean;
+export declare function borderPoint(rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, pt: {
+    x: number;
+    y: number;
+}, angle: number): {
+    x: number;
+    y: number;
+};

package/es/axis/overlap/util.js

@@ -32,4 +32,41 @@ export function genRotateBounds(items) {
 export function itemIntersect(item1, item2) {
     return isRectIntersect(item1.AABBBounds, item2.AABBBounds, !1) && (!item1.rotatedBounds || !item2.rotatedBounds || isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, !0));
 }
+
+export function borderPoint(rect, pt, angle) {
+    if (pt.x < rect.left) return null;
+    if (pt.x > rect.left + rect.width) return null;
+    if (pt.y < rect.top) return null;
+    if (pt.y > rect.top + rect.height) return null;
+    const dx = Math.cos(angle), dy = Math.sin(angle);
+    if (dx < 1e-16) {
+        const y = (rect.left - pt.x) * dy / dx + pt.y;
+        if (y >= rect.top && y <= rect.top + rect.height) return {
+            x: rect.left,
+            y: y
+        };
+    }
+    if (dx > 1e-16) {
+        const y = (rect.left + rect.width - pt.x) * dy / dx + pt.y;
+        if (y >= rect.top && y <= rect.top + rect.height) return {
+            x: rect.left + rect.width,
+            y: y
+        };
+    }
+    if (dy < 1e-16) {
+        const x = (rect.top - pt.y) * dx / dy + pt.x;
+        if (x >= rect.left && x <= rect.left + rect.width) return {
+            x: x,
+            y: rect.top
+        };
+    }
+    if (dy > 1e-16) {
+        const x = (rect.top + rect.height - pt.y) * dx / dy + pt.x;
+        if (x >= rect.left && x <= rect.left + rect.width) return {
+            x: x,
+            y: rect.top + rect.height
+        };
+    }
+    return null;
+}
 //# sourceMappingURL=util.js.map

package/es/axis/overlap/util.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/overlap/util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,SAAS,MAAM,CAAC,CAAS,EAAE,CAAS,EAAE,GAAW,EAAE,OAAe,EAAE,OAAe;IACjF,OAAO;QACL,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO;QAC1E,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO;KAC3E,CAAC;AACJ,CAAC;AAGD,SAAS,eAAe,CAAC,IAAW;IAClC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;IAE/B,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACzB,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACzB,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK;KAC5B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAAc;IAC5C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YAC/C,OAAO;SACR;QAED,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QAErC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC/G,MAAM,MAAM,GAAG,aAAa,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,aAAa,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;QAChD,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC;QACpB,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC;QACzB,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;IAC9B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAY,EAAE,KAAY;IACtD,OAAO,CACL,eAAe,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC;QAC1D,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa;YACzC,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,IAAI,CAAC;YACvE,CAAC,CAAC,IAAI,CAAC,CACV,CAAC;AACJ,CAAC","file":"util.js","sourcesContent":["import type { IText } from '@visactor/vrender-core';\nimport { isRectIntersect, isRotateAABBIntersect } from '@visactor/vutils';\n\nfunction rotate(x: number, y: number, deg: number, originX: number, originY: number) {\n  return {\n    x: (x - originX) * Math.cos(deg) + (y - originY) * Math.sin(deg) + originX,\n    y: (x - originX) * Math.sin(deg) + (originY - y) * Math.cos(deg) + originY\n  };\n}\n\n// 计算水平情况下的包围盒\nfunction genNormalBounds(item: IText) {\n  const bounds = item.AABBBounds;\n\n  return {\n    x1: bounds.x1,\n    x2: bounds.x2,\n    y1: bounds.y1,\n    y2: bounds.y2,\n    centerX: item.attribute.x,\n    centerY: item.attribute.y,\n    angle: item.attribute.angle\n  };\n}\n\nexport function genRotateBounds(items: IText[]) {\n  items.forEach(item => {\n    if (item.rotatedBounds || !item.attribute.angle) {\n      return;\n    }\n    // 计算水平情况下的包围盒\n    const bounds = genNormalBounds(item);\n    // 旋转\n    const rotatedCenter = rotate(bounds.centerX, bounds.centerY, bounds.angle, item.attribute.x, item.attribute.y);\n    const deltaX = rotatedCenter.x - bounds.centerX;\n    const deltaY = rotatedCenter.y - bounds.centerY;\n    bounds.x1 += deltaX;\n    bounds.x2 += deltaX;\n    bounds.y1 += deltaY;\n    bounds.y2 += deltaY;\n    bounds.centerX += deltaX;\n    bounds.centerY += deltaY;\n    item.rotatedBounds = bounds;\n  });\n}\n\nexport function itemIntersect(item1: IText, item2: IText) {\n  return (\n    isRectIntersect(item1.AABBBounds, item2.AABBBounds, false) &&\n    (item1.rotatedBounds && item2.rotatedBounds\n      ? isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, true)\n      : true)\n  );\n}\n"]}
+{"version":3,"sources":["../src/axis/overlap/util.ts"],"names":[],"mappings":"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","file":"util.js","sourcesContent":["import type { IText } from '@visactor/vrender-core';\nimport { isRectIntersect, isRotateAABBIntersect } from '@visactor/vutils';\n\nfunction rotate(x: number, y: number, deg: number, originX: number, originY: number) {\n  return {\n    x: (x - originX) * Math.cos(deg) + (y - originY) * Math.sin(deg) + originX,\n    y: (x - originX) * Math.sin(deg) + (originY - y) * Math.cos(deg) + originY\n  };\n}\n\n// 计算水平情况下的包围盒\nfunction genNormalBounds(item: IText) {\n  const bounds = item.AABBBounds;\n\n  return {\n    x1: bounds.x1,\n    x2: bounds.x2,\n    y1: bounds.y1,\n    y2: bounds.y2,\n    centerX: item.attribute.x,\n    centerY: item.attribute.y,\n    angle: item.attribute.angle\n  };\n}\n\nexport function genRotateBounds(items: IText[]) {\n  items.forEach(item => {\n    if (item.rotatedBounds || !item.attribute.angle) {\n      return;\n    }\n    // 计算水平情况下的包围盒\n    const bounds = genNormalBounds(item);\n    // 旋转\n    const rotatedCenter = rotate(bounds.centerX, bounds.centerY, bounds.angle, item.attribute.x, item.attribute.y);\n    const deltaX = rotatedCenter.x - bounds.centerX;\n    const deltaY = rotatedCenter.y - bounds.centerY;\n    bounds.x1 += deltaX;\n    bounds.x2 += deltaX;\n    bounds.y1 += deltaY;\n    bounds.y2 += deltaY;\n    bounds.centerX += deltaX;\n    bounds.centerY += deltaY;\n    item.rotatedBounds = bounds;\n  });\n}\n\nexport function itemIntersect(item1: IText, item2: IText) {\n  return (\n    isRectIntersect(item1.AABBBounds, item2.AABBBounds, false) &&\n    (item1.rotatedBounds && item2.rotatedBounds\n      ? isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, true)\n      : true)\n  );\n}\n\n// 计算矩形内的点与矩形边的交点\nexport function borderPoint(\n  rect: { left: number; top: number; width: number; height: number },\n  pt: { x: number; y: number },\n  angle: number\n) {\n  // catch cases where point is outside rectangle\n  if (pt.x < rect.left) {\n    return null;\n  }\n  if (pt.x > rect.left + rect.width) {\n    return null;\n  }\n  if (pt.y < rect.top) {\n    return null;\n  }\n  if (pt.y > rect.top + rect.height) {\n    return null;\n  }\n\n  const dx = Math.cos(angle);\n  const dy = Math.sin(angle);\n\n  if (dx < 1.0e-16) {\n    // left border\n    const y = ((rect.left - pt.x) * dy) / dx + pt.y;\n\n    if (y >= rect.top && y <= rect.top + rect.height) {\n      return { x: rect.left, y: y };\n    }\n  }\n\n  if (dx > 1.0e-16) {\n    // right border\n    const y = ((rect.left + rect.width - pt.x) * dy) / dx + pt.y;\n\n    if (y >= rect.top && y <= rect.top + rect.height) {\n      return { x: rect.left + rect.width, y: y };\n    }\n  }\n\n  if (dy < 1.0e-16) {\n    // top border\n    const x = ((rect.top - pt.y) * dx) / dy + pt.x;\n\n    if (x >= rect.left && x <= rect.left + rect.width) {\n      return { x: x, y: rect.top };\n    }\n  }\n\n  if (dy > 1.0e-16) {\n    // bottom border\n    const x = ((rect.top + rect.height - pt.y) * dx) / dy + pt.x;\n    if (x >= rect.left && x <= rect.left + rect.width) {\n      return { x: x, y: rect.top + rect.height };\n    }\n  }\n\n  return null;\n}\n"]}

package/es/axis/util.d.ts

@@ -1,4 +1,5 @@
-import type { ITextGraphicAttribute } from '@visactor/vrender-core';
+import type { IGraphic, IGroup, ITextGraphicAttribute } from '@visactor/vrender-core';
+import type { Dict } from '@visactor/vutils';
 import { type Point } from '@visactor/vutils';
 export declare const clampRadian: (angle?: number) => number;
 export declare function isInRange(a: number, min: number, max: number): boolean;
@@ -6,3 +7,4 @@ export declare function getLabelPosition(tickPosition: Point, tickVector: [numbe
     x: number;
     y: number;
 };
+export declare function getElMap(g: IGroup): Dict<IGraphic<Partial<import("@visactor/vrender-core").IGraphicAttribute>>>;

package/es/axis/util.js

@@ -2,6 +2,8 @@ import { getTextBounds } from "@visactor/vrender-core";
 
 import { isGreater, isLess, tau } from "@visactor/vutils";
 
+import { traverseGroup } from "../util/common";
+
 export const clampRadian = (angle = 0) => {
     if (angle < 0) for (;angle < 0; ) angle += tau; else if (angle > 0) for (;angle > tau; ) angle -= tau;
     return angle;
@@ -25,4 +27,11 @@ export function getLabelPosition(tickPosition, tickVector, text, style) {
         y: baseY - dy
     };
 }
+
+export function getElMap(g) {
+    const elMap = {};
+    return traverseGroup(g, (el => {
+        "group" !== el.type && el.id && (elMap[el.id] = el);
+    })), elMap;
+}
 //# sourceMappingURL=util.js.map

package/es/axis/util.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/util.ts"],"names":[],"mappings":"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","file":"util.js","sourcesContent":["import { getTextBounds } from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport type { ITextGraphicAttribute } from '@visactor/vrender-core';\nimport { isGreater, isLess, tau, type Point } from '@visactor/vutils';\n\n// 和 vutils 版本不同\nexport const clampRadian = (angle: number = 0) => {\n  if (angle < 0) {\n    while (angle < 0) {\n      angle += tau;\n    }\n  } else if (angle > 0) {\n    while (angle > tau) {\n      angle -= tau;\n    }\n  }\n  return angle;\n};\n\n// 判断数值是否在制定范围内，包含误差\nexport function isInRange(a: number, min: number, max: number) {\n  return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);\n}\n\nexport function getLabelPosition(\n  tickPosition: Point,\n  tickVector: [number, number],\n  text: string | number,\n  style: Partial<ITextGraphicAttribute>\n) {\n  const labelBounds = getTextBounds({\n    text,\n    ...style\n  });\n  const width = labelBounds.width();\n  const height = labelBounds.height();\n  const angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI;\n\n  const PI_3_4 = (Math.PI * 3) / 4;\n  const PI_1_4 = Math.PI / 4;\n  const PI_1_2 = Math.PI / 2;\n\n  // x\n  const baseX = tickPosition.x;\n  let dx = 0;\n  if (isInRange(angle, -PI_3_4, -PI_1_4)) {\n    dx = ((angle + PI_3_4) / PI_1_2 - 0.5) * width;\n  } else if (isInRange(angle, PI_1_4, PI_3_4)) {\n    dx = (0.5 - (angle - PI_1_4) / PI_1_2) * width;\n  } else if (Math.cos(angle) >= 0) {\n    dx = width * 0.5;\n  } else {\n    dx = -width * 0.5;\n  }\n  const x = baseX - dx;\n\n  const baseY = tickPosition.y;\n  let dy = 0;\n  if (isInRange(angle, -PI_3_4, -PI_1_4)) {\n    dy = -height * 0.5;\n  } else if (isInRange(angle, PI_1_4, PI_3_4)) {\n    dy = height * 0.5;\n  } else if (Math.cos(angle) >= 0) {\n    dy = (0.5 - (PI_1_4 - angle) / PI_1_2) * height;\n  } else {\n    dy = (0.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;\n  }\n  const y = baseY - dy;\n\n  return { x, y };\n}\n"]}
+{"version":3,"sources":["../src/axis/util.ts"],"names":[],"mappings":"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","file":"util.js","sourcesContent":["import { getTextBounds } from '@visactor/vrender-core';\n// eslint-disable-next-line no-duplicate-imports\nimport type { IGraphic, IGroup, ITextGraphicAttribute } from '@visactor/vrender-core';\nimport type { Dict } from '@visactor/vutils';\nimport { isGreater, isLess, tau, type Point } from '@visactor/vutils';\nimport { traverseGroup } from '../util/common';\n\n// 和 vutils 版本不同\nexport const clampRadian = (angle: number = 0) => {\n  if (angle < 0) {\n    while (angle < 0) {\n      angle += tau;\n    }\n  } else if (angle > 0) {\n    while (angle > tau) {\n      angle -= tau;\n    }\n  }\n  return angle;\n};\n\n// 判断数值是否在制定范围内，包含误差\nexport function isInRange(a: number, min: number, max: number) {\n  return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);\n}\n\nexport function getLabelPosition(\n  tickPosition: Point,\n  tickVector: [number, number],\n  text: string | number,\n  style: Partial<ITextGraphicAttribute>\n) {\n  const labelBounds = getTextBounds({\n    text,\n    ...style\n  });\n  const width = labelBounds.width();\n  const height = labelBounds.height();\n  const angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI;\n\n  const PI_3_4 = (Math.PI * 3) / 4;\n  const PI_1_4 = Math.PI / 4;\n  const PI_1_2 = Math.PI / 2;\n\n  // x\n  const baseX = tickPosition.x;\n  let dx = 0;\n  if (isInRange(angle, -PI_3_4, -PI_1_4)) {\n    dx = ((angle + PI_3_4) / PI_1_2 - 0.5) * width;\n  } else if (isInRange(angle, PI_1_4, PI_3_4)) {\n    dx = (0.5 - (angle - PI_1_4) / PI_1_2) * width;\n  } else if (Math.cos(angle) >= 0) {\n    dx = width * 0.5;\n  } else {\n    dx = -width * 0.5;\n  }\n  const x = baseX - dx;\n\n  const baseY = tickPosition.y;\n  let dy = 0;\n  if (isInRange(angle, -PI_3_4, -PI_1_4)) {\n    dy = -height * 0.5;\n  } else if (isInRange(angle, PI_1_4, PI_3_4)) {\n    dy = height * 0.5;\n  } else if (Math.cos(angle) >= 0) {\n    dy = (0.5 - (PI_1_4 - angle) / PI_1_2) * height;\n  } else {\n    dy = (0.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;\n  }\n  const y = baseY - dy;\n\n  return { x, y };\n}\n\nexport function getElMap(g: IGroup) {\n  const elMap: Dict<IGraphic> = {};\n  traverseGroup(g, (el: IGraphic) => {\n    if ((el as IGraphic).type !== 'group' && el.id) {\n      elMap[el.id] = el;\n    }\n  });\n  return elMap;\n}\n"]}

package/es/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.18.5";
+export declare const version = "0.18.6";
 export * from './core/base';
 export * from './core/type';
 export * from './scrollbar';

package/es/index.js

@@ -1,4 +1,4 @@
-export const version = "0.18.5";
+export const version = "0.18.6";
 
 export * from "./core/base";
 

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.5\";\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) {