Support class property on overlay decorations

This commit is contained in:
Nathan Sobo
2017-03-22 10:31:48 -06:00
committed by Antonio Scandurra
parent b6f71bc648
commit 47761a455e
2 changed files with 20 additions and 3 deletions

View File

@@ -900,10 +900,11 @@ describe('TextEditorComponent', () => {
overlayElement.style.margin = '3px'
overlayElement.style.backgroundColor = 'red'
editor.decorateMarker(marker, {type: 'overlay', item: overlayElement})
const decoration = editor.decorateMarker(marker, {type: 'overlay', item: overlayElement, class: 'a'})
await component.getNextUpdatePromise()
const overlayWrapper = overlayElement.parentElement
expect(overlayWrapper.classList.contains('a')).toBe(true)
expect(overlayWrapper.getBoundingClientRect().top).toBe(clientTopForLine(component, 5))
expect(overlayWrapper.getBoundingClientRect().left).toBe(clientLeftForCharacter(component, 4, 25))
@@ -939,6 +940,16 @@ describe('TextEditorComponent', () => {
overlayElement.style.height = 80 + 'px'
await component.getNextUpdatePromise()
expect(overlayWrapper.getBoundingClientRect().top).toBe(clientTopForLine(component, 5))
// Can update overlay wrapper class
decoration.setProperties({type: 'overlay', item: overlayElement, class: 'b'})
await component.getNextUpdatePromise()
expect(overlayWrapper.classList.contains('a')).toBe(false)
expect(overlayWrapper.classList.contains('b')).toBe(true)
decoration.setProperties({type: 'overlay', item: overlayElement})
await component.getNextUpdatePromise()
expect(overlayWrapper.classList.contains('b')).toBe(false)
})
})

View File

@@ -2355,6 +2355,7 @@ class OverlayComponent {
constructor (props) {
this.props = props
this.element = document.createElement('atom-overlay')
if (this.props.className != null) this.element.classList.add(this.props.className)
this.element.appendChild(this.props.element)
this.element.style.position = 'fixed'
this.element.style.zIndex = 4
@@ -2363,10 +2364,15 @@ class OverlayComponent {
getElementResizeDetector().listenTo(this.element, this.props.didResize)
}
update (props) {
this.props = props
update (newProps) {
const oldProps = this.props
this.props = newProps
if (this.props.pixelTop != null) this.element.style.top = this.props.pixelTop + 'px'
if (this.props.pixelLeft != null) this.element.style.left = this.props.pixelLeft + 'px'
if (newProps.className !== oldProps.className) {
if (oldProps.className != null) this.element.classList.remove(oldProps.className)
if (newProps.className != null) this.element.classList.add(newProps.className)
}
}
}