pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-09-20 07:28:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11240 from atom/as-accurate-block-decoration-measurements

Browse Source 
More accurate block decoration measurements
This commit is contained in:
Antonio Scandurra 2016-03-23 17:23:18 +01:00
commit 41272dc9ed
3 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1840,17 +1840,22 @@ describe('TextEditorComponent', function () {
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
})
it('measures block decorations taking into account both top and bottom margins', async function () {
it('measures block decorations taking into account both top and bottom margins of the element and its children', async function () {
let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
let child = document.createElement("div")
child.style.height = "7px"
child.style.width = "30px"
child.style.marginBottom = "20px"
item.appendChild(child)
atom.styles.addStyleSheet(
'atom-text-editor .decoration-1 { width: 30px; height: 30px; margin-top: 10px; margin-bottom: 5px; }',
'atom-text-editor .decoration-1 { width: 30px; margin-top: 10px; }',
{context: 'atom-text-editor'}
)
await nextAnimationFramePromise() // causes the DOM to update and to retrieve new styles
await nextAnimationFramePromise() // applies the changes
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 30 + 10 + 5 + "px")
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 10 + 7 + 20 + "px")
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)

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

@ -26,7 +26,10 @@ class BlockDecorationsComponent
for id, blockDecorationState of @oldState.blockDecorations
unless @newState.blockDecorations.hasOwnProperty(id)
@blockDecorationNodesById[id].remove()
blockDecorationNode = @blockDecorationNodesById[id]
blockDecorationNode.previousSibling.remove()
blockDecorationNode.nextSibling.remove()
blockDecorationNode.remove()
delete @blockDecorationNodesById[id]
delete @oldState.blockDecorations[id]
@ -41,19 +44,27 @@ class BlockDecorationsComponent
for decorationId, blockDecorationNode of @blockDecorationNodesById
style = getComputedStyle(blockDecorationNode)
decoration = @newState.blockDecorations[decorationId].decoration
marginBottom = parseInt(style.marginBottom) ? 0
marginTop = parseInt(style.marginTop) ? 0
@presenter.setBlockDecorationDimensions(
decoration,
blockDecorationNode.offsetWidth,
blockDecorationNode.offsetHeight + marginTop + marginBottom
)
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)
blockDecorationNode.id = "atom--block-decoration-#{id}"
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)
@ -63,9 +74,13 @@ class BlockDecorationsComponent
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

4
src/lines-tile-component.coffee
View File

@ -149,7 +149,7 @@ class LinesTileComponent
if newLineState.screenRow isnt oldLineState.screenRow
insertionPoint.dataset.screenRow = newLineState.screenRow
precedingBlockDecorationsSelector = newLineState.precedingBlockDecorations.map((d) -> "#atom--block-decoration-#{d.id}").join(',')
precedingBlockDecorationsSelector = newLineState.precedingBlockDecorations.map((d) -> ".atom--block-decoration-#{d.id}").join(',')
if precedingBlockDecorationsSelector isnt oldLineState.precedingBlockDecorationsSelector
insertionPoint.setAttribute("select", precedingBlockDecorationsSelector)
@ -180,7 +180,7 @@ class LinesTileComponent
if newLineState.screenRow isnt oldLineState.screenRow
insertionPoint.dataset.screenRow = newLineState.screenRow
followingBlockDecorationsSelector = newLineState.followingBlockDecorations.map((d) -> "#atom--block-decoration-#{d.id}").join(',')
followingBlockDecorationsSelector = newLineState.followingBlockDecorations.map((d) -> ".atom--block-decoration-#{d.id}").join(',')
if followingBlockDecorationsSelector isnt oldLineState.followingBlockDecorationsSelector
insertionPoint.setAttribute("select", followingBlockDecorationsSelector)