github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-26 15:28:27 -05:00
Code Issues Packages Projects Releases Wiki Activity

Reimplement block decorations without the shadow DOM

Browse Source
This commit is contained in:
Antonio Scandurra
2016-10-06 10:26:09 +02:00
parent 35e45ef472
commit 9c5bddaa69
9 changed files with 637 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -405,49 +405,49 @@ describe('TextEditorComponent', function () {
}
})
it('applies .syntax--leading-whitespace for lines with leading spaces and/or tabs', function () {
it('applies .leading-whitespace for lines with leading spaces and/or tabs', function () {
editor.setText(' a')
runAnimationFrames()
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(false)
editor.setText('\ta')
runAnimationFrames()
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(false)
})
it('applies .syntax--trailing-whitespace for lines with trailing spaces and/or tabs', function () {
it('applies .trailing-whitespace for lines with trailing spaces and/or tabs', function () {
editor.setText(' ')
runAnimationFrames()
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
editor.setText('\t')
runAnimationFrames()
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
editor.setText('a ')
runAnimationFrames()
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
editor.setText('a\t')
runAnimationFrames()
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('syntax--leading-whitespace')).toBe(false)
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
})
it('keeps rebuilding lines when continuous reflow is on', function () {
@@ -501,14 +501,14 @@ describe('TextEditorComponent', function () {
expect(component.lineNodeForScreenRow(0).textContent).toBe('' + invisibles.space + 'a line with tabs' + invisibles.tab + 'and spaces' + invisibles.space + invisibles.eol)
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(leafNodes[0].classList.contains('syntax--invisible-character')).toBe(true)
expect(leafNodes[leafNodes.length - 1].classList.contains('syntax--invisible-character')).toBe(true)
expect(leafNodes[0].classList.contains('invisible-character')).toBe(true)
expect(leafNodes[leafNodes.length - 1].classList.contains('invisible-character')).toBe(true)
})
it('displays newlines as their own token outside of the other tokens\' scopeDescriptor', function () {
editor.setText('let\n')
runAnimationFrames()
expect(component.lineNodeForScreenRow(0).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--storage syntax--type syntax--var syntax--js">let</span><span class="syntax--invisible-character syntax--eol">' + invisibles.eol + '</span></span>')
expect(component.lineNodeForScreenRow(0).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--storage syntax--type syntax--var syntax--js">let</span><span class="invisible-character eol">' + invisibles.eol + '</span></span>')
})
it('displays trailing carriage returns using a visible, non-empty value', function () {
@@ -543,20 +543,20 @@ describe('TextEditorComponent', function () {
normalizeLineEndings: false
})
runAnimationFrames()
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--invisible-character syntax--eol syntax--indent-guide">CE</span></span>')
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="invisible-character eol indent-guide">CE</span></span>')
editor.setTabLength(3)
runAnimationFrames()
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--invisible-character syntax--eol syntax--indent-guide">CE</span></span>')
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="invisible-character eol indent-guide">CE</span></span>')
editor.setTabLength(1)
runAnimationFrames()
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--invisible-character syntax--eol syntax--indent-guide">CE</span></span>')
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="invisible-character eol indent-guide">CE</span></span>')
editor.setTextInBufferRange([[9, 0], [9, Infinity]], ' ')
editor.setTextInBufferRange([[11, 0], [11, Infinity]], ' ')
runAnimationFrames()
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="syntax--invisible-character syntax--eol syntax--indent-guide">CE</span></span>')
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="syntax--source syntax--js"><span class="invisible-character eol indent-guide">CE</span></span>')
})
describe('when soft wrapping is enabled', function () {
@@ -583,30 +583,30 @@ describe('TextEditorComponent', function () {
runAnimationFrames()
})
it('adds an "syntax--indent-guide" class to spans comprising the leading whitespace', function () {
it('adds an "indent-guide" class to spans comprising the leading whitespace', function () {
let line1LeafNodes = getLeafNodes(component.lineNodeForScreenRow(1))
expect(line1LeafNodes[0].textContent).toBe(' ')
expect(line1LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line1LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(false)
expect(line1LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line1LeafNodes[1].classList.contains('indent-guide')).toBe(false)
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
expect(line2LeafNodes[0].textContent).toBe(' ')
expect(line2LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[1].textContent).toBe(' ')
expect(line2LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[2].classList.contains('syntax--indent-guide')).toBe(false)
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(false)
})
it('renders leading whitespace spans with the "syntax--indent-guide" class for empty lines', function () {
it('renders leading whitespace spans with the "indent-guide" class for empty lines', function () {
editor.getBuffer().insert([1, Infinity], '\n')
runAnimationFrames()
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
expect(line2LeafNodes.length).toBe(2)
expect(line2LeafNodes[0].textContent).toBe(' ')
expect(line2LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[1].textContent).toBe(' ')
expect(line2LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
})
it('renders indent guides correctly on lines containing only whitespace', function () {
@@ -616,11 +616,11 @@ describe('TextEditorComponent', function () {
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
expect(line2LeafNodes.length).toBe(3)
expect(line2LeafNodes[0].textContent).toBe(' ')
expect(line2LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[1].textContent).toBe(' ')
expect(line2LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[2].textContent).toBe(' ')
expect(line2LeafNodes[2].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(true)
})
it('renders indent guides correctly on lines containing only whitespace when invisibles are enabled', function () {
@@ -638,11 +638,11 @@ describe('TextEditorComponent', function () {
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
expect(line2LeafNodes.length).toBe(4)
expect(line2LeafNodes[0].textContent).toBe('--')
expect(line2LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[1].textContent).toBe('--')
expect(line2LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[2].textContent).toBe('--')
expect(line2LeafNodes[2].classList.contains('syntax--indent-guide')).toBe(true)
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(true)
expect(line2LeafNodes[3].textContent).toBe('x')
})
@@ -653,9 +653,9 @@ describe('TextEditorComponent', function () {
let line0LeafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
expect(line0LeafNodes[0].textContent).toBe(' ')
expect(line0LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line0LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line0LeafNodes[1].textContent).toBe(' ')
expect(line0LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(false)
expect(line0LeafNodes[1].classList.contains('indent-guide')).toBe(false)
})
it('updates the indent guides on empty lines preceding an indentation change', function () {
@@ -667,9 +667,9 @@ describe('TextEditorComponent', function () {
let line12LeafNodes = getLeafNodes(component.lineNodeForScreenRow(12))
expect(line12LeafNodes[0].textContent).toBe(' ')
expect(line12LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line12LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line12LeafNodes[1].textContent).toBe(' ')
expect(line12LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line12LeafNodes[1].classList.contains('indent-guide')).toBe(true)
})
it('updates the indent guides on empty lines following an indentation change', function () {
@@ -682,9 +682,9 @@ describe('TextEditorComponent', function () {
let line13LeafNodes = getLeafNodes(component.lineNodeForScreenRow(13))
expect(line13LeafNodes[0].textContent).toBe(' ')
expect(line13LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(true)
expect(line13LeafNodes[0].classList.contains('indent-guide')).toBe(true)
expect(line13LeafNodes[1].textContent).toBe(' ')
expect(line13LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(true)
expect(line13LeafNodes[1].classList.contains('indent-guide')).toBe(true)
})
})
@@ -701,11 +701,11 @@ describe('TextEditorComponent', function () {
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
expect(line2LeafNodes.length).toBe(3)
expect(line2LeafNodes[0].textContent).toBe(' ')
expect(line2LeafNodes[0].classList.contains('syntax--indent-guide')).toBe(false)
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(false)
expect(line2LeafNodes[1].textContent).toBe(' ')
expect(line2LeafNodes[1].classList.contains('syntax--indent-guide')).toBe(false)
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(false)
expect(line2LeafNodes[2].textContent).toBe(' ')
expect(line2LeafNodes[2].classList.contains('syntax--indent-guide')).toBe(false)
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(false)
})
})
@@ -720,19 +720,19 @@ describe('TextEditorComponent', function () {
describe('when there is a fold', function () {
it('renders a fold marker on the folded line', function () {
let foldedLineNode = component.lineNodeForScreenRow(4)
expect(foldedLineNode.querySelector('.syntax--fold-marker')).toBeFalsy()
expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
editor.foldBufferRow(4)
runAnimationFrames()
foldedLineNode = component.lineNodeForScreenRow(4)
expect(foldedLineNode.querySelector('.syntax--fold-marker')).toBeTruthy()
expect(foldedLineNode.querySelector('.fold-marker')).toBeTruthy()
editor.unfoldBufferRow(4)
runAnimationFrames()
foldedLineNode = component.lineNodeForScreenRow(4)
expect(foldedLineNode.querySelector('.syntax--fold-marker')).toBeFalsy()
expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
})
})
})
@@ -1284,7 +1284,7 @@ describe('TextEditorComponent', function () {
runAnimationFrames()
let cursorRect = componentNode.querySelector('.cursor').getBoundingClientRect()
let foldMarkerRect = componentNode.querySelector('.syntax--fold-marker').getBoundingClientRect()
let foldMarkerRect = componentNode.querySelector('.fold-marker').getBoundingClientRect()
expect(cursorRect.left).toBeCloseTo(foldMarkerRect.right, 0)
})
@@ -1771,32 +1771,32 @@ describe('TextEditorComponent', function () {
let [item3, blockDecoration3] = createBlockDecorationBeforeScreenRow(4, {className: "decoration-3"})
let [item4, blockDecoration4] = createBlockDecorationBeforeScreenRow(7, {className: "decoration-4"})
let [item5, blockDecoration5] = createBlockDecorationAfterScreenRow(7, {className: "decoration-5"})
let [item6, blockDecoration6] = createBlockDecorationAfterScreenRow(12, {className: "decoration-6"})
atom.styles.addStyleSheet(
`atom-text-editor .decoration-1 { width: 30px; height: 80px; }
atom-text-editor .decoration-2 { width: 30px; height: 40px; }
atom-text-editor .decoration-3 { width: 30px; height: 100px; }
atom-text-editor .decoration-4 { width: 30px; height: 120px; }
atom-text-editor .decoration-5 { width: 30px; height: 42px; }`,
atom-text-editor .decoration-5 { width: 30px; height: 42px; }
atom-text-editor .decoration-6 { width: 30px; height: 22px; }`,
{context: 'atom-text-editor'}
)
runAnimationFrames()
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
expect(verticalScrollbarNode.scrollHeight).toBe(editor.getScreenLineCount() * editor.getLineHeightInPixels() + 80 + 40 + 100 + 120 + 42 + 22)
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 80 + 40 + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBe(item1)
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-6")).toBeNull()
expect(item1.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 0)
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 2 + 80)
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 4 + 80 + 40)
@@ -1804,24 +1804,21 @@ describe('TextEditorComponent', function () {
editor.setCursorScreenPosition([0, 0])
editor.insertNewline()
blockDecoration1.destroy()
runAnimationFrames()
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
expect(verticalScrollbarNode.scrollHeight).toBe(editor.getScreenLineCount() * editor.getLineHeightInPixels() + 40 + 100 + 120 + 42 + 22)
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 40 + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-6")).toBeNull()
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 40)
@@ -1832,52 +1829,71 @@ describe('TextEditorComponent', function () {
runAnimationFrames() // causes the DOM to update and to retrieve new styles
runAnimationFrames() // applies the changes
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
expect(verticalScrollbarNode.scrollHeight).toBe(editor.getScreenLineCount() * editor.getLineHeightInPixels() + 60 + 100 + 120 + 42 + 22)
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 60 + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-6")).toBeNull()
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 60)
item2.style.height = "20px"
wrapperNode.invalidateBlockDecorationDimensions(blockDecoration2)
runAnimationFrames()
runAnimationFrames()
runAnimationFrames() // causes the DOM to update and to retrieve new styles
runAnimationFrames() // applies the changes
expect(component.getDomNode().querySelectorAll(".line").length).toBe(9)
expect(verticalScrollbarNode.scrollHeight).toBe(editor.getScreenLineCount() * editor.getLineHeightInPixels() + 20 + 100 + 120 + 42 + 22)
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 20 + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBe(item4)
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBe(item5)
expect(component.getTopmostDOMNode().querySelector(".decoration-6")).toBeNull()
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 20)
expect(item4.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100)
expect(item5.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100 + 120 + lineHeightInPixels)
item6.style.height = "33px"
wrapperNode.invalidateBlockDecorationDimensions(blockDecoration6)
runAnimationFrames() // causes the DOM to update and to retrieve new styles
runAnimationFrames() // applies the changes
expect(component.getDomNode().querySelectorAll(".line").length).toBe(9)
expect(verticalScrollbarNode.scrollHeight).toBe(editor.getScreenLineCount() * editor.getLineHeightInPixels() + 20 + 100 + 120 + 42 + 33)
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 20 + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBe(item4)
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBe(item5)
expect(component.getTopmostDOMNode().querySelector(".decoration-6")).toBeNull()
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 20)
expect(item4.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100)
expect(item5.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100 + 120 + lineHeightInPixels)
})
it("correctly sets screen rows on <content> elements, both initially and when decorations move", function () {
it("correctly sets screen rows on block decoration and ruler nodes, both initially and when decorations move", function () {
let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
atom.styles.addStyleSheet(
'atom-text-editor .decoration-1 { width: 30px; height: 80px; }',
@@ -1885,42 +1901,37 @@ describe('TextEditorComponent', function () {
)
runAnimationFrames()
let tileNode, contentElements
tileNode = component.tileNodesForLines()[0]
contentElements = tileNode.querySelectorAll("content")
expect(contentElements.length).toBe(1)
expect(contentElements[0].dataset.screenRow).toBe("0")
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
const line0 = component.lineNodeForScreenRow(0)
expect(item.previousSibling.dataset.screenRow).toBe("0")
expect(item.dataset.screenRow).toBe("0")
expect(item.nextSibling.dataset.screenRow).toBe("0")
expect(line0.previousSibling).toBe(item.nextSibling)
editor.setCursorBufferPosition([0, 0])
editor.insertNewline()
runAnimationFrames()
const line1 = component.lineNodeForScreenRow(1)
expect(item.previousSibling.dataset.screenRow).toBe("1")
expect(item.dataset.screenRow).toBe("1")
expect(item.nextSibling.dataset.screenRow).toBe("1")
expect(line1.previousSibling).toBe(item.nextSibling)
tileNode = component.tileNodesForLines()[0]
contentElements = tileNode.querySelectorAll("content")
expect(contentElements.length).toBe(1)
expect(contentElements[0].dataset.screenRow).toBe("1")
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
blockDecoration.getMarker().setHeadBufferPosition([2, 0])
editor.setCursorBufferPosition([0, 0])
editor.insertNewline()
runAnimationFrames()
const line2 = component.lineNodeForScreenRow(2)
expect(item.previousSibling.dataset.screenRow).toBe("2")
expect(item.dataset.screenRow).toBe("2")
expect(item.nextSibling.dataset.screenRow).toBe("2")
expect(line2.previousSibling).toBe(item.nextSibling)
tileNode = component.tileNodesForLines()[0]
contentElements = tileNode.querySelectorAll("content")
expect(contentElements.length).toBe(1)
expect(contentElements[0].dataset.screenRow).toBe("2")
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
blockDecoration.getMarker().setHeadBufferPosition([4, 0])
runAnimationFrames()
const line4 = component.lineNodeForScreenRow(4)
expect(item.previousSibling.dataset.screenRow).toBe("4")
expect(item.dataset.screenRow).toBe("4")
expect(item.nextSibling.dataset.screenRow).toBe("4")
expect(line4.previousSibling).toBe(item.nextSibling)
})
it('measures block decorations taking into account both top and bottom margins of the element and its children', function () {
@@ -1945,6 +1956,18 @@ describe('TextEditorComponent', function () {
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
})
it('allows the same block decoration item to be moved from one tile to another in the same animation frame', function () {
let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(5, {className: "decoration-1"})
runAnimationFrames()
expect(component.tileNodesForLines()[0].querySelector('.decoration-1')).toBeNull()
expect(component.tileNodesForLines()[1].querySelector('.decoration-1')).toBe(item)
blockDecoration.getMarker().setHeadBufferPosition([0, 0])
runAnimationFrames()
expect(component.tileNodesForLines()[0].querySelector('.decoration-1')).toBe(item)
expect(component.tileNodesForLines()[1].querySelector('.decoration-1')).toBeNull()
})
})
describe('highlight decoration rendering', function () {
@@ -2872,20 +2895,20 @@ describe('TextEditorComponent', function () {
editor.foldBufferRange([[4, 6], [4, 10]])
editor.foldBufferRange([[4, 15], [4, 20]])
runAnimationFrames()
debugger
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(2)
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
clickElementAtPosition(foldMarkers[0], [4, 6])
runAnimationFrames()
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(1)
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
clickElementAtPosition(foldMarkers[0], [4, 15])
runAnimationFrames()
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(0)
expect(editor.isFoldedAtBufferRow(4)).toBe(false)
})
@@ -2895,25 +2918,25 @@ describe('TextEditorComponent', function () {
editor.foldBufferRange([[4, 4], [4, 5]])
editor.foldBufferRange([[4, 4], [4, 20]])
runAnimationFrames()
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(1)
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
clickElementAtPosition(foldMarkers[0], [4, 4])
runAnimationFrames()
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(1)
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
clickElementAtPosition(foldMarkers[0], [4, 4])
runAnimationFrames()
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(1)
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
clickElementAtPosition(foldMarkers[0], [4, 10])
runAnimationFrames()
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.syntax--fold-marker')
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
expect(foldMarkers.length).toBe(0)
expect(editor.isFoldedAtBufferRow(4)).toBe(false)
})

527
spec/text-editor-presenter-spec.coffee
View File

@@ -479,7 +479,7 @@ describe "TextEditorPresenter", ->
expect(getState(presenter).horizontalScrollbar.scrollWidth).toBe 10 * maxLineLength + 1
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'meta.method-call.js', 'support.function.js'], 'p', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--meta.syntax--method-call.syntax--js', 'syntax--support.syntax--function.syntax--js'], 'p', 20)
presenter.measurementsChanged()
expect(getState(presenter).horizontalScrollbar.scrollWidth).toBe (10 * (maxLineLength - 2)) + (20 * 2) + 1 # 2 of the characters are 20px wide now instead of 10px wide
@@ -766,7 +766,7 @@ describe "TextEditorPresenter", ->
expect(getState(presenter).hiddenInput.width).toBe 15
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'storage.type.var.js'], 'r', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--storage.syntax--type.syntax--var.syntax--js'], 'r', 20)
presenter.measurementsChanged()
expect(getState(presenter).hiddenInput.width).toBe 20
@@ -922,7 +922,7 @@ describe "TextEditorPresenter", ->
expect(getState(presenter).content.scrollWidth).toBe 10 * maxLineLength + 1
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'meta.method-call.js', 'support.function.js'], 'p', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--meta.syntax--method-call.syntax--js', 'syntax--support.syntax--function.syntax--js'], 'p', 20)
presenter.measurementsChanged()
expect(getState(presenter).content.scrollWidth).toBe (10 * (maxLineLength - 2)) + (20 * 2) + 1 # 2 of the characters are 20px wide now instead of 10px wide
@@ -1274,7 +1274,16 @@ describe "TextEditorPresenter", ->
expect(tagsForCodes(presenter, lineStateForScreenRow(presenter, 0).tagCodes).openTags).toContain('invisible-character eol')
expect(tagsForCodes(presenter, lineStateForScreenRow(presenter, 1).tagCodes).openTags).toContain('invisible-character eol')
describe ".blockDecorations", ->
describe ".{preceding,following}BlockDecorations", ->
stateForBlockDecorations = (blockDecorations) ->
state = {}
for blockDecoration in blockDecorations
state[blockDecoration.id] = {
decoration: blockDecoration,
screenRow: blockDecoration.getMarker().getHeadScreenPosition().row
}
state
it "contains all block decorations that are present before/after a line, both initially and when decorations change", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(0)
presenter = buildPresenter()
@@ -1286,32 +1295,32 @@ describe "TextEditorPresenter", ->
blockDecoration4 = addBlockDecorationAfterScreenRow(7)
runs ->
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual([blockDecoration1])
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual([blockDecoration2])
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual([blockDecoration3])
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual([blockDecoration4])
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration1]))
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration2]))
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration3]))
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration4]))
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual({})
waitsForStateToUpdate presenter, ->
blockDecoration1.getMarker().setHeadBufferPosition([1, 0])
@@ -1320,32 +1329,32 @@ describe "TextEditorPresenter", ->
blockDecoration4.getMarker().setHeadBufferPosition([8, 0])
runs ->
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual([blockDecoration1])
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual([blockDecoration4])
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual([blockDecoration2, blockDecoration3])
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration1]))
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration4]))
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration2, blockDecoration3]))
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual({})
waitsForStateToUpdate presenter, ->
blockDecoration4.destroy()
@@ -1353,71 +1362,85 @@ describe "TextEditorPresenter", ->
blockDecoration1.getMarker().setHeadBufferPosition([0, 0])
runs ->
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual([blockDecoration1])
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual([blockDecoration2])
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration1]))
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration2]))
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual({})
waitsForStateToUpdate presenter, ->
editor.setCursorBufferPosition([0, 0])
editor.insertNewline()
runs ->
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual([blockDecoration1])
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual([blockDecoration2])
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual([])
expect(lineStateForScreenRow(presenter, 0).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 0).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 1).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration1]))
expect(lineStateForScreenRow(presenter, 1).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 2).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 3).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 5).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 6).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 7).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 8).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 9).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 9).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 10).precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration2]))
expect(lineStateForScreenRow(presenter, 10).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 11).followingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).precedingBlockDecorations).toEqual({})
expect(lineStateForScreenRow(presenter, 12).followingBlockDecorations).toEqual({})
it "inserts block decorations before the line if not specified otherwise", ->
it "contains block decorations located in ::mouseWheelScreenRow even if they are off screen", ->
blockDecoration = addBlockDecorationBeforeScreenRow(0)
presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2, stoppedScrollingDelay: 200)
lineId = presenter.displayLayer.getScreenLines(0, 1)[0].id
expect(getState(presenter).content.tiles[0].lines[lineId].precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration]))
presenter.setMouseWheelScreenRow(0)
expectStateUpdate presenter, -> presenter.setScrollTop(4)
expect(getState(presenter).content.tiles[0].lines[lineId].precedingBlockDecorations).toEqual(stateForBlockDecorations([blockDecoration]))
advanceClock(presenter.stoppedScrollingDelay)
expect(getState(presenter).content.tiles[0]).toBeUndefined()
it "inserts block decorations before the line unless otherwise specified", ->
blockDecoration = editor.decorateMarker(editor.markScreenPosition([4, 0]), {type: "block"})
presenter = buildPresenter()
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual [blockDecoration]
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual []
expect(lineStateForScreenRow(presenter, 4).precedingBlockDecorations).toEqual stateForBlockDecorations([blockDecoration])
expect(lineStateForScreenRow(presenter, 4).followingBlockDecorations).toEqual {}
describe ".decorationClasses", ->
it "adds decoration classes to the relevant line state objects, both initially and when decorations change", ->
@@ -1734,12 +1757,12 @@ describe "TextEditorPresenter", ->
presenter = buildPresenter(explicitHeight: 20)
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'storage.type.var.js'], 'v', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--storage.syntax--type.syntax--var.syntax--js'], 'v', 20)
presenter.measurementsChanged()
expect(stateForCursor(presenter, 0)).toEqual {top: 1 * 10, left: (3 * 10) + 20, width: 10, height: 10}
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'storage.type.var.js'], 'r', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--storage.syntax--type.syntax--var.syntax--js'], 'r', 20)
presenter.measurementsChanged()
expect(stateForCursor(presenter, 0)).toEqual {top: 1 * 10, left: (3 * 10) + 20, width: 20, height: 10}
@@ -2085,7 +2108,7 @@ describe "TextEditorPresenter", ->
regions: [{top: 0, left: 4 * 10, width: 2 * 10, height: 10}]
}
expectStateUpdate presenter, ->
presenter.getLinesYardstick().setScopedCharacterWidth(['source.js', 'keyword.control.js'], 'i', 20)
presenter.getLinesYardstick().setScopedCharacterWidth(['syntax--source.syntax--js', 'syntax--keyword.syntax--control.syntax--js'], 'i', 20)
presenter.measurementsChanged()
expectValues stateForSelectionInTile(presenter, 0, 2), {
regions: [{top: 0, left: 4 * 10, width: 20 + 10, height: 10}]
@@ -2208,222 +2231,112 @@ describe "TextEditorPresenter", ->
flashCount: 2
}
describe ".blockDecorations", ->
stateForBlockDecoration = (presenter, decoration) ->
getState(presenter).content.blockDecorations[decoration.id]
describe ".offScreenBlockDecorations", ->
stateForOffScreenBlockDecoration = (presenter, decoration) ->
getState(presenter).content.offScreenBlockDecorations[decoration.id]
it "contains state for measured block decorations that are not visible when they are on ::mouseWheelScreenRow", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(0)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0, stoppedScrollingDelay: 200)
getState(presenter) # flush pending state
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 0)
presenter.setScrollTop(100)
presenter.setMouseWheelScreenRow(0)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 0
isVisible: true
}
advanceClock(presenter.stoppedScrollingDelay)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
it "invalidates block decorations that intersect a change in the buffer", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(9)
blockDecoration2 = addBlockDecorationBeforeScreenRow(10)
blockDecoration3 = addBlockDecorationBeforeScreenRow(11)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 9
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration2), {
decoration: blockDecoration2
screenRow: 10
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration3), {
decoration: blockDecoration3
screenRow: 11
isVisible: false
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration3, 0, 10)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
editor.setSelectedScreenRange([[10, 0], [12, 0]])
editor.delete()
presenter.setScrollTop(0) # deleting the buffer causes the editor to autoscroll
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expectValues stateForBlockDecoration(presenter, blockDecoration2), {
decoration: blockDecoration2
screenRow: 10
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration3), {
decoration: blockDecoration3
screenRow: 10
isVisible: false
}
it "invalidates all block decorations when content frame width, window size or bounding client rect change", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(11)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 11
isVisible: false
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 10)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
presenter.setBoundingClientRect({top: 0, left: 0, width: 50, height: 30})
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 11
isVisible: false
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
presenter.setContentFrameWidth(100)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 11
isVisible: false
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
presenter.setWindowSize(100, 200)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 11
isVisible: false
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
it "contains state for on-screen and unmeasured block decorations, both initially and when they are updated or destroyed", ->
it "contains state for off-screen unmeasured block decorations, both initially and when they are updated or destroyed", ->
item = {}
blockDecoration1 = addBlockDecorationBeforeScreenRow(0, item)
blockDecoration2 = addBlockDecorationBeforeScreenRow(4, item)
blockDecoration3 = addBlockDecorationBeforeScreenRow(4, item)
blockDecoration4 = addBlockDecorationBeforeScreenRow(10, item)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 0
isVisible: true
}
expectValues stateForBlockDecoration(presenter, blockDecoration2), {
decoration: blockDecoration2
screenRow: 4
isVisible: true
}
expectValues stateForBlockDecoration(presenter, blockDecoration3), {
decoration: blockDecoration3
screenRow: 4
isVisible: true
}
expectValues stateForBlockDecoration(presenter, blockDecoration4), {
decoration: blockDecoration4
screenRow: 10
isVisible: false
}
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration4)).toBe(blockDecoration4)
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration4, 0, 20)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 0
isVisible: true
}
expectValues stateForBlockDecoration(presenter, blockDecoration2), {
decoration: blockDecoration2
screenRow: 4
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration3), {
decoration: blockDecoration3
screenRow: 4
isVisible: false
}
expect(stateForBlockDecoration(presenter, blockDecoration4)).toBeUndefined()
blockDecoration3.getMarker().setHeadScreenPosition([5, 0])
presenter.setScrollTop(90)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expectValues stateForBlockDecoration(presenter, blockDecoration2), {
decoration: blockDecoration2
screenRow: 4
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration3), {
decoration: blockDecoration3
screenRow: 5
isVisible: false
}
expectValues stateForBlockDecoration(presenter, blockDecoration4), {
decoration: blockDecoration4
screenRow: 10
isVisible: true
}
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBe(blockDecoration3)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration4)).toBeUndefined()
presenter.invalidateBlockDecorationDimensions(blockDecoration1)
presenter.invalidateBlockDecorationDimensions(blockDecoration4)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration3, 0, 10)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration4)).toBe(blockDecoration4)
expectValues stateForBlockDecoration(presenter, blockDecoration1), {
decoration: blockDecoration1
screenRow: 0
isVisible: false
}
expect(stateForBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
expectValues stateForBlockDecoration(presenter, blockDecoration4), {
decoration: blockDecoration4
screenRow: 10
isVisible: true
}
blockDecoration4.destroy()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration4)).toBeUndefined()
blockDecoration1.destroy()
it "contains state for off-screen block decorations that intersect a buffer change", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(9)
blockDecoration2 = addBlockDecorationBeforeScreenRow(10)
blockDecoration3 = addBlockDecorationBeforeScreenRow(11)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBe(blockDecoration1)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBe(blockDecoration3)
expect(stateForBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
expectValues stateForBlockDecoration(presenter, blockDecoration4), {
decoration: blockDecoration4
screenRow: 10
isVisible: true
}
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration3, 0, 10)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBeUndefined()
editor.setSelectedScreenRange([[10, 0], [12, 0]])
editor.delete()
presenter.setScrollTop(0) # deleting the buffer causes the editor to autoscroll
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration3)).toBe(blockDecoration3)
it "contains state for all off-screen block decorations when content frame width, window size or bounding client rect change", ->
blockDecoration1 = addBlockDecorationBeforeScreenRow(10)
blockDecoration2 = addBlockDecorationBeforeScreenRow(11)
presenter = buildPresenter(explicitHeight: 30, lineHeight: 10, tileSize: 2, scrollTop: 0)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBe(blockDecoration1)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 10)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 10)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
presenter.setBoundingClientRect({top: 0, left: 0, width: 50, height: 30})
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBe(blockDecoration1)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 20)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
presenter.setContentFrameWidth(100)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBe(blockDecoration1)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 20)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
presenter.setWindowSize(100, 200)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBe(blockDecoration1)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBe(blockDecoration2)
presenter.setBlockDecorationDimensions(blockDecoration1, 0, 20)
presenter.setBlockDecorationDimensions(blockDecoration2, 0, 20)
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration1)).toBeUndefined()
expect(stateForOffScreenBlockDecoration(presenter, blockDecoration2)).toBeUndefined()
it "doesn't throw an error when setting the dimensions for a destroyed decoration", ->
blockDecoration = addBlockDecorationBeforeScreenRow(0)
presenter = buildPresenter()
blockDecoration.destroy()
presenter.setBlockDecorationDimensions(blockDecoration, 30, 30)
expect(getState(presenter).content.blockDecorations).toEqual({})
expect(getState(presenter).content.offScreenBlockDecorations).toEqual({})
describe ".overlays", ->
[item] = []

86
src/block-decorations-component.coffee
View File

@@ -1,86 +0,0 @@
cloneObject = (object) ->
clone = {}
clone[key] = value for key, value of object
clone
module.exports =
class BlockDecorationsComponent
constructor: (@container, @views, @presenter, @domElementPool) ->
@newState = null
@oldState = null
@blockDecorationNodesById = {}
@domNode = @domElementPool.buildElement("content")
@domNode.setAttribute("select", ".atom--invisible-block-decoration")
@domNode.style.visibility = "hidden"
getDomNode: ->
@domNode
updateSync: (state) ->
@newState = state.content
@oldState ?= {blockDecorations: {}, width: 0}
if @newState.width isnt @oldState.width
@domNode.style.width = @newState.width + "px"
@oldState.width = @newState.width
for id of @oldState.blockDecorations
unless @newState.blockDecorations.hasOwnProperty(id)
blockDecorationNode = @blockDecorationNodesById[id]
blockDecorationNode.previousSibling.remove()
blockDecorationNode.nextSibling.remove()
blockDecorationNode.remove()
delete @blockDecorationNodesById[id]
delete @oldState.blockDecorations[id]
for id of @newState.blockDecorations
if @oldState.blockDecorations.hasOwnProperty(id)
@updateBlockDecorationNode(id)
else
@oldState.blockDecorations[id] = {}
@createAndAppendBlockDecorationNode(id)
measureBlockDecorations: ->
for decorationId, blockDecorationNode of @blockDecorationNodesById
decoration = @newState.blockDecorations[decorationId].decoration
topRuler = blockDecorationNode.previousSibling
bottomRuler = blockDecorationNode.nextSibling
width = blockDecorationNode.offsetWidth
height = bottomRuler.offsetTop - topRuler.offsetTop
@presenter.setBlockDecorationDimensions(decoration, width, height)
createAndAppendBlockDecorationNode: (id) ->
blockDecorationState = @newState.blockDecorations[id]
blockDecorationClass = "atom--block-decoration-#{id}"
topRuler = document.createElement("div")
blockDecorationNode = @views.getView(blockDecorationState.decoration.getProperties().item)
bottomRuler = document.createElement("div")
topRuler.classList.add(blockDecorationClass)
blockDecorationNode.classList.add(blockDecorationClass)
bottomRuler.classList.add(blockDecorationClass)
@container.appendChild(topRuler)
@container.appendChild(blockDecorationNode)
@container.appendChild(bottomRuler)
@blockDecorationNodesById[id] = blockDecorationNode
@updateBlockDecorationNode(id)
updateBlockDecorationNode: (id) ->
newBlockDecorationState = @newState.blockDecorations[id]
oldBlockDecorationState = @oldState.blockDecorations[id]
blockDecorationNode = @blockDecorationNodesById[id]
if newBlockDecorationState.isVisible
blockDecorationNode.previousSibling.classList.remove("atom--invisible-block-decoration")
blockDecorationNode.classList.remove("atom--invisible-block-decoration")
blockDecorationNode.nextSibling.classList.remove("atom--invisible-block-decoration")
else
blockDecorationNode.previousSibling.classList.add("atom--invisible-block-decoration")
blockDecorationNode.classList.add("atom--invisible-block-decoration")
blockDecorationNode.nextSibling.classList.add("atom--invisible-block-decoration")
if oldBlockDecorationState.screenRow isnt newBlockDecorationState.screenRow
blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
oldBlockDecorationState.screenRow = newBlockDecorationState.screenRow

16
src/lines-component.coffee
View File

@@ -19,7 +19,7 @@ module.exports =
class LinesComponent extends TiledComponent
placeholderTextDiv: null
constructor: ({@presenter, @domElementPool, @assert}) ->
constructor: ({@views, @presenter, @domElementPool, @assert}) ->
@domNode = document.createElement('div')
@domNode.classList.add('lines')
@tilesNode = document.createElement("div")
@@ -57,9 +57,17 @@ class LinesComponent extends TiledComponent
@domNode.appendChild(@placeholderTextDiv)
@oldState.placeholderText = @newState.placeholderText
# Removing and updating block decorations needs to be done in two different
# steps, so that the same decoration node can be moved from one tile to
# another in the same animation frame.
for component in @getComponents()
component.removeDeletedBlockDecorations()
for component in @getComponents()
component.updateBlockDecorations()
@cursorsComponent.updateSync(state)
buildComponentForTile: (id) -> new LinesTileComponent({id, @presenter, @domElementPool, @assert})
buildComponentForTile: (id) -> new LinesTileComponent({id, @presenter, @domElementPool, @assert, @views})
buildEmptyState: ->
{tiles: {}}
@@ -83,6 +91,10 @@ class LinesComponent extends TiledComponent
@presenter.setLineHeight(lineHeightInPixels)
@presenter.setBaseCharacterWidth(defaultCharWidth, doubleWidthCharWidth, halfWidthCharWidth, koreanCharWidth)
measureBlockDecorations: ->
for component in @getComponents()
component.measureBlockDecorations()
lineIdForScreenRow: (screenRow) ->
tile = @presenter.tileForRow(screenRow)
@getComponentForTile(tile)?.lineIdForScreenRow(screenRow)

273
src/lines-tile-component.js
View File

@@ -2,18 +2,17 @@ const HighlightsComponent = require('./highlights-component')
const ZERO_WIDTH_NBSP = '\ufeff'
module.exports = class LinesTileComponent {
constructor ({presenter, id, domElementPool, assert}) {
this.presenter = presenter
constructor ({presenter, id, domElementPool, assert, views}) {
this.id = id
this.presenter = presenter
this.views = views
this.domElementPool = domElementPool
this.assert = assert
this.measuredLines = new Set()
this.lineNodesByLineId = {}
this.screenRowsByLineId = {}
this.lineIdsByScreenRow = {}
this.textNodesByLineId = {}
this.insertionPointsBeforeLineById = {}
this.insertionPointsAfterLineById = {}
this.blockDecorationNodesByLineIdAndDecorationId = {}
this.domNode = this.domElementPool.buildElement('div')
this.domNode.style.position = 'absolute'
this.domNode.style.display = 'block'
@@ -22,6 +21,7 @@ module.exports = class LinesTileComponent {
}
destroy () {
this.removeLineNodes()
this.domElementPool.freeElementAndDescendants(this.domNode)
}
@@ -80,15 +80,29 @@ module.exports = class LinesTileComponent {
}
}
removeLineNode (id) {
this.domElementPool.freeElementAndDescendants(this.lineNodesByLineId[id])
this.removeBlockDecorationInsertionPointBeforeLine(id)
this.removeBlockDecorationInsertionPointAfterLine(id)
delete this.lineNodesByLineId[id]
delete this.textNodesByLineId[id]
delete this.lineIdsByScreenRow[this.screenRowsByLineId[id]]
delete this.screenRowsByLineId[id]
delete this.oldTileState.lines[id]
removeLineNode (lineId) {
this.domElementPool.freeElementAndDescendants(this.lineNodesByLineId[lineId])
for (const decorationId of Object.keys(this.oldTileState.lines[lineId].precedingBlockDecorations)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
}
for (const decorationId of Object.keys(this.oldTileState.lines[lineId].followingBlockDecorations)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
}
delete this.blockDecorationNodesByLineIdAndDecorationId[lineId]
delete this.lineNodesByLineId[lineId]
delete this.textNodesByLineId[lineId]
delete this.lineIdsByScreenRow[this.screenRowsByLineId[lineId]]
delete this.screenRowsByLineId[lineId]
delete this.oldTileState.lines[lineId]
}
updateLineNodes () {
@@ -110,6 +124,10 @@ module.exports = class LinesTileComponent {
this.screenRowsByLineId[id] = lineState.screenRow
this.lineIdsByScreenRow[lineState.screenRow] = id
this.oldTileState.lines[id] = Object.assign({}, lineState)
// Avoid assigning state for block decorations, because we need to
// process it later when updating the DOM.
this.oldTileState.lines[id].precedingBlockDecorations = {}
this.oldTileState.lines[id].followingBlockDecorations = {}
}
}
@@ -123,87 +141,6 @@ module.exports = class LinesTileComponent {
} else {
this.domNode.insertBefore(lineNode, nextNode)
}
this.insertBlockDecorationInsertionPointBeforeLine(id)
this.insertBlockDecorationInsertionPointAfterLine(id)
}
}
removeBlockDecorationInsertionPointBeforeLine (id) {
const insertionPoint = this.insertionPointsBeforeLineById[id]
if (insertionPoint != null) {
this.domElementPool.freeElementAndDescendants(insertionPoint)
delete this.insertionPointsBeforeLineById[id]
}
}
insertBlockDecorationInsertionPointBeforeLine (id) {
const {hasPrecedingBlockDecorations, screenRow} = this.newTileState.lines[id]
if (hasPrecedingBlockDecorations) {
const lineNode = this.lineNodesByLineId[id]
const insertionPoint = this.domElementPool.buildElement('content')
this.domNode.insertBefore(insertionPoint, lineNode)
this.insertionPointsBeforeLineById[id] = insertionPoint
insertionPoint.dataset.screenRow = screenRow
this.updateBlockDecorationInsertionPointBeforeLine(id)
}
}
updateBlockDecorationInsertionPointBeforeLine (id) {
const oldLineState = this.oldTileState.lines[id]
const newLineState = this.newTileState.lines[id]
const insertionPoint = this.insertionPointsBeforeLineById[id]
if (insertionPoint != null) {
if (newLineState.screenRow !== oldLineState.screenRow) {
insertionPoint.dataset.screenRow = newLineState.screenRow
}
const precedingBlockDecorationsSelector = newLineState.precedingBlockDecorations
.map((d) => `.atom--block-decoration-${d.id}`)
.join(',')
if (precedingBlockDecorationsSelector !== oldLineState.precedingBlockDecorationsSelector) {
insertionPoint.setAttribute('select', precedingBlockDecorationsSelector)
oldLineState.precedingBlockDecorationsSelector = precedingBlockDecorationsSelector
}
}
}
removeBlockDecorationInsertionPointAfterLine (id) {
const insertionPoint = this.insertionPointsAfterLineById[id]
if (insertionPoint != null) {
this.domElementPool.freeElementAndDescendants(insertionPoint)
delete this.insertionPointsAfterLineById[id]
}
}
insertBlockDecorationInsertionPointAfterLine (id) {
const {hasFollowingBlockDecorations, screenRow} = this.newTileState.lines[id]
if (hasFollowingBlockDecorations) {
const lineNode = this.lineNodesByLineId[id]
const insertionPoint = this.domElementPool.buildElement('content')
this.domNode.insertBefore(insertionPoint, lineNode.nextSibling)
this.insertionPointsAfterLineById[id] = insertionPoint
insertionPoint.dataset.screenRow = screenRow
this.updateBlockDecorationInsertionPointAfterLine(id)
}
}
updateBlockDecorationInsertionPointAfterLine (id) {
const oldLineState = this.oldTileState.lines[id]
const newLineState = this.newTileState.lines[id]
const insertionPoint = this.insertionPointsAfterLineById[id]
if (insertionPoint != null) {
if (newLineState.screenRow !== oldLineState.screenRow) {
insertionPoint.dataset.screenRow = newLineState.screenRow
}
const followingBlockDecorationsSelector = newLineState.followingBlockDecorations
.map((d) => `.atom--block-decoration-${d.id}`)
.join(',')
if (followingBlockDecorationsSelector !== oldLineState.followingBlockDecorationsSelector) {
insertionPoint.setAttribute('select', followingBlockDecorationsSelector)
oldLineState.followingBlockDecorationsSelector = followingBlockDecorationsSelector
}
}
}
@@ -296,29 +233,143 @@ module.exports = class LinesTileComponent {
oldLineState.decorationClasses = newLineState.decorationClasses
if (!oldLineState.hasPrecedingBlockDecorations && newLineState.hasPrecedingBlockDecorations) {
this.insertBlockDecorationInsertionPointBeforeLine(id)
} else if (oldLineState.hasPrecedingBlockDecorations && !newLineState.hasPrecedingBlockDecorations) {
this.removeBlockDecorationInsertionPointBeforeLine(id)
}
if (!oldLineState.hasFollowingBlockDecorations && newLineState.hasFollowingBlockDecorations) {
this.insertBlockDecorationInsertionPointAfterLine(id)
} else if (oldLineState.hasFollowingBlockDecorations && !newLineState.hasFollowingBlockDecorations) {
this.removeBlockDecorationInsertionPointAfterLine(id)
}
if (newLineState.screenRow !== oldLineState.screenRow) {
lineNode.dataset.screenRow = newLineState.screenRow
this.lineIdsByScreenRow[newLineState.screenRow] = id
this.screenRowsByLineId[id] = newLineState.screenRow
}
this.updateBlockDecorationInsertionPointBeforeLine(id)
this.updateBlockDecorationInsertionPointAfterLine(id)
oldLineState.screenRow = newLineState.screenRow
oldLineState.hasPrecedingBlockDecorations = newLineState.hasPrecedingBlockDecorations
oldLineState.hasFollowingBlockDecorations = newLineState.hasFollowingBlockDecorations
}
removeDeletedBlockDecorations () {
for (const lineId of Object.keys(this.newTileState.lines)) {
const oldLineState = this.oldTileState.lines[lineId]
const newLineState = this.newTileState.lines[lineId]
const lineNode = this.lineNodesByLineId[lineId]
for (const decorationId of Object.keys(oldLineState.precedingBlockDecorations)) {
if (!newLineState.precedingBlockDecorations.hasOwnProperty(decorationId)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
delete this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
delete oldLineState.precedingBlockDecorations[decorationId]
}
}
for (const decorationId of Object.keys(oldLineState.followingBlockDecorations)) {
if (!newLineState.followingBlockDecorations.hasOwnProperty(decorationId)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
delete this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
delete oldLineState.followingBlockDecorations[decorationId]
}
}
}
}
updateBlockDecorations () {
for (const lineId of Object.keys(this.newTileState.lines)) {
const oldLineState = this.oldTileState.lines[lineId]
const newLineState = this.newTileState.lines[lineId]
const lineNode = this.lineNodesByLineId[lineId]
if (!this.blockDecorationNodesByLineIdAndDecorationId.hasOwnProperty(lineId)) {
this.blockDecorationNodesByLineIdAndDecorationId[lineId] = {}
}
for (const decorationId of Object.keys(newLineState.precedingBlockDecorations)) {
const oldBlockDecorationState = oldLineState.precedingBlockDecorations[decorationId]
const newBlockDecorationState = newLineState.precedingBlockDecorations[decorationId]
if (oldBlockDecorationState != null) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
if (oldBlockDecorationState.screenRow !== newBlockDecorationState.screenRow) {
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
topRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(topRulerNode, lineNode)
blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(blockDecorationNode, lineNode)
bottomRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(bottomRulerNode, lineNode)
}
} else {
const topRulerNode = document.createElement('div')
topRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(topRulerNode, lineNode)
const blockDecorationNode = this.views.getView(newBlockDecorationState.decoration.getProperties().item)
blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(blockDecorationNode, lineNode)
const bottomRulerNode = document.createElement('div')
bottomRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(bottomRulerNode, lineNode)
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId] =
{topRulerNode, blockDecorationNode, bottomRulerNode}
}
oldLineState.precedingBlockDecorations[decorationId] = Object.assign({}, newBlockDecorationState)
}
for (const decorationId of Object.keys(newLineState.followingBlockDecorations)) {
const oldBlockDecorationState = oldLineState.followingBlockDecorations[decorationId]
const newBlockDecorationState = newLineState.followingBlockDecorations[decorationId]
if (oldBlockDecorationState != null) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
if (oldBlockDecorationState.screenRow !== newBlockDecorationState.screenRow) {
topRulerNode.remove()
blockDecorationNode.remove()
bottomRulerNode.remove()
bottomRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(bottomRulerNode, lineNode.nextSibling)
blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(blockDecorationNode, lineNode.nextSibling)
topRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(topRulerNode, lineNode.nextSibling)
}
} else {
const bottomRulerNode = document.createElement('div')
bottomRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(bottomRulerNode, lineNode.nextSibling)
const blockDecorationNode = this.views.getView(newBlockDecorationState.decoration.getProperties().item)
blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(blockDecorationNode, lineNode.nextSibling)
const topRulerNode = document.createElement('div')
topRulerNode.dataset.screenRow = newBlockDecorationState.screenRow
this.domNode.insertBefore(topRulerNode, lineNode.nextSibling)
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId] =
{topRulerNode, blockDecorationNode, bottomRulerNode}
}
oldLineState.followingBlockDecorations[decorationId] = Object.assign({}, newBlockDecorationState)
}
}
}
measureBlockDecorations () {
for (const lineId of Object.keys(this.newTileState.lines)) {
const newLineState = this.newTileState.lines[lineId]
for (const decorationId of Object.keys(newLineState.precedingBlockDecorations)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
const width = blockDecorationNode.offsetWidth
const height = bottomRulerNode.offsetTop - topRulerNode.offsetTop
const {decoration} = newLineState.precedingBlockDecorations[decorationId]
this.presenter.setBlockDecorationDimensions(decoration, width, height)
}
for (const decorationId of Object.keys(newLineState.followingBlockDecorations)) {
const {topRulerNode, blockDecorationNode, bottomRulerNode} =
this.blockDecorationNodesByLineIdAndDecorationId[lineId][decorationId]
const width = blockDecorationNode.offsetWidth
const height = bottomRulerNode.offsetTop - topRulerNode.offsetTop
const {decoration} = newLineState.followingBlockDecorations[decorationId]
this.presenter.setBlockDecorationDimensions(decoration, width, height)
}
}
}
lineNodeForScreenRow (screenRow) {

61
src/off-screen-block-decorations-component.js Normal file
View File

@@ -0,0 +1,61 @@
module.exports = class OffScreenBlockDecorationsComponent {
constructor ({presenter, views}) {
this.presenter = presenter
this.views = views
this.newState = {offScreenBlockDecorations: {}, width: 0}
this.oldState = {offScreenBlockDecorations: {}, width: 0}
this.domNode = document.createElement('div')
this.domNode.style.visibility = 'hidden'
this.blockDecorationNodesById = {}
}
getDomNode () {
return this.domNode
}
updateSync (state) {
this.newState = state.content
if (this.newState.width !== this.oldState.width) {
this.domNode.style.width = `${this.newState.width}px`
this.oldState.width = this.newState.width
}
for (const id of Object.keys(this.oldState.offScreenBlockDecorations)) {
if (!this.newState.offScreenBlockDecorations.hasOwnProperty(id)) {
const {topRuler, blockDecoration, bottomRuler} = this.blockDecorationNodesById[id]
topRuler.remove()
blockDecoration.remove()
bottomRuler.remove()
delete this.blockDecorationNodesById[id]
delete this.oldState.offScreenBlockDecorations[id]
}
}
for (const id of Object.keys(this.newState.offScreenBlockDecorations)) {
const decoration = this.newState.offScreenBlockDecorations[id]
if (!this.oldState.offScreenBlockDecorations.hasOwnProperty(id)) {
const topRuler = document.createElement('div')
this.domNode.appendChild(topRuler)
const blockDecoration = this.views.getView(decoration.getProperties().item)
this.domNode.appendChild(blockDecoration)
const bottomRuler = document.createElement('div')
this.domNode.appendChild(bottomRuler)
this.blockDecorationNodesById[id] = {topRuler, blockDecoration, bottomRuler}
}
this.oldState.offScreenBlockDecorations[id] = decoration
}
}
measureBlockDecorations () {
for (const id of Object.keys(this.blockDecorationNodesById)) {
const {topRuler, blockDecoration, bottomRuler} = this.blockDecorationNodesById[id]
const width = blockDecoration.offsetWidth
const height = bottomRuler.offsetTop - topRuler.offsetTop
const decoration = this.newState.offScreenBlockDecorations[id]
this.presenter.setBlockDecorationDimensions(decoration, width, height)
}
}
}

15
src/text-editor-component.coffee
View File

@@ -8,12 +8,12 @@ TextEditorPresenter = require './text-editor-presenter'
GutterContainerComponent = require './gutter-container-component'
InputComponent = require './input-component'
LinesComponent = require './lines-component'
OffScreenBlockDecorationsComponent = require './off-screen-block-decorations-component'
ScrollbarComponent = require './scrollbar-component'
ScrollbarCornerComponent = require './scrollbar-corner-component'
OverlayManager = require './overlay-manager'
DOMElementPool = require './dom-element-pool'
LinesYardstick = require './lines-yardstick'
BlockDecorationsComponent = require './block-decorations-component'
LineTopIndex = require 'line-top-index'
module.exports =
@@ -69,7 +69,6 @@ class TextEditorComponent
@domNode.classList.add('editor--private')
@overlayManager = new OverlayManager(@presenter, @domNode, @views)
@blockDecorationsComponent = new BlockDecorationsComponent(@hostElement, @views, @presenter, @domElementPool)
@scrollViewNode = document.createElement('div')
@scrollViewNode.classList.add('scroll-view')
@@ -78,10 +77,11 @@ class TextEditorComponent
@hiddenInputComponent = new InputComponent
@scrollViewNode.appendChild(@hiddenInputComponent.getDomNode())
@linesComponent = new LinesComponent({@presenter, @hostElement, @domElementPool, @assert, @grammars})
@linesComponent = new LinesComponent({@presenter, @hostElement, @domElementPool, @assert, @grammars, @views})
@scrollViewNode.appendChild(@linesComponent.getDomNode())
@linesComponent.getDomNode().appendChild(@blockDecorationsComponent.getDomNode())
@offScreenBlockDecorationsComponent = new OffScreenBlockDecorationsComponent({@presenter, @views})
@scrollViewNode.appendChild(@offScreenBlockDecorationsComponent.getDomNode())
@linesYardstick = new LinesYardstick(@editor, @linesComponent, lineTopIndex)
@presenter.setLinesYardstick(@linesYardstick)
@@ -165,8 +165,8 @@ class TextEditorComponent
@gutterContainerComponent = null
@hiddenInputComponent.updateSync(@newState)
@offScreenBlockDecorationsComponent.updateSync(@newState)
@linesComponent.updateSync(@newState)
@blockDecorationsComponent?.updateSync(@newState)
@horizontalScrollbarComponent.updateSync(@newState)
@verticalScrollbarComponent.updateSync(@newState)
@scrollbarCornerComponent.updateSync(@newState)
@@ -186,7 +186,8 @@ class TextEditorComponent
readAfterUpdateSync: =>
@overlayManager?.measureOverlays()
@blockDecorationsComponent?.measureBlockDecorations() if @isVisible()
@linesComponent.measureBlockDecorations()
@offScreenBlockDecorationsComponent.measureBlockDecorations()
mountGutterContainerComponent: ->
@gutterContainerComponent = new GutterContainerComponent({@editor, @onLineNumberGutterMouseDown, @domElementPool, @views})
@@ -543,7 +544,7 @@ class TextEditorComponent
screenPosition = @screenPositionForMouseEvent(event)
if event.target?.classList.contains('syntax--fold-marker')
if event.target?.classList.contains('fold-marker')
bufferPosition = @editor.bufferPositionForScreenPosition(screenPosition)
@editor.destroyFoldsIntersectingBufferRange([bufferPosition, bufferPosition])
return

75
src/text-editor-presenter.coffee
View File

@@ -34,6 +34,8 @@ class TextEditorPresenter
@observedBlockDecorations = new Set()
@invalidatedDimensionsByBlockDecoration = new Set()
@invalidateAllBlockDecorationsDimensions = false
@precedingBlockDecorationsByScreenRowAndId = {}
@followingBlockDecorationsByScreenRowAndId = {}
@screenRowsToMeasure = []
@transferMeasurementsToModel()
@transferMeasurementsFromModel()
@@ -191,7 +193,7 @@ class TextEditorPresenter
highlights: {}
overlays: {}
cursors: {}
blockDecorations: {}
offScreenBlockDecorations: {}
gutters: []
# Shared state that is copied into ``@state.gutters`.
@sharedGutterStyles = {}
@@ -412,16 +414,14 @@ class TextEditorPresenter
throw new Error("No line exists for row #{screenRow}. Last screen row: #{@model.getLastScreenRow()}")
visibleLineIds[line.id] = true
precedingBlockDecorations = @precedingBlockDecorationsByScreenRow[screenRow] ? []
followingBlockDecorations = @followingBlockDecorationsByScreenRow[screenRow] ? []
precedingBlockDecorations = @precedingBlockDecorationsByScreenRowAndId[screenRow] ? {}
followingBlockDecorations = @followingBlockDecorationsByScreenRowAndId[screenRow] ? {}
if tileState.lines.hasOwnProperty(line.id)
lineState = tileState.lines[line.id]
lineState.screenRow = screenRow
lineState.decorationClasses = @lineDecorationClassesForRow(screenRow)
lineState.precedingBlockDecorations = precedingBlockDecorations
lineState.followingBlockDecorations = followingBlockDecorations
lineState.hasPrecedingBlockDecorations = precedingBlockDecorations.length > 0
lineState.hasFollowingBlockDecorations = followingBlockDecorations.length > 0
else
tileState.lines[line.id] =
screenRow: screenRow
@@ -430,8 +430,6 @@ class TextEditorPresenter
decorationClasses: @lineDecorationClassesForRow(screenRow)
precedingBlockDecorations: precedingBlockDecorations
followingBlockDecorations: followingBlockDecorations
hasPrecedingBlockDecorations: precedingBlockDecorations.length > 0
hasFollowingBlockDecorations: followingBlockDecorations.length > 0
for id, line of tileState.lines
delete tileState.lines[id] unless visibleLineIds.hasOwnProperty(id)
@@ -1059,41 +1057,42 @@ class TextEditorPresenter
@decorations = @model.decorationsStateForScreenRowRange(@startRow, @endRow - 1)
updateBlockDecorations: ->
@blockDecorationsToRenderById = {}
@precedingBlockDecorationsByScreenRow = {}
@followingBlockDecorationsByScreenRow = {}
visibleDecorationsByMarkerId = @model.decorationsForScreenRowRange(@getStartTileRow(), @getEndTileRow() + @tileSize - 1)
if @invalidateAllBlockDecorationsDimensions
for decoration in @model.getDecorations(type: 'block')
@invalidatedDimensionsByBlockDecoration.add(decoration)
@invalidateAllBlockDecorationsDimensions = false
for markerId, decorations of visibleDecorationsByMarkerId
visibleDecorationsById = {}
visibleDecorationsByScreenRowAndId = {}
for markerId, decorations of @model.decorationsForScreenRowRange(@getStartTileRow(), @getEndTileRow() + @tileSize - 1)
for decoration in decorations when decoration.isType('block')
@updateBlockDecorationState(decoration, true)
screenRow = decoration.getMarker().getHeadScreenPosition().row
if decoration.getProperties().position is "after"
@followingBlockDecorationsByScreenRowAndId[screenRow] ?= {}
@followingBlockDecorationsByScreenRowAndId[screenRow][decoration.id] = {screenRow, decoration}
else
@precedingBlockDecorationsByScreenRowAndId[screenRow] ?= {}
@precedingBlockDecorationsByScreenRowAndId[screenRow][decoration.id] = {screenRow, decoration}
visibleDecorationsById[decoration.id] = true
visibleDecorationsByScreenRowAndId[screenRow] ?= {}
visibleDecorationsByScreenRowAndId[screenRow][decoration.id] = true
for screenRow, blockDecorations of @precedingBlockDecorationsByScreenRowAndId
if Number(screenRow) isnt @mouseWheelScreenRow
for id, blockDecoration of blockDecorations
unless visibleDecorationsByScreenRowAndId[screenRow]?[id]
delete @precedingBlockDecorationsByScreenRowAndId[screenRow][id]
for screenRow, blockDecorations of @followingBlockDecorationsByScreenRowAndId
if Number(screenRow) isnt @mouseWheelScreenRow
for id, blockDecoration of blockDecorations
unless visibleDecorationsByScreenRowAndId[screenRow]?[id]
delete @followingBlockDecorationsByScreenRowAndId[screenRow][id]
@state.content.offScreenBlockDecorations = {}
@invalidatedDimensionsByBlockDecoration.forEach (decoration) =>
@updateBlockDecorationState(decoration, false)
for decorationId, decorationState of @state.content.blockDecorations
continue if @blockDecorationsToRenderById[decorationId]
continue if decorationState.screenRow is @mouseWheelScreenRow
delete @state.content.blockDecorations[decorationId]
updateBlockDecorationState: (decoration, isVisible) ->
return if @blockDecorationsToRenderById[decoration.getId()]
screenRow = decoration.getMarker().getHeadScreenPosition().row
if decoration.getProperties().position is "after"
@followingBlockDecorationsByScreenRow[screenRow] ?= []
@followingBlockDecorationsByScreenRow[screenRow].push(decoration)
else
@precedingBlockDecorationsByScreenRow[screenRow] ?= []
@precedingBlockDecorationsByScreenRow[screenRow].push(decoration)
@state.content.blockDecorations[decoration.getId()] = {decoration, screenRow, isVisible}
@blockDecorationsToRenderById[decoration.getId()] = true
unless visibleDecorationsById[decoration.id]
@state.content.offScreenBlockDecorations[decoration.id] = decoration
updateLineDecorations: ->
@lineDecorationsByScreenRow = {}
@@ -1295,7 +1294,7 @@ class TextEditorPresenter
setBlockDecorationDimensions: (decoration, width, height) ->
return unless @observedBlockDecorations.has(decoration)
@lineTopIndex.resizeBlock(decoration.getId(), height)
@lineTopIndex.resizeBlock(decoration.id, height)
@invalidatedDimensionsByBlockDecoration.delete(decoration)
@shouldUpdateDecorations = true
@@ -1332,7 +1331,7 @@ class TextEditorPresenter
@didDestroyBlockDecoration(decoration)
isAfter = decoration.getProperties().position is "after"
@lineTopIndex.insertBlock(decoration.getId(), decoration.getMarker().getHeadScreenPosition().row, 0, isAfter)
@lineTopIndex.insertBlock(decoration.id, decoration.getMarker().getHeadScreenPosition().row, 0, isAfter)
@observedBlockDecorations.add(decoration)
@invalidateBlockDecorationDimensions(decoration)
@@ -1346,14 +1345,14 @@ class TextEditorPresenter
# change.
return if markerEvent.textChanged
@lineTopIndex.moveBlock(decoration.getId(), decoration.getMarker().getHeadScreenPosition().row)
@lineTopIndex.moveBlock(decoration.id, decoration.getMarker().getHeadScreenPosition().row)
@shouldUpdateDecorations = true
@emitDidUpdateState()
didDestroyBlockDecoration: (decoration) ->
return unless @observedBlockDecorations.has(decoration)
@lineTopIndex.removeBlock(decoration.getId())
@lineTopIndex.removeBlock(decoration.id)
@observedBlockDecorations.delete(decoration)
@invalidatedDimensionsByBlockDecoration.delete(decoration)
@shouldUpdateDecorations = true

15
src/tiled-component.coffee
View File

@@ -1,10 +1,3 @@
{values} = require 'underscore-plus'
cloneObject = (object) ->
clone = {}
clone[key] = value for key, value of object
clone
module.exports =
class TiledComponent
updateSync: (state) ->
@@ -41,7 +34,7 @@ class TiledComponent
component = @componentsByTileId[tileRow] = @buildComponentForTile(tileRow)
@getTilesNode().appendChild(component.getDomNode())
@oldState.tiles[tileRow] = cloneObject(tileState)
@oldState.tiles[tileRow] = Object.assign({}, tileState)
component.updateSync(@newState)
@@ -50,5 +43,9 @@ class TiledComponent
getComponentForTile: (tileRow) ->
@componentsByTileId[tileRow]
getComponents: ->
for _, component of @componentsByTileId
component
getTiles: ->
values(@componentsByTileId).map (component) -> component.getDomNode()
@getComponents().map((component) -> component.getDomNode())