Skip to content
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

Jump to bottom

Incorrect height of panel with multiple items in row #848

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Incorrect height of panel with multiple items in row #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c1ee6f1
Refs #26680: Fix height calculation
Jun 10, 2022
92a4420
Refs #26680: Update build files
Jun 10, 2022
fdc5a5d
Merge branch 'master' into 26462-incorrect-height
Jun 16, 2022
e4cce72
update builded files
Jun 16, 2022
4bac42e
remove redundant indents
Jun 16, 2022
4aa1f25
remove redundant indents
Jun 16, 2022
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
48 changes: 36 additions & 12 deletions dist/filepond.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6568,7 +6568,6 @@ const write$5 = ({ root, props, actions, shouldOptimize }) => {
const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;
const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;
const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand Down Expand Up @@ -6612,6 +6611,7 @@ const write$5 = ({ root, props, actions, shouldOptimize }) => {
else {
let prevX = 0;
let prevY = 0;
let rowMaxHeight = 0;

children.forEach((child, index) => {
if (index === dragIndex) {
Expand All @@ -6629,16 +6629,26 @@ const write$5 = ({ root, props, actions, shouldOptimize }) => {
const visualIndex = index + addIndexOffset + dragIndexOffset + removeIndexOffset;

const indexX = visualIndex % itemsPerRow;
const indexY = Math.floor(visualIndex / itemsPerRow);
const itemHeight = child.rect.element.height + itemVerticalMargin;

if (itemHeight > rowMaxHeight) {
rowMaxHeight = itemHeight;
}

const isLastItemInRow = indexX + 1 === itemsPerRow || !children[index + 1];

const offsetX = indexX * itemWidth;
const offsetY = indexY * itemHeight;
const offsetY = prevY;

const vectorX = Math.sign(offsetX - prevX);
const vectorY = Math.sign(offsetY - prevY);

prevX = offsetX;
prevY = offsetY;

if (isLastItemInRow) {
prevY += rowMaxHeight;
rowMaxHeight = 0;
}

if (child.markedForRemoval) return;

Expand Down Expand Up @@ -8305,21 +8315,14 @@ const calculateListHeight = root => {
if (children.length === 0) return { visual, bounds };

const horizontalSpace = itemList.rect.element.width;
const dragIndex = getItemIndexByPosition(itemList, children, scrollList.dragCoordinates);

const childRect = children[0].rect.element;

const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;

const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;

const newItem = typeof dragIndex !== 'undefined' && dragIndex >= 0 ? 1 : 0;
const removedItem = children.find(child => child.markedForRemoval && child.opacity < 0.45)
? -1
: 0;
const verticalItemCount = children.length + newItem + removedItem;
const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand All @@ -8332,7 +8335,28 @@ const calculateListHeight = root => {
}
// grid
else {
bounds = Math.ceil(verticalItemCount / itemsPerRow) * itemHeight;
let maxItemHeightInRow = 0;
let maxColumnHeight = 0;

children.forEach(function(item, index) {
let height = item.rect.element.height + itemVerticalMargin;
const rowIndex = Math.floor(index / itemsPerRow);
const colIndex = Math.floor(index - rowIndex * itemsPerRow);
const isLastItemInRow = colIndex + 1 === itemsPerRow || !children[index + 1];
if (height > maxItemHeightInRow) {
maxItemHeightInRow = height;
}

if (!isLastItemInRow) {
return;
}

maxColumnHeight += maxItemHeightInRow;

maxItemHeightInRow = 0;
});

bounds = maxColumnHeight;
visual = bounds;
}

Expand Down
2 changes: 1 addition & 1 deletion dist/filepond.esm.min.js
View file
Open in desktop

Large diffs are not rendered by default.

50 changes: 36 additions & 14 deletions dist/filepond.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9178,7 +9178,6 @@
var itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
var itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;
var itemWidth = childRect.width + itemHorizontalMargin;
var itemHeight = childRect.height + itemVerticalMargin;
var itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand Down Expand Up @@ -9222,6 +9221,7 @@
else {
var prevX = 0;
var prevY = 0;
var rowMaxHeight = 0;

children.forEach(function(child, index) {
if (index === dragIndex) {
Expand All @@ -9239,16 +9239,26 @@
var visualIndex = index + addIndexOffset + dragIndexOffset + removeIndexOffset;

var indexX = visualIndex % itemsPerRow;
var indexY = Math.floor(visualIndex / itemsPerRow);
var itemHeight = child.rect.element.height + itemVerticalMargin;

if (itemHeight > rowMaxHeight) {
rowMaxHeight = itemHeight;
}

var isLastItemInRow = indexX + 1 === itemsPerRow || !children[index + 1];

var offsetX = indexX * itemWidth;
var offsetY = indexY * itemHeight;
var offsetY = prevY;

var vectorX = Math.sign(offsetX - prevX);
var vectorY = Math.sign(offsetY - prevY);

prevX = offsetX;
prevY = offsetY;

if (isLastItemInRow) {
prevY += rowMaxHeight;
rowMaxHeight = 0;
}

if (child.markedForRemoval) return;

Expand Down Expand Up @@ -11129,23 +11139,14 @@
if (children.length === 0) return { visual: visual, bounds: bounds };

var horizontalSpace = itemList.rect.element.width;
var dragIndex = getItemIndexByPosition(itemList, children, scrollList.dragCoordinates);

var childRect = children[0].rect.element;

var itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
var itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;

var itemWidth = childRect.width + itemHorizontalMargin;
var itemHeight = childRect.height + itemVerticalMargin;

var newItem = typeof dragIndex !== 'undefined' && dragIndex >= 0 ? 1 : 0;
var removedItem = children.find(function(child) {
return child.markedForRemoval && child.opacity < 0.45;
})
? -1
: 0;
var verticalItemCount = children.length + newItem + removedItem;
var itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand All @@ -11158,7 +11159,28 @@
}
// grid
else {
bounds = Math.ceil(verticalItemCount / itemsPerRow) * itemHeight;
var maxItemHeightInRow = 0;
var maxColumnHeight = 0;

children.forEach(function(item, index) {
var height = item.rect.element.height + itemVerticalMargin;
var rowIndex = Math.floor(index / itemsPerRow);
var colIndex = Math.floor(index - rowIndex * itemsPerRow);
var isLastItemInRow = colIndex + 1 === itemsPerRow || !children[index + 1];
if (height > maxItemHeightInRow) {
maxItemHeightInRow = height;
}

if (!isLastItemInRow) {
return;
}

maxColumnHeight += maxItemHeightInRow;

maxItemHeightInRow = 0;
});

bounds = maxColumnHeight;
visual = bounds;
}

Expand Down
2 changes: 1 addition & 1 deletion dist/filepond.min.js
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 14 additions & 4 deletions src/js/app/view/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,6 @@ const write = ({ root, props, actions, shouldOptimize }) => {
const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;
const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;
const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand Down Expand Up @@ -338,6 +337,7 @@ const write = ({ root, props, actions, shouldOptimize }) => {
else {
let prevX = 0;
let prevY = 0;
let rowMaxHeight = 0;

children.forEach((child, index) => {
if (index === dragIndex) {
Expand All @@ -355,16 +355,26 @@ const write = ({ root, props, actions, shouldOptimize }) => {
const visualIndex = index + addIndexOffset + dragIndexOffset + removeIndexOffset;

const indexX = visualIndex % itemsPerRow;
const indexY = Math.floor(visualIndex / itemsPerRow);
const itemHeight = child.rect.element.height + itemVerticalMargin;

if (itemHeight > rowMaxHeight) {
rowMaxHeight = itemHeight;
}

const isLastItemInRow = indexX + 1 === itemsPerRow || !(children[index + 1]);

const offsetX = indexX * itemWidth;
const offsetY = indexY * itemHeight;
const offsetY = prevY;

const vectorX = Math.sign(offsetX - prevX);
const vectorY = Math.sign(offsetY - prevY);

prevX = offsetX;
prevY = offsetY;

if (isLastItemInRow) {
prevY += rowMaxHeight;
rowMaxHeight = 0;
}

if (child.markedForRemoval) return;

Expand Down
30 changes: 22 additions & 8 deletions src/js/app/view/root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,21 +366,14 @@ const calculateListHeight = root => {
if (children.length === 0) return { visual, bounds };

const horizontalSpace = itemList.rect.element.width;
const dragIndex = getItemIndexByPosition(itemList, children, scrollList.dragCoordinates);

const childRect = children[0].rect.element;

const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;

const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;

const newItem = typeof dragIndex !== 'undefined' && dragIndex >= 0 ? 1 : 0;
const removedItem = children.find(child => child.markedForRemoval && child.opacity < 0.45)
? -1
: 0;
const verticalItemCount = children.length + newItem + removedItem;
const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);

// stack
Expand All @@ -393,7 +386,28 @@ const calculateListHeight = root => {
}
// grid
else {
bounds = Math.ceil(verticalItemCount / itemsPerRow) * itemHeight;
let maxItemHeightInRow = 0;
let maxColumnHeight = 0;

children.forEach(function(item, index) {
let height = item.rect.element.height + itemVerticalMargin;
const rowIndex = Math.floor(index / itemsPerRow);
const colIndex = Math.floor(index - (rowIndex * itemsPerRow));
const isLastItemInRow = colIndex + 1 === itemsPerRow || !(children[index + 1]);
if (height > maxItemHeightInRow) {
maxItemHeightInRow = height;
}

if (!isLastItemInRow) {
return;
}

maxColumnHeight += maxItemHeightInRow;

maxItemHeightInRow = 0;
});

bounds = maxColumnHeight;
visual = bounds;
}

Expand Down