Skip to content

Commit

Permalink
scrollWindow: fix view scrolling
Browse files Browse the repository at this point in the history 
 * make scrollWindow height fix
 * special case data.horizontal.page_size == 0
 * improve computation of rowHeight
 * don't resize dynamically dimensions based on dom changes

Fixes #9770

Signed-off-by: Méven Car <[email protected]>
Change-Id: I54990645d17e1e352397f1d57b4cc671af6b5839
  • Loading branch information
@meven
meven committed Aug 21, 2024
1 parent 5a9de31 commit 2f28839
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 36 deletions.
17 changes: 15 additions & 2 deletions browser/css/jsdialogs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,12 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
grid-gap: 4px;
width: fit-content;
}
#SpecialCharactersDialog .jsdialog.ui-scrollwindow.has-ui-drawing-area {
height: 279px;
}
#SpecialCharactersDialog .jsdialog.ui-scrollwindow.has-ui-drawing-area #showcharset.ui-drawing-area-container {
height: 279px;
}

/* Find and replace dialog */
#search_grid, #replace_grid {
Expand Down Expand Up @@ -2035,6 +2041,11 @@ input[type='number']:hover::-webkit-outer-spin-button {
flex-direction: column;
}

#FormulaDialog #ParameterPage > #paramgrid .ui-scrollwindow {
width: 400px;
max-height: 200px;
}

#FormulaDialog > [id^='dialog-vbox'] > [id^='box'] > [id^='box'] {
grid-auto-columns: max-content;
grid-column-gap: 8px;
Expand Down Expand Up @@ -2204,10 +2215,12 @@ kbd,
margin: 0;
}

#DocumentPropertiesDialog #customprops .jsdialog.ui-scrollwindow {
max-height: min-content;
#DocumentPropertiesDialog #customprops #CustomInfoPage > .jsdialog.ui-scrollwindow:not(.formulabar) {
height: 540px;
max-height: none;
}

#ServerAuditDialog #ServerAuditDialog-mainbox {
min-width: calc(min(800px, 80vw));
}

69 changes: 35 additions & 34 deletions browser/src/control/jsdialog/Widget.ScrolledWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ function _scrolledWindowControl(parentContainer, data, builder) {
scrollwindow.id = data.id;

// drawing areas inside scrollwindows should be not cropped so we add special class
if (_hasDrawingAreaInside(data.children))
let drawingArea = _hasDrawingAreaInside(data.children);
if (drawingArea)
L.DomUtil.addClass(scrollwindow, 'has-ui-drawing-area');

var content = L.DomUtil.create('div', builder.options.cssClass + ' ui-scrollwindow-content', scrollwindow);
Expand All @@ -70,7 +71,7 @@ function _scrolledWindowControl(parentContainer, data, builder) {
if (data.vertical.policy === 'always')
scrollwindow.style.overflowY = 'scroll';

var noHorizontal = data.horizontal.policy === 'never';
var noHorizontal = data.horizontal.policy === 'never' || data.horizontal.page_size == 0;
if (noHorizontal)
scrollwindow.style.overflowX = 'hidden';
if (data.horizontal.policy === 'always')
Expand Down Expand Up @@ -100,67 +101,67 @@ function _scrolledWindowControl(parentContainer, data, builder) {
setTimeout(updateSize, 100);
return;
}

if (!noVertical && data.vertical.upper > 0) {
if (rowHeight == 0) {
// determine the height a row
rowHeight = content.clientHeight / Math.min(data.vertical.upper, data.vertical.page_size);
// the content height might not include a new row being added, take it into account with the -1
if (!Number.isInteger(rowHeight)) {
rowHeight = content.clientHeight / (Math.min(data.vertical.upper, data.vertical.page_size) - 1);
let height = drawingArea ? scrollwindow.scrollHeight : realContentHeight;
if (data.vertical.upper >= data.vertical.page_size) {
rowHeight = height / data.vertical.page_size;
} else {
rowHeight = height / data.vertical.upper;
}
}
var viewHeight = data.vertical.page_size * rowHeight;
var totalContentHeight = (data.vertical.upper -1) * rowHeight;
var totalContentHeight = data.vertical.upper * rowHeight;
let marginTop = data.vertical.value * rowHeight;

if (totalContentHeight != scrollwindow.scrollHeight) {
// only if view has changed
var marginTop = data.vertical.value * rowHeight;

content.style.marginBlockStart = marginTop + 'px';
content.style.height = (totalContentHeight - marginTop) + 'px';
scrollwindow.style.height = viewHeight + 'px';
scrollwindow.scrollTop = marginTop;
content.style.marginBlockEnd = (totalContentHeight - marginTop - realContentHeight) + 'px';
}
scrollwindow.scrollTop = marginTop;
}
if (!noHorizontal) {
content.style.width = (realContentWidth + horizontalSteps) + 'px';
scrollwindow.style.width = (realContentWidth + margin) + 'px';
content.scrollLeft = data.horizontal.value * 10;
content.style.marginInlineEnd = margin + 'px';
content.style.marginInlineStart = content.scrollLeft + 'px';
}

content.scrollLeft = data.horizontal.value * 10;
content.style.marginInlineEnd = margin + 'px';
content.style.marginInlineStart = content.scrollLeft + 'px';
};

if (data.user_managed_scrolling !== false) {
setTimeout(updateSize, 0);

var resizeObserver = new ResizeObserver(function () {
updateSize();
});
resizeObserver.observe(content);
}

var lastScrollV = null;
var lastScrollH = null;
var sendTimer = null;
if ((!noVertical && verticalSteps) || (!noHorizontal && horizontalSteps)) {

scrollwindow.addEventListener('scroll', function() {
if (data.user_managed_scrolling !== false) {
var viewHeight = data.vertical.page_size * rowHeight;
var totalContentHeight = Math.max((data.vertical.upper - 1) * rowHeight, viewHeight);
var marginTop = Math.round(scrollwindow.scrollTop / rowHeight) * rowHeight;

content.style.marginBlockStart = marginTop + 'px';
content.style.height = (totalContentHeight - marginTop) + 'px';
content.style.width = (realContentWidth - scrollwindow.scrollLeft + horizontalSteps) + 'px';
content.style.marginInlineStart = scrollwindow.scrollLeft + 'px';
}

if (sendTimer)
clearTimeout(sendTimer);
sendTimer = setTimeout(function () {

if (data.user_managed_scrolling !== false) {

if (!noVertical) {
let newScrollV = Math.round(scrollwindow.scrollTop / rowHeight);
let totalContentHeight = scrollwindow.scrollHeight;
let offset = newScrollV * rowHeight;
let marginTop = offset;
content.style.marginBlockStart = marginTop + 'px';
content.style.marginBlockEnd = (totalContentHeight - marginTop - scrollwindow.clientHeight) + 'px';
}
if (!noHorizontal) {
realContentWidth = scrollwindow.scrollWidth;
content.style.width = (realContentWidth - scrollwindow.scrollLeft + horizontalSteps) + 'px';
content.style.marginInlineStart = scrollwindow.scrollLeft + 'px';
}
}

var newScrollV = Math.round(scrollwindow.scrollTop / rowHeight);
if (lastScrollV !== newScrollV) {
lastScrollV = newScrollV;
Expand Down

0 comments on commit 2f28839

Please sign in to comment.