booru: prevent GOAWAY on sidebar resize

This commit is contained in:
end-4
2025-05-05 15:31:49 +02:00
parent a6098a007a
commit db0f077c3b
@@ -22,7 +22,7 @@ Rectangle {
property string downloadPath property string downloadPath
property string nsfwPath property string nsfwPath
property real availableWidth: parent.width ?? 0 property real availableWidth: parent.width
property real rowTooShortThreshold: 185 property real rowTooShortThreshold: 185
property real imageSpacing: 5 property real imageSpacing: 5
property real responsePadding: 5 property real responsePadding: 5
@@ -31,6 +31,26 @@ Rectangle {
anchors.right: parent?.right anchors.right: parent?.right
implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2 implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2
Component.onCompleted: {
// Break property bind to prevent aggressive updates
availableWidth = parent.width
}
Connections {
target: parent
function onWidthChanged() {
updateWidthTimer.restart()
}
}
Timer {
id: updateWidthTimer
interval: 100
onTriggered: {
availableWidth = parent.width
}
}
radius: Appearance.rounding.normal radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1 color: Appearance.colors.colLayer1
@@ -159,45 +179,47 @@ Rectangle {
} }
Repeater { Repeater {
model: { model: ScriptModel {
// Group two images every row, ensuring they are of the same height values: {
// If the height ends up being too small, put one image in the row and continue // Group two images every row, ensuring they are of the same height
// In other words, this is similar to Android's gallery layout at largest zoom level // If the height ends up being too small, put one image in the row and continue
let i = 0; // In other words, this is similar to Android's gallery layout at largest zoom level
let rows = []; let i = 0;
const responseList = root.responseData.images; let rows = [];
while (i < responseList.length) { const responseList = root.responseData.images;
let row = { while (i < responseList.length) {
height: 0, let row = {
images: [], height: 0,
}; images: [],
const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2) };
if (i + 1 < responseList.length) { const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2)
const img1 = responseList[i]; if (i + 1 < responseList.length) {
const img2 = responseList[i + 1]; const img1 = responseList[i];
// Calculate combined height if both are in the same row const img2 = responseList[i + 1];
// Let h = row height, w1 = h * aspect1, w2 = h * aspect2 // Calculate combined height if both are in the same row
// w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2) // Let h = row height, w1 = h * aspect1, w2 = h * aspect2
const combinedAspect = img1.aspect_ratio + img2.aspect_ratio; // w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2)
const rowHeight = availableImageWidth / combinedAspect; const combinedAspect = img1.aspect_ratio + img2.aspect_ratio;
if (rowHeight >= rowTooShortThreshold) { const rowHeight = availableImageWidth / combinedAspect;
row.height = rowHeight; if (rowHeight >= rowTooShortThreshold) {
row.images.push(img1); row.height = rowHeight;
row.images.push(img2); row.images.push(img1);
rows.push(row); row.images.push(img2);
i += 2; rows.push(row);
continue; i += 2;
continue;
}
} }
// Otherwise, put only one image in the row
const rowHeight = (availableWidth - (responsePadding * 2)) / responseList[i].aspect_ratio;
rows.push({
height: rowHeight,
images: [responseList[i]],
});
i += 1;
} }
// Otherwise, put only one image in the row return rows;
const rowHeight = (availableWidth - (responsePadding * 2)) / responseList[i].aspect_ratio;
rows.push({
height: rowHeight,
images: [responseList[i]],
});
i += 1;
} }
return rows;
} }
delegate: RowLayout { delegate: RowLayout {
id: imageRow id: imageRow