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

Fix editor incorrect width and height calculations #10504

Merged
merged 3 commits into from
Sep 8, 2023
Merged

Fix editor incorrect width and height calculations #10504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed1f2ee
Fix editor incorrect width and height
budnix Sep 7, 2023
ba92cda
Add changelog entry file
budnix Sep 7, 2023
0206ced
Update tests
budnix Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changelogs/10504.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"issuesOrigin": "private",
"title": "Fixed editor incorrect width and height calculations.",
"type": "fixed",
"issueOrPR": 10504,
"breaking": false,
"framework": "none"
}
36 changes: 18 additions & 18 deletions handsontable/src/editors/baseEditor/__tests__/API.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe('BaseEditor API', () => {
width: 51,
maxWidth: 51,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 162,
}));
});

Expand All @@ -120,7 +120,7 @@ describe('BaseEditor API', () => {
width: 51,
maxWidth: 50,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: document.documentElement.clientHeight - 23,
}));
});
});
Expand Down Expand Up @@ -190,9 +190,9 @@ describe('BaseEditor API', () => {
start: 49,
top: 23,
width: 51,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: 236,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 162,
}));
});

Expand All @@ -212,9 +212,9 @@ describe('BaseEditor API', () => {
start: document.documentElement.scrollLeft + 49, // 49 - the width of the first cell
top: document.documentElement.offsetHeight - document.documentElement.clientHeight + 23,
width: 51,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: document.documentElement.clientWidth - 49,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: document.documentElement.clientHeight - 23,
}));
});
});
Expand Down Expand Up @@ -281,7 +281,7 @@ describe('BaseEditor API', () => {
start: 49,
top: 161,
width: 51,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: 236,
height: 24,
maxHeight: 24,
}));
Expand All @@ -302,7 +302,7 @@ describe('BaseEditor API', () => {
start: document.documentElement.scrollLeft + 49, // 49 - the width of the first cell
top: document.documentElement.offsetHeight - 24, // 24 - the height of the last cell
width: 51,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: document.documentElement.clientWidth - 49,
height: 24,
maxHeight: 24,
}));
Expand All @@ -329,7 +329,7 @@ describe('BaseEditor API', () => {
width: 50,
maxWidth: 285,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 47,
}));
});

Expand All @@ -350,7 +350,7 @@ describe('BaseEditor API', () => {
width: 50,
maxWidth: document.documentElement.clientWidth,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 62,
}));
});
});
Expand All @@ -374,9 +374,9 @@ describe('BaseEditor API', () => {
start: 0,
top: 138,
width: 50,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: 285,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 47,
}));
});

Expand All @@ -396,9 +396,9 @@ describe('BaseEditor API', () => {
start: document.documentElement.scrollLeft,
top: document.documentElement.offsetHeight - 47,
width: 50,
// maxWidth: ?, // returns wrong value! it will be fixed within #9206
maxWidth: document.documentElement.clientWidth,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 62,
}));
});
});
Expand All @@ -422,7 +422,7 @@ describe('BaseEditor API', () => {
width: 50, // 48px (the default cell width closest to the left side of the table) - 8px (padding)
maxWidth: 285,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 47,
}));
});

Expand All @@ -442,7 +442,7 @@ describe('BaseEditor API', () => {
width: 50,
maxWidth: document.documentElement.clientWidth,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 62,
}));
});
});
Expand All @@ -467,7 +467,7 @@ describe('BaseEditor API', () => {
width: 51,
maxWidth: 51,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 24,
}));
});

Expand Down Expand Up @@ -497,7 +497,7 @@ describe('BaseEditor API', () => {
width: 51,
maxWidth: 51,
height: 24,
// maxHeight: ?, // returns wrong value! it will be fixed within #9206
maxHeight: 39, // returns wrong value! it will be fixed within #9206
}));
});
});
Expand Down
29 changes: 21 additions & 8 deletions handsontable/src/editors/baseEditor/baseEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,24 +531,37 @@ export class BaseEditor {
const horizontalScrollPosition = Math.abs(wtOverlays.inlineStartOverlay.getScrollPosition());
const verticalScrollPosition = wtOverlays.topOverlay.getScrollPosition();
const scrollbarWidth = getScrollbarWidth(this.hot.rootDocument);
const cellTopOffset = TD.offsetTop + firstRowOffset - verticalScrollPosition;
let cellStartOffset = 0;
let cellTopOffset = TD.offsetTop;

if (this.hot.isRtl()) {
const cellOffset = TD.offsetLeft;
if (['inline_start', 'master'].includes(overlayName)) {
cellTopOffset += firstRowOffset - verticalScrollPosition;
}

if (['bottom', 'bottom_inline_start_corner'].includes(overlayName)) {
const {
wtViewport: bottomWtViewport,
wtTable: bottomWtTable,
} = wtOverlays.bottomOverlay.clone;

cellTopOffset += bottomWtViewport.getWorkspaceHeight() - bottomWtTable.getHeight() - scrollbarWidth;
}

if (cellOffset >= 0) {
let cellStartOffset = TD.offsetLeft;

if (this.hot.isRtl()) {
if (cellStartOffset >= 0) {
cellStartOffset = overlayTable.getWidth() - TD.offsetLeft;
} else {
// The `offsetLeft` returns negative values when the parent offset element has position relative
// (it happens when on the cell the selection is applied - the `area` CSS class).
// When it happens the `offsetLeft` value is calculated from the right edge of the parent element.
cellStartOffset = Math.abs(cellOffset);
cellStartOffset = Math.abs(cellStartOffset);
}

cellStartOffset += firstColumnOffset - horizontalScrollPosition - cellWidth;
} else {
cellStartOffset = TD.offsetLeft + firstColumnOffset - horizontalScrollPosition;

} else if (['top', 'master', 'bottom'].includes(overlayName)) {
cellStartOffset += firstColumnOffset - horizontalScrollPosition;
}

const cellComputedStyle = getComputedStyle(this.TD, this.hot.rootWindow);
Expand Down