Skip to content

fix(module:splitter): ensure panels sum to 100% after resize #9429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
keke521jie wants to merge 1 commit into
base: master
Choose a base branch
from
+21 −11
Open

fix(module:splitter): ensure panels sum to 100% after resize #9429

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 21 additions & 11 deletions components/splitter/splitter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,8 @@ export class NzSplitterComponent {
let emptyCount = 0;
const containerSize = this.containerSize();
const innerSizes = this.innerSizes();
/**
* Get the calculated size, min and max percentage of each panel
*/

// Get the calculated size, min and max percentage of each panel
const sizes = this.panelProps().map((panel, index) => {
const size = panel.size ?? innerSizes[index];

Expand All @@ -200,7 +199,16 @@ export class NzSplitterComponent {
} else if (size || size === 0) {
const num = Number(size);
if (!isNaN(num)) {
percentage = num / containerSize;
if (
typeof innerSizes[index] === 'number' &&
innerSizes[index] >= 0 &&
innerSizes[index] <= 1 &&
panel.size === undefined
) {
percentage = innerSizes[index];
} else {
percentage = num / containerSize;
}
}
} else {
percentage = undefined;
Expand Down Expand Up @@ -429,8 +437,8 @@ export class NzSplitterComponent {
*/
private updateOffset(index: number, offset: number): void {
const containerSize = this.containerSize();
const limitSizes = this.sizes().map(p => [p.min, p.max]);
const pxSizes = this.sizes().map(p => p.percentage * containerSize);
const sizes = this.sizes();
const pxSizes = sizes.map(p => p.percentage * containerSize);

const getLimitSize = (size: string | number | undefined, defaultLimit: number): number => {
if (typeof size === 'string') {
Expand Down Expand Up @@ -463,10 +471,10 @@ export class NzSplitterComponent {
const nextIndex = mergedIndex + 1;

// Get boundary
const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], containerSize);
const endMaxSize = getLimitSize(limitSizes[nextIndex][1], containerSize);
const startMinSize = getLimitSize(sizes[mergedIndex].min, 0);
const endMinSize = getLimitSize(sizes[nextIndex].min, 0);
const startMaxSize = getLimitSize(sizes[mergedIndex].max, containerSize);
const endMaxSize = getLimitSize(sizes[nextIndex].max, containerSize);

let mergedOffset = offset;

Expand All @@ -487,7 +495,9 @@ export class NzSplitterComponent {
// Do offset
pxSizes[mergedIndex] += mergedOffset;
pxSizes[nextIndex] -= mergedOffset;
this.innerSizes.set(pxSizes);

const percentageSizes = pxSizes.map(size => size / containerSize);

@Laffery Laffery Sep 26, 2025

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个改动是出于什么？按照当前设计，innerSizes 是保存实际像素大小的

  /**
   * Derived from defaultSize of each panel.
   * After that it will be updated by the resize event with **real** size in pixels.
   */

@keke521jie keke521jie Sep 30, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

现在的实现在拖动调整大小后手动缩小放大屏幕会出现
image
这种情况。innerSizes的像素值没有计算对导致sizes百分比计算错误
image
所以改成了百分比计算

this.innerSizes.set(percentageSizes);
this.nzResize.emit(pxSizes);
}

Expand Down