Merge pull request #1542 from VisActor/fix/legend-scroll-layout

fix: fix the issue of the legend scrollbar being clipped when positio…
VisActor · Nov 12, 2024 · 19e384b · 19e384b
2 parents f13302c + c3f3c2e
commit 19e384b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/common/changes/@visactor/vrender-components/fix-legend-scroll-layout_2024-11-11-09-14.json b/common/changes/@visactor/vrender-components/fix-legend-scroll-layout_2024-11-11-09-14.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: fix the issue of the legend scrollbar being clipped when positioned left or right",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}
diff --git a/packages/vrender-components/src/legend/base.ts b/packages/vrender-components/src/legend/base.ts
@@ -15,24 +15,24 @@ export abstract class LegendBase<T extends LegendBaseAttributes> extends Abstrac
   name = 'legend';
   protected _innerView!: IGroup;
   protected _title: Tag | null = null;
+  protected _parsedPadding: number[];
 
   render() {
     this.removeAllChild(true);
 
     const { interactive = true, title, padding = 0 } = this.attribute;
-    const parsedPadding = normalizePadding(padding);
+    this._parsedPadding = normalizePadding(padding);
 
     // 创建一个内部的 container 用于存储所有的元素
     const innerView = graphicCreator.group({
-      x: parsedPadding[3],
-      y: parsedPadding[0],
+      x: this._parsedPadding[3],
+      y: this._parsedPadding[0],
       pickable: interactive,
       childrenPickable: interactive
     });
     innerView.name = LEGEND_ELEMENT_NAME.innerView;
     this.add(innerView);
     this._innerView = innerView;
-
     if (title?.visible) {
       // 渲染标题
       this._renderTitle(title);
@@ -47,8 +47,8 @@ export abstract class LegendBase<T extends LegendBaseAttributes> extends Abstrac
     }
 
     const viewBounds = this._innerView.AABBBounds;
-    this.attribute.width = viewBounds.width() + parsedPadding[1] + parsedPadding[3];
-    this.attribute.height = viewBounds.height() + parsedPadding[0] + parsedPadding[2];
+    this.attribute.width = viewBounds.width() + this._parsedPadding[1] + this._parsedPadding[3];
+    this.attribute.height = viewBounds.height() + this._parsedPadding[0] + this._parsedPadding[2];
   }
   /**
    * 图例主体内容渲染

diff --git a/packages/vrender-components/src/legend/discrete/discrete.ts b/packages/vrender-components/src/legend/discrete/discrete.ts
@@ -74,6 +74,7 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
   private _itemHeightByUser: number | undefined = undefined;
   private _itemHeight = 0; // 存储每一个图例项的高度
   private _itemMaxWidth = 0; // 存储图例项的最大的宽度
+  private _contentMaxHeight = 0; // 存储图例的最大的宽度 （去除 padding）
   private _pagerComponent: Pager | ScrollBar;
   private _lastActiveItem: IGroup;
   private _itemContext: {
@@ -218,7 +219,6 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
       maxCol = 1,
       maxRow = 2,
       maxWidth,
-      maxHeight,
       defaultSelected,
       lazyload,
       autoPage
@@ -228,6 +228,7 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
     const itemsContainer = this._itemsContainer;
     const { items: legendItems, isHorizontal, startIndex, isScrollbar } = this._itemContext;
     const maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+    const maxHeight = this._contentMaxHeight;
 
     let { doWrap, maxWidthInCol, startX, startY, pages } = this._itemContext;
     let item: LegendItemDatum;
@@ -339,7 +340,7 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
   }
 
   protected _renderContent() {
-    const { item = {}, items, reversed, maxWidth } = this.attribute as DiscreteLegendAttrs;
+    const { item = {}, items, reversed, maxWidth, maxHeight } = this.attribute as DiscreteLegendAttrs;
     if (item.visible === false || isEmpty(items)) {
       return;
     }
@@ -349,6 +350,8 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
       legendItems = items?.reverse();
     }
 
+    this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
+
     const itemsContainer = graphicCreator.group({
       x: 0,
       y: 0
@@ -880,11 +883,12 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
 
   private _renderPager() {
     const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-    const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
+    const { maxWidth, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
     const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
     const itemsContainer = this._itemsContainer as IGroup;
     const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1, ...compStyle } = pager;
     const { isHorizontal } = this._itemContext;
+    const maxHeight = this._contentMaxHeight;
 
     let comp: ScrollBar | Pager;
     let compWidth = 0;
@@ -1006,11 +1010,12 @@ export class DiscreteLegend extends LegendBase<DiscreteLegendAttrs> {
 
   private _renderScrollbar() {
     const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-    const { maxWidth, maxHeight, item = {}, pager = {} } = this.attribute;
+    const { maxWidth, item = {}, pager = {} } = this.attribute;
     const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
     const itemsContainer = this._itemsContainer as IGroup;
     const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1, ...compStyle } = pager;
     const { isHorizontal } = this._itemContext;
+    const maxHeight = this._contentMaxHeight;
 
     let comp: ScrollBar | Pager;
     let compSize = 0;