From c3f3c2e5892173dc55249f6db31d1372bd0d51ca Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Mon, 11 Nov 2024 17:14:43 +0800 Subject: [PATCH] fix: fix the issue of the legend scrollbar being clipped when positioned left or right --- .../fix-legend-scroll-layout_2024-11-11-09-14.json | 10 ++++++++++ packages/vrender-components/src/legend/base.ts | 12 ++++++------ .../src/legend/discrete/discrete.ts | 13 +++++++++---- 3 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 common/changes/@visactor/vrender-components/fix-legend-scroll-layout_2024-11-11-09-14.json 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 new file mode 100644 index 000000000..5b34c4e2c --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/packages/vrender-components/src/legend/base.ts b/packages/vrender-components/src/legend/base.ts index e9c3cd1b2..6cbab934b 100644 --- a/packages/vrender-components/src/legend/base.ts +++ b/packages/vrender-components/src/legend/base.ts @@ -15,24 +15,24 @@ export abstract class LegendBase 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 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 index 540577849..50cce4f40 100644 --- 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 { 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 { maxCol = 1, maxRow = 2, maxWidth, - maxHeight, defaultSelected, lazyload, autoPage @@ -228,6 +228,7 @@ export class DiscreteLegend extends LegendBase { 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 { } 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 { 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 { 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 { 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;