pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-11-10 10:17:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Correctly handle overflows caused by scrollbar for the opposite axis

Browse Source
This commit is contained in:
Nathan Sobo 2017-03-21 10:24:27 -06:00 committed by Antonio Scandurra
parent 0999d0bf02
commit e6e5420f42
2 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
spec/text-editor-component-spec.js
View File

@ -163,6 +163,31 @@ describe('TextEditorComponent', () => {
expect(getVerticalScrollbarWidth(component)).toBe(0)
expect(getHorizontalScrollbarHeight(component)).toBe(0)
expect(component.refs.scrollbarCorner).toBeUndefined()
editor.setText(SAMPLE_TEXT)
await component.getNextUpdatePromise()
// Does not show scrollbars if the content perfectly fits
element.style.width = component.getGutterContainerWidth() + component.getContentWidth() + 'px'
element.style.height = component.getContentHeight() + 'px'
await component.getNextUpdatePromise()
expect(getVerticalScrollbarWidth(component)).toBe(0)
expect(getHorizontalScrollbarHeight(component)).toBe(0)
// Shows scrollbars if the only reason we overflow is the presence of the
// scrollbar for the opposite axis.
element.style.width = component.getGutterContainerWidth() + component.getContentWidth() - 1 + 'px'
element.style.height = component.getContentHeight() + component.getHorizontalScrollbarHeight() - 1 + 'px'
await component.getNextUpdatePromise()
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(0)
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(0)
element.style.width = component.getGutterContainerWidth() + component.getContentWidth() + component.getVerticalScrollbarWidth() - 1 + 'px'
element.style.height = component.getContentHeight() - 1 + 'px'
await component.getNextUpdatePromise()
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(0)
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(0)
})
it('updates the bottom/right of dummy scrollbars and client height/width measurements when scrollbar styles change', async () => {

22
src/text-editor-component.js
View File

@ -1581,7 +1581,10 @@ class TextEditorComponent {
isVerticalScrollbarVisible () {
return (
this.getContentHeight() > this.getScrollContainerHeight() ||
this.isContentMinimallyOverlappingBothScrollbars()
(
this.getContentWidth() > this.getScrollContainerWidth() &&
this.getContentHeight() > (this.getScrollContainerHeight() - this.getHorizontalScrollbarHeight())
)
)
}
@ -1590,23 +1593,14 @@ class TextEditorComponent {
!this.props.model.isSoftWrapped() &&
(
this.getContentWidth() > this.getScrollContainerWidth() ||
this.isContentMinimallyOverlappingBothScrollbars()
(
this.getContentHeight() > this.getScrollContainerHeight() &&
this.getContentWidth() > (this.getScrollContainerWidth() - this.getVerticalScrollbarWidth())
)
)
)
}
isContentMinimallyOverlappingBothScrollbars () {
const clientHeightWithHorizontalScrollbar =
this.getScrollContainerHeight() - this.getHorizontalScrollbarHeight()
const clientWidthWithVerticalScrollbar =
this.getScrollContainerWidth() - this.getVerticalScrollbarWidth()
return (
this.getContentHeight() > clientHeightWithHorizontalScrollbar &&
this.getContentWidth() > clientWidthWithVerticalScrollbar
)
}
getScrollHeight () {
if (this.props.model.getScrollPastEnd()) {
return this.getContentHeight() + Math.max(