mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-19 23:17:16 +03:00
6128 lines
222 KiB
JavaScript
6128 lines
222 KiB
JavaScript
const {
|
|
it,
|
|
|
|
beforeEach,
|
|
afterEach,
|
|
conditionPromise
|
|
} = require('./async-spec-helpers')
|
|
|
|
const Random = require('../script/node_modules/random-seed')
|
|
const { getRandomBufferRange, buildRandomLines } = require('./helpers/random')
|
|
const TextEditorComponent = require('../src/text-editor-component')
|
|
const TextEditorElement = require('../src/text-editor-element')
|
|
const TextEditor = require('../src/text-editor')
|
|
const TextBuffer = require('text-buffer')
|
|
const { Point } = TextBuffer
|
|
const fs = require('fs')
|
|
const path = require('path')
|
|
const Grim = require('grim')
|
|
const electron = require('electron')
|
|
const clipboard = electron.clipboard
|
|
|
|
const SAMPLE_TEXT = fs.readFileSync(
|
|
path.join(__dirname, 'fixtures', 'sample.js'),
|
|
'utf8'
|
|
)
|
|
|
|
document.registerElement('text-editor-component-test-element', {
|
|
prototype: Object.create(HTMLElement.prototype, {
|
|
attachedCallback: {
|
|
value: function () {
|
|
this.didAttach()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
const editors = []
|
|
let verticalScrollbarWidth, horizontalScrollbarHeight
|
|
|
|
describe('TextEditorComponent', () => {
|
|
beforeEach(() => {
|
|
jasmine.useRealClock()
|
|
|
|
// Force scrollbars to be visible regardless of local system configuration
|
|
const scrollbarStyle = document.createElement('style')
|
|
scrollbarStyle.textContent =
|
|
'atom-text-editor ::-webkit-scrollbar { -webkit-appearance: none }'
|
|
jasmine.attachToDOM(scrollbarStyle)
|
|
|
|
if (verticalScrollbarWidth == null) {
|
|
const { component, element } = buildComponent({
|
|
text: 'abcdefgh\n'.repeat(10),
|
|
width: 30,
|
|
height: 30
|
|
})
|
|
verticalScrollbarWidth = getVerticalScrollbarWidth(component)
|
|
horizontalScrollbarHeight = getHorizontalScrollbarHeight(component)
|
|
element.remove()
|
|
}
|
|
})
|
|
|
|
afterEach(() => {
|
|
for (const editor of editors) {
|
|
editor.destroy()
|
|
}
|
|
editors.length = 0
|
|
})
|
|
|
|
describe('rendering', () => {
|
|
it('renders lines and line numbers for the visible region', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(13)
|
|
expect(queryOnScreenLineElements(element).length).toBe(13)
|
|
|
|
element.style.height = 4 * component.measurements.lineHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(9)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
|
|
await setScrollTop(component, 5 * component.getLineHeight())
|
|
|
|
// After scrolling down beyond > 3 rows, the order of line numbers and lines
|
|
// in the DOM is a bit weird because the first tile is recycled to the bottom
|
|
// when it is scrolled out of view
|
|
expect(
|
|
queryOnScreenLineNumberElements(element).map(element =>
|
|
element.textContent.trim()
|
|
)
|
|
).toEqual(['10', '11', '12', '4', '5', '6', '7', '8', '9'])
|
|
expect(
|
|
queryOnScreenLineElements(element).map(
|
|
element => element.dataset.screenRow
|
|
)
|
|
).toEqual(['9', '10', '11', '3', '4', '5', '6', '7', '8'])
|
|
expect(
|
|
queryOnScreenLineElements(element).map(element => element.textContent)
|
|
).toEqual([
|
|
editor.lineTextForScreenRow(9),
|
|
' ', // this line is blank in the model, but we render a space to prevent the line from collapsing vertically
|
|
editor.lineTextForScreenRow(11),
|
|
editor.lineTextForScreenRow(3),
|
|
editor.lineTextForScreenRow(4),
|
|
editor.lineTextForScreenRow(5),
|
|
editor.lineTextForScreenRow(6),
|
|
editor.lineTextForScreenRow(7),
|
|
editor.lineTextForScreenRow(8)
|
|
])
|
|
|
|
await setScrollTop(component, 2.5 * component.getLineHeight())
|
|
expect(
|
|
queryOnScreenLineNumberElements(element).map(element =>
|
|
element.textContent.trim()
|
|
)
|
|
).toEqual(['1', '2', '3', '4', '5', '6', '7', '8', '9'])
|
|
expect(
|
|
queryOnScreenLineElements(element).map(
|
|
element => element.dataset.screenRow
|
|
)
|
|
).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8'])
|
|
expect(
|
|
queryOnScreenLineElements(element).map(element => element.textContent)
|
|
).toEqual([
|
|
editor.lineTextForScreenRow(0),
|
|
editor.lineTextForScreenRow(1),
|
|
editor.lineTextForScreenRow(2),
|
|
editor.lineTextForScreenRow(3),
|
|
editor.lineTextForScreenRow(4),
|
|
editor.lineTextForScreenRow(5),
|
|
editor.lineTextForScreenRow(6),
|
|
editor.lineTextForScreenRow(7),
|
|
editor.lineTextForScreenRow(8)
|
|
])
|
|
})
|
|
|
|
it('bases the width of the lines div on the width of the longest initially-visible screen line', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 2,
|
|
height: 20,
|
|
width: 100
|
|
})
|
|
|
|
{
|
|
expect(editor.getApproximateLongestScreenRow()).toBe(3)
|
|
const expectedWidth = Math.ceil(
|
|
component.pixelPositionForScreenPosition(Point(3, Infinity)).left +
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
expect(element.querySelector('.lines').style.width).toBe(
|
|
expectedWidth + 'px'
|
|
)
|
|
}
|
|
|
|
{
|
|
// Get the next update promise synchronously here to ensure we don't
|
|
// miss the update while polling the condition.
|
|
const nextUpdatePromise = component.getNextUpdatePromise()
|
|
await conditionPromise(
|
|
() => editor.getApproximateLongestScreenRow() === 6
|
|
)
|
|
await nextUpdatePromise
|
|
|
|
// Capture the width of the lines before requesting the width of
|
|
// longest line, because making that request forces a DOM update
|
|
const actualWidth = element.querySelector('.lines').style.width
|
|
const expectedWidth = Math.ceil(
|
|
component.pixelPositionForScreenPosition(Point(6, Infinity)).left +
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
expect(actualWidth).toBe(expectedWidth + 'px')
|
|
}
|
|
|
|
// Make sure we do not throw an error if a synchronous update is
|
|
// triggered before measuring the longest line from a
|
|
// previously-scheduled update.
|
|
editor.getBuffer().insert(Point(12, Infinity), 'x'.repeat(100))
|
|
expect(editor.getLongestScreenRow()).toBe(12)
|
|
|
|
TextEditorComponent.getScheduler().readDocument(() => {
|
|
// This will happen before the measurement phase of the update
|
|
// triggered above.
|
|
component.pixelPositionForScreenPosition(Point(11, Infinity))
|
|
})
|
|
|
|
await component.getNextUpdatePromise()
|
|
})
|
|
|
|
it('re-renders lines when their height changes', async () => {
|
|
const { component, element } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
element.style.height = 4 * component.measurements.lineHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(9)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
|
|
element.style.lineHeight = '2.0'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(6)
|
|
expect(queryOnScreenLineElements(element).length).toBe(6)
|
|
|
|
element.style.lineHeight = '0.7'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(12)
|
|
expect(queryOnScreenLineElements(element).length).toBe(12)
|
|
|
|
element.style.lineHeight = '0.05'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(13)
|
|
expect(queryOnScreenLineElements(element).length).toBe(13)
|
|
|
|
element.style.lineHeight = '0'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(13)
|
|
expect(queryOnScreenLineElements(element).length).toBe(13)
|
|
|
|
element.style.lineHeight = '1'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineNumberElements(element).length).toBe(9)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
})
|
|
|
|
it('makes the content at least as tall as the scroll container client height', async () => {
|
|
const { component, editor } = buildComponent({
|
|
text: 'a'.repeat(100),
|
|
width: 50,
|
|
height: 100
|
|
})
|
|
expect(component.refs.content.offsetHeight).toBe(
|
|
100 - getHorizontalScrollbarHeight(component)
|
|
)
|
|
|
|
editor.setText('a\n'.repeat(30))
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.content.offsetHeight).toBeGreaterThan(100)
|
|
expect(component.refs.content.offsetHeight).toBe(
|
|
component.getContentHeight()
|
|
)
|
|
})
|
|
|
|
it('honors the scrollPastEnd option by adding empty space equivalent to the clientHeight to the end of the content area', async () => {
|
|
const { component, editor } = buildComponent({
|
|
autoHeight: false,
|
|
autoWidth: false
|
|
})
|
|
|
|
await editor.update({ scrollPastEnd: true })
|
|
await setEditorHeightInLines(component, 6)
|
|
|
|
// scroll to end
|
|
await setScrollTop(component, Infinity)
|
|
expect(component.getFirstVisibleRow()).toBe(
|
|
editor.getScreenLineCount() - 3
|
|
)
|
|
|
|
editor.update({ scrollPastEnd: false })
|
|
await component.getNextUpdatePromise() // wait for scrollable content resize
|
|
expect(component.getFirstVisibleRow()).toBe(
|
|
editor.getScreenLineCount() - 6
|
|
)
|
|
|
|
// Always allows at least 3 lines worth of overscroll if the editor is short
|
|
await setEditorHeightInLines(component, 2)
|
|
await editor.update({ scrollPastEnd: true })
|
|
await setScrollTop(component, Infinity)
|
|
expect(component.getFirstVisibleRow()).toBe(
|
|
editor.getScreenLineCount() + 1
|
|
)
|
|
})
|
|
|
|
it('does not fire onDidChangeScrollTop listeners when assigning the same maximal value and the content height has fractional pixels (regression)', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
autoHeight: false,
|
|
autoWidth: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
|
|
// Force a fractional content height with a block decoration
|
|
const item = document.createElement('div')
|
|
item.style.height = '10.6px'
|
|
editor.decorateMarker(editor.markBufferPosition([0, 0]), {
|
|
type: 'block',
|
|
item
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
component.setScrollTop(Infinity)
|
|
element.onDidChangeScrollTop(newScrollTop => {
|
|
throw new Error('Scroll top should not have changed')
|
|
})
|
|
component.setScrollTop(component.getScrollTop())
|
|
})
|
|
|
|
it('gives the line number tiles an explicit width and height so their layout can be strictly contained', async () => {
|
|
const { component, editor } = buildComponent({ rowsPerTile: 3 })
|
|
|
|
const lineNumberGutterElement =
|
|
component.refs.gutterContainer.refs.lineNumberGutter.element
|
|
expect(lineNumberGutterElement.offsetHeight).toBe(
|
|
component.getScrollHeight()
|
|
)
|
|
|
|
for (const child of lineNumberGutterElement.children) {
|
|
expect(child.offsetWidth).toBe(lineNumberGutterElement.offsetWidth)
|
|
if (!child.classList.contains('line-number')) {
|
|
for (const lineNumberElement of child.children) {
|
|
expect(lineNumberElement.offsetWidth).toBe(
|
|
lineNumberGutterElement.offsetWidth
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
editor.setText('x\n'.repeat(99))
|
|
await component.getNextUpdatePromise()
|
|
expect(lineNumberGutterElement.offsetHeight).toBe(
|
|
component.getScrollHeight()
|
|
)
|
|
for (const child of lineNumberGutterElement.children) {
|
|
expect(child.offsetWidth).toBe(lineNumberGutterElement.offsetWidth)
|
|
if (!child.classList.contains('line-number')) {
|
|
for (const lineNumberElement of child.children) {
|
|
expect(lineNumberElement.offsetWidth).toBe(
|
|
lineNumberGutterElement.offsetWidth
|
|
)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
it('keeps the number of tiles stable when the visible line count changes during vertical scrolling', async () => {
|
|
const { component } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 5.5)
|
|
expect(component.refs.lineTiles.children.length).toBe(3 + 2) // account for cursors and highlights containers
|
|
|
|
await setScrollTop(component, 0.5 * component.getLineHeight())
|
|
expect(component.refs.lineTiles.children.length).toBe(3 + 2) // account for cursors and highlights containers
|
|
|
|
await setScrollTop(component, 1 * component.getLineHeight())
|
|
expect(component.refs.lineTiles.children.length).toBe(3 + 2) // account for cursors and highlights containers
|
|
})
|
|
|
|
it('recycles tiles on resize', async () => {
|
|
const { component } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 7)
|
|
await setScrollTop(component, 3.5 * component.getLineHeight())
|
|
const lineNode = lineNodeForScreenRow(component, 7)
|
|
await setEditorHeightInLines(component, 4)
|
|
expect(lineNodeForScreenRow(component, 7)).toBe(lineNode)
|
|
})
|
|
|
|
it("updates lines numbers when a row's foldability changes (regression)", async () => {
|
|
const { component, editor } = buildComponent({ text: 'abc\n' })
|
|
editor.setCursorBufferPosition([1, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 0).querySelector('.foldable')
|
|
).toBeNull()
|
|
|
|
editor.insertText(' def')
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 0).querySelector('.foldable')
|
|
).toBeDefined()
|
|
|
|
editor.undo()
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 0).querySelector('.foldable')
|
|
).toBeNull()
|
|
})
|
|
|
|
it('shows the foldable icon on the last screen row of a buffer row that can be folded', async () => {
|
|
const { component } = buildComponent({
|
|
text: 'abc\n de\nfghijklm\n no',
|
|
softWrapped: true
|
|
})
|
|
await setEditorWidthInCharacters(component, 5)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 0).classList.contains('foldable')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('foldable')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 2).classList.contains('foldable')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 3).classList.contains('foldable')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 4).classList.contains('foldable')
|
|
).toBe(false)
|
|
})
|
|
|
|
it('renders dummy vertical and horizontal scrollbars when content overflows', async () => {
|
|
const { component, editor } = buildComponent({
|
|
height: 100,
|
|
width: 100
|
|
})
|
|
const verticalScrollbar = component.refs.verticalScrollbar.element
|
|
const horizontalScrollbar = component.refs.horizontalScrollbar.element
|
|
expect(verticalScrollbar.scrollHeight).toBe(component.getContentHeight())
|
|
expect(horizontalScrollbar.scrollWidth).toBe(component.getContentWidth())
|
|
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(0)
|
|
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(0)
|
|
expect(verticalScrollbar.style.bottom).toBe(
|
|
getVerticalScrollbarWidth(component) + 'px'
|
|
)
|
|
expect(verticalScrollbar.style.visibility).toBe('')
|
|
expect(horizontalScrollbar.style.right).toBe(
|
|
getHorizontalScrollbarHeight(component) + 'px'
|
|
)
|
|
expect(horizontalScrollbar.style.visibility).toBe('')
|
|
expect(component.refs.scrollbarCorner).toBeDefined()
|
|
|
|
setScrollTop(component, 100)
|
|
await setScrollLeft(component, 100)
|
|
expect(verticalScrollbar.scrollTop).toBe(100)
|
|
expect(horizontalScrollbar.scrollLeft).toBe(100)
|
|
|
|
verticalScrollbar.scrollTop = 120
|
|
horizontalScrollbar.scrollLeft = 120
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(120)
|
|
expect(component.getScrollLeft()).toBe(120)
|
|
|
|
editor.setText('a\n'.repeat(15))
|
|
await component.getNextUpdatePromise()
|
|
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(0)
|
|
expect(getHorizontalScrollbarHeight(component)).toBe(0)
|
|
expect(verticalScrollbar.style.visibility).toBe('')
|
|
expect(horizontalScrollbar.style.visibility).toBe('hidden')
|
|
|
|
editor.setText('a'.repeat(100))
|
|
await component.getNextUpdatePromise()
|
|
expect(getVerticalScrollbarWidth(component)).toBe(0)
|
|
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(0)
|
|
expect(verticalScrollbar.style.visibility).toBe('hidden')
|
|
expect(horizontalScrollbar.style.visibility).toBe('')
|
|
|
|
editor.setText('')
|
|
await component.getNextUpdatePromise()
|
|
expect(getVerticalScrollbarWidth(component)).toBe(0)
|
|
expect(getHorizontalScrollbarHeight(component)).toBe(0)
|
|
expect(verticalScrollbar.style.visibility).toBe('hidden')
|
|
expect(horizontalScrollbar.style.visibility).toBe('hidden')
|
|
})
|
|
|
|
describe('when scrollbar styles change or the editor element is detached and then reattached', () => {
|
|
it('updates the bottom/right of dummy scrollbars and client height/width measurements', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
height: 100,
|
|
width: 100
|
|
})
|
|
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(10)
|
|
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(10)
|
|
setScrollTop(component, 20)
|
|
setScrollLeft(component, 10)
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Updating scrollbar styles.
|
|
const style = document.createElement('style')
|
|
style.textContent = '::-webkit-scrollbar { height: 10px; width: 10px; }'
|
|
jasmine.attachToDOM(style)
|
|
TextEditor.didUpdateScrollbarStyles()
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(getHorizontalScrollbarHeight(component)).toBe(10)
|
|
expect(getVerticalScrollbarWidth(component)).toBe(10)
|
|
expect(component.refs.horizontalScrollbar.element.style.right).toBe(
|
|
'10px'
|
|
)
|
|
expect(component.refs.verticalScrollbar.element.style.bottom).toBe(
|
|
'10px'
|
|
)
|
|
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(10)
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(20)
|
|
expect(component.getScrollContainerClientHeight()).toBe(100 - 10)
|
|
expect(component.getScrollContainerClientWidth()).toBe(
|
|
100 - component.getGutterContainerWidth() - 10
|
|
)
|
|
|
|
// Detaching and re-attaching the editor element.
|
|
element.remove()
|
|
jasmine.attachToDOM(element)
|
|
|
|
expect(getHorizontalScrollbarHeight(component)).toBe(10)
|
|
expect(getVerticalScrollbarWidth(component)).toBe(10)
|
|
expect(component.refs.horizontalScrollbar.element.style.right).toBe(
|
|
'10px'
|
|
)
|
|
expect(component.refs.verticalScrollbar.element.style.bottom).toBe(
|
|
'10px'
|
|
)
|
|
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(10)
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(20)
|
|
expect(component.getScrollContainerClientHeight()).toBe(100 - 10)
|
|
expect(component.getScrollContainerClientWidth()).toBe(
|
|
100 - component.getGutterContainerWidth() - 10
|
|
)
|
|
|
|
// Ensure we don't throw an error trying to remeasure non-existent scrollbars for mini editors.
|
|
await editor.update({ mini: true })
|
|
TextEditor.didUpdateScrollbarStyles()
|
|
component.scheduleUpdate()
|
|
await component.getNextUpdatePromise()
|
|
})
|
|
})
|
|
|
|
it('renders cursors within the visible row range', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
height: 40,
|
|
rowsPerTile: 2
|
|
})
|
|
await setScrollTop(component, 100)
|
|
|
|
expect(component.getRenderedStartRow()).toBe(4)
|
|
expect(component.getRenderedEndRow()).toBe(10)
|
|
|
|
editor.setCursorScreenPosition([0, 0], { autoscroll: false }) // out of view
|
|
editor.addCursorAtScreenPosition([2, 2], { autoscroll: false }) // out of view
|
|
editor.addCursorAtScreenPosition([4, 0], { autoscroll: false }) // line start
|
|
editor.addCursorAtScreenPosition([4, 4], { autoscroll: false }) // at token boundary
|
|
editor.addCursorAtScreenPosition([4, 6], { autoscroll: false }) // within token
|
|
editor.addCursorAtScreenPosition([5, Infinity], { autoscroll: false }) // line end
|
|
editor.addCursorAtScreenPosition([10, 2], { autoscroll: false }) // out of view
|
|
await component.getNextUpdatePromise()
|
|
|
|
let cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(4)
|
|
verifyCursorPosition(component, cursorNodes[0], 4, 0)
|
|
verifyCursorPosition(component, cursorNodes[1], 4, 4)
|
|
verifyCursorPosition(component, cursorNodes[2], 4, 6)
|
|
verifyCursorPosition(component, cursorNodes[3], 5, 30)
|
|
|
|
editor.setCursorScreenPosition([8, 11], { autoscroll: false })
|
|
await component.getNextUpdatePromise()
|
|
|
|
cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(1)
|
|
verifyCursorPosition(component, cursorNodes[0], 8, 11)
|
|
|
|
editor.setCursorScreenPosition([0, 0], { autoscroll: false })
|
|
await component.getNextUpdatePromise()
|
|
|
|
cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(0)
|
|
|
|
editor.setSelectedScreenRange([[8, 0], [12, 0]], { autoscroll: false })
|
|
await component.getNextUpdatePromise()
|
|
cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(0)
|
|
})
|
|
|
|
it('hides cursors with non-empty selections when showCursorOnSelection is false', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
editor.setSelectedScreenRanges([[[0, 0], [0, 3]], [[1, 0], [1, 0]]])
|
|
await component.getNextUpdatePromise()
|
|
{
|
|
const cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(2)
|
|
verifyCursorPosition(component, cursorNodes[0], 0, 3)
|
|
verifyCursorPosition(component, cursorNodes[1], 1, 0)
|
|
}
|
|
|
|
editor.update({ showCursorOnSelection: false })
|
|
await component.getNextUpdatePromise()
|
|
{
|
|
const cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(1)
|
|
verifyCursorPosition(component, cursorNodes[0], 1, 0)
|
|
}
|
|
|
|
editor.setSelectedScreenRanges([[[0, 0], [0, 3]], [[1, 0], [1, 4]]])
|
|
await component.getNextUpdatePromise()
|
|
{
|
|
const cursorNodes = Array.from(element.querySelectorAll('.cursor'))
|
|
expect(cursorNodes.length).toBe(0)
|
|
}
|
|
})
|
|
|
|
it('blinks cursors when the editor is focused and the cursors are not moving', async () => {
|
|
assertDocumentFocused()
|
|
const { component, element, editor } = buildComponent()
|
|
component.props.cursorBlinkPeriod = 40
|
|
component.props.cursorBlinkResumeDelay = 40
|
|
editor.addCursorAtScreenPosition([1, 0])
|
|
|
|
element.focus()
|
|
await component.getNextUpdatePromise()
|
|
const [cursor1, cursor2] = element.querySelectorAll('.cursor')
|
|
|
|
await conditionPromise(
|
|
() =>
|
|
getComputedStyle(cursor1).opacity === '1' &&
|
|
getComputedStyle(cursor2).opacity === '1'
|
|
)
|
|
await conditionPromise(
|
|
() =>
|
|
getComputedStyle(cursor1).opacity === '0' &&
|
|
getComputedStyle(cursor2).opacity === '0'
|
|
)
|
|
await conditionPromise(
|
|
() =>
|
|
getComputedStyle(cursor1).opacity === '1' &&
|
|
getComputedStyle(cursor2).opacity === '1'
|
|
)
|
|
|
|
editor.moveRight()
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(getComputedStyle(cursor1).opacity).toBe('1')
|
|
expect(getComputedStyle(cursor2).opacity).toBe('1')
|
|
})
|
|
|
|
it('gives cursors at the end of lines the width of an "x" character', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
editor.setText('abcde')
|
|
await setEditorWidthInCharacters(component, 5.5)
|
|
|
|
editor.setCursorScreenPosition([0, Infinity])
|
|
await component.getNextUpdatePromise()
|
|
expect(element.querySelector('.cursor').offsetWidth).toBe(
|
|
Math.round(component.getBaseCharacterWidth())
|
|
)
|
|
|
|
// Clip cursor width when soft-wrap is on and the cursor is at the end of
|
|
// the line. This prevents the parent tile from disabling sub-pixel
|
|
// anti-aliasing. For some reason, adding overflow: hidden to the cursor
|
|
// container doesn't solve this issue so we're adding this workaround instead.
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
expect(element.querySelector('.cursor').offsetWidth).toBeLessThan(
|
|
Math.round(component.getBaseCharacterWidth())
|
|
)
|
|
})
|
|
|
|
it('positions and sizes cursors correctly when they are located next to a fold marker', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
editor.foldBufferRange([[0, 3], [0, 6]])
|
|
|
|
editor.setCursorScreenPosition([0, 3])
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 0, 3)
|
|
|
|
editor.setCursorScreenPosition([0, 4])
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 0, 4)
|
|
})
|
|
|
|
it('positions cursors and placeholder text correctly when the lines container has a margin and/or is padded', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
placeholderText: 'testing'
|
|
})
|
|
|
|
component.refs.lineTiles.style.marginLeft = '10px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.setCursorBufferPosition([0, 3])
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 0, 3)
|
|
|
|
editor.setCursorScreenPosition([1, 0])
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 1, 0)
|
|
|
|
component.refs.lineTiles.style.paddingTop = '5px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 1, 0)
|
|
|
|
editor.setCursorScreenPosition([2, 2])
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
verifyCursorPosition(component, element.querySelector('.cursor'), 2, 2)
|
|
|
|
editor.setText('')
|
|
await component.getNextUpdatePromise()
|
|
|
|
const placeholderTextLeft = element
|
|
.querySelector('.placeholder-text')
|
|
.getBoundingClientRect().left
|
|
const linesLeft = component.refs.lineTiles.getBoundingClientRect().left
|
|
expect(placeholderTextLeft).toBe(linesLeft)
|
|
})
|
|
|
|
it('places the hidden input element at the location of the last cursor if it is visible', async () => {
|
|
const { component, editor } = buildComponent({
|
|
height: 60,
|
|
width: 120,
|
|
rowsPerTile: 2
|
|
})
|
|
const { hiddenInput } = component.refs.cursorsAndInput.refs
|
|
setScrollTop(component, 100)
|
|
await setScrollLeft(component, 40)
|
|
|
|
expect(component.getRenderedStartRow()).toBe(4)
|
|
expect(component.getRenderedEndRow()).toBe(10)
|
|
|
|
// When out of view, the hidden input is positioned at 0, 0
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
expect(hiddenInput.offsetTop).toBe(0)
|
|
expect(hiddenInput.offsetLeft).toBe(0)
|
|
|
|
// Otherwise it is positioned at the last cursor position
|
|
editor.addCursorAtScreenPosition([7, 4])
|
|
await component.getNextUpdatePromise()
|
|
expect(hiddenInput.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 7)
|
|
)
|
|
expect(Math.round(hiddenInput.getBoundingClientRect().left)).toBe(
|
|
clientLeftForCharacter(component, 7, 4)
|
|
)
|
|
})
|
|
|
|
it('soft wraps lines based on the content width when soft wrap is enabled', async () => {
|
|
let baseCharacterWidth, gutterContainerWidth
|
|
{
|
|
const { component, editor } = buildComponent()
|
|
baseCharacterWidth = component.getBaseCharacterWidth()
|
|
gutterContainerWidth = component.getGutterContainerWidth()
|
|
editor.destroy()
|
|
}
|
|
|
|
const { component, element, editor } = buildComponent({
|
|
width: gutterContainerWidth + baseCharacterWidth * 55,
|
|
attach: false
|
|
})
|
|
editor.setSoftWrapped(true)
|
|
jasmine.attachToDOM(element)
|
|
|
|
expect(getEditorWidthInBaseCharacters(component)).toBe(55)
|
|
expect(lineNodeForScreenRow(component, 3).textContent).toBe(
|
|
' var pivot = items.shift(), current, left = [], '
|
|
)
|
|
expect(lineNodeForScreenRow(component, 4).textContent).toBe(
|
|
' right = [];'
|
|
)
|
|
|
|
await setEditorWidthInCharacters(component, 45)
|
|
expect(lineNodeForScreenRow(component, 3).textContent).toBe(
|
|
' var pivot = items.shift(), current, left '
|
|
)
|
|
expect(lineNodeForScreenRow(component, 4).textContent).toBe(
|
|
' = [], right = [];'
|
|
)
|
|
|
|
const { scrollContainer } = component.refs
|
|
expect(scrollContainer.clientWidth).toBe(scrollContainer.scrollWidth)
|
|
})
|
|
|
|
it('correctly forces the display layer to index visible rows when resizing (regression)', async () => {
|
|
const text = 'a'.repeat(30) + '\n' + 'b'.repeat(1000)
|
|
const { component, element, editor } = buildComponent({
|
|
height: 300,
|
|
width: 800,
|
|
attach: false,
|
|
text
|
|
})
|
|
editor.setSoftWrapped(true)
|
|
jasmine.attachToDOM(element)
|
|
|
|
element.style.width = 200 + 'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(queryOnScreenLineElements(element).length).toBe(24)
|
|
})
|
|
|
|
it('decorates the line numbers of folded lines', async () => {
|
|
const { component, editor } = buildComponent()
|
|
editor.foldBufferRow(1)
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('folded')
|
|
).toBe(true)
|
|
})
|
|
|
|
it('makes lines at least as wide as the scrollContainer', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const { scrollContainer } = component.refs
|
|
editor.setText('a')
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(element.querySelector('.line').offsetWidth).toBe(
|
|
scrollContainer.offsetWidth - verticalScrollbarWidth
|
|
)
|
|
})
|
|
|
|
it('resizes based on the content when the autoHeight and/or autoWidth options are true', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
autoHeight: true,
|
|
autoWidth: true
|
|
})
|
|
const editorPadding = 3
|
|
element.style.padding = editorPadding + 'px'
|
|
const initialWidth = element.offsetWidth
|
|
const initialHeight = element.offsetHeight
|
|
expect(initialWidth).toBe(
|
|
component.getGutterContainerWidth() +
|
|
component.getContentWidth() +
|
|
verticalScrollbarWidth +
|
|
2 * editorPadding
|
|
)
|
|
expect(initialHeight).toBe(
|
|
component.getContentHeight() +
|
|
horizontalScrollbarHeight +
|
|
2 * editorPadding
|
|
)
|
|
|
|
// When autoWidth is enabled, width adjusts to content
|
|
editor.setCursorScreenPosition([6, Infinity])
|
|
editor.insertText('x'.repeat(50))
|
|
await component.getNextUpdatePromise()
|
|
expect(element.offsetWidth).toBe(
|
|
component.getGutterContainerWidth() +
|
|
component.getContentWidth() +
|
|
verticalScrollbarWidth +
|
|
2 * editorPadding
|
|
)
|
|
expect(element.offsetWidth).toBeGreaterThan(initialWidth)
|
|
|
|
// When autoHeight is enabled, height adjusts to content
|
|
editor.insertText('\n'.repeat(5))
|
|
await component.getNextUpdatePromise()
|
|
expect(element.offsetHeight).toBe(
|
|
component.getContentHeight() +
|
|
horizontalScrollbarHeight +
|
|
2 * editorPadding
|
|
)
|
|
expect(element.offsetHeight).toBeGreaterThan(initialHeight)
|
|
})
|
|
|
|
it('does not render the line number gutter at all if the isLineNumberGutterVisible parameter is false', () => {
|
|
const { element } = buildComponent({
|
|
lineNumberGutterVisible: false
|
|
})
|
|
expect(element.querySelector('.line-number')).toBe(null)
|
|
})
|
|
|
|
it('does not render the line numbers but still renders the line number gutter if showLineNumbers is false', async () => {
|
|
function checkScrollContainerLeft (component) {
|
|
const { scrollContainer, gutterContainer } = component.refs
|
|
expect(scrollContainer.getBoundingClientRect().left).toBe(
|
|
Math.round(gutterContainer.element.getBoundingClientRect().right)
|
|
)
|
|
}
|
|
|
|
const { component, element, editor } = buildComponent({
|
|
showLineNumbers: false
|
|
})
|
|
expect(
|
|
Array.from(element.querySelectorAll('.line-number')).every(
|
|
e => e.textContent === ''
|
|
)
|
|
).toBe(true)
|
|
checkScrollContainerLeft(component)
|
|
|
|
await editor.update({ showLineNumbers: true })
|
|
expect(
|
|
Array.from(element.querySelectorAll('.line-number')).map(
|
|
e => e.textContent
|
|
)
|
|
).toEqual([
|
|
'00',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'13'
|
|
])
|
|
checkScrollContainerLeft(component)
|
|
|
|
await editor.update({ showLineNumbers: false })
|
|
expect(
|
|
Array.from(element.querySelectorAll('.line-number')).every(
|
|
e => e.textContent === ''
|
|
)
|
|
).toBe(true)
|
|
checkScrollContainerLeft(component)
|
|
})
|
|
|
|
it('supports the placeholderText parameter', () => {
|
|
const placeholderText = 'Placeholder Test'
|
|
const { element } = buildComponent({ placeholderText, text: '' })
|
|
expect(element.textContent).toContain(placeholderText)
|
|
})
|
|
|
|
it('adds the data-grammar attribute and updates it when the grammar changes', async () => {
|
|
await atom.packages.activatePackage('language-javascript')
|
|
|
|
const { editor, element, component } = buildComponent()
|
|
expect(element.dataset.grammar).toBe('text plain null-grammar')
|
|
|
|
atom.grammars.assignLanguageMode(editor.getBuffer(), 'source.js')
|
|
await component.getNextUpdatePromise()
|
|
expect(element.dataset.grammar).toBe('source js')
|
|
})
|
|
|
|
it('adds the data-encoding attribute and updates it when the encoding changes', async () => {
|
|
const { editor, element, component } = buildComponent()
|
|
expect(element.dataset.encoding).toBe('utf8')
|
|
|
|
editor.setEncoding('ascii')
|
|
await component.getNextUpdatePromise()
|
|
expect(element.dataset.encoding).toBe('ascii')
|
|
})
|
|
|
|
it('adds the has-selection class when the editor has a non-empty selection', async () => {
|
|
const { editor, element, component } = buildComponent()
|
|
expect(element.classList.contains('has-selection')).toBe(false)
|
|
|
|
editor.setSelectedBufferRanges([[[0, 0], [0, 0]], [[1, 0], [1, 10]]])
|
|
await component.getNextUpdatePromise()
|
|
expect(element.classList.contains('has-selection')).toBe(true)
|
|
|
|
editor.setSelectedBufferRanges([[[0, 0], [0, 0]], [[1, 0], [1, 0]]])
|
|
await component.getNextUpdatePromise()
|
|
expect(element.classList.contains('has-selection')).toBe(false)
|
|
})
|
|
|
|
it('assigns buffer-row and screen-row to each line number as data fields', async () => {
|
|
const { editor, element, component } = buildComponent()
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
await setEditorWidthInCharacters(component, 40)
|
|
{
|
|
const bufferRows = queryOnScreenLineNumberElements(element).map(
|
|
e => e.dataset.bufferRow
|
|
)
|
|
const screenRows = queryOnScreenLineNumberElements(element).map(
|
|
e => e.dataset.screenRow
|
|
)
|
|
expect(bufferRows).toEqual([
|
|
'0',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'6',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'8',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'11',
|
|
'12'
|
|
])
|
|
expect(screenRows).toEqual([
|
|
'0',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'13',
|
|
'14',
|
|
'15',
|
|
'16',
|
|
'17',
|
|
'18'
|
|
])
|
|
}
|
|
|
|
editor.getBuffer().insert([2, 0], '\n')
|
|
await component.getNextUpdatePromise()
|
|
{
|
|
const bufferRows = queryOnScreenLineNumberElements(element).map(
|
|
e => e.dataset.bufferRow
|
|
)
|
|
const screenRows = queryOnScreenLineNumberElements(element).map(
|
|
e => e.dataset.screenRow
|
|
)
|
|
expect(bufferRows).toEqual([
|
|
'0',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'7',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'9',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'12',
|
|
'13'
|
|
])
|
|
expect(screenRows).toEqual([
|
|
'0',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'13',
|
|
'14',
|
|
'15',
|
|
'16',
|
|
'17',
|
|
'18',
|
|
'19'
|
|
])
|
|
}
|
|
})
|
|
|
|
it('does not blow away class names added to the element by packages when changing the class name', async () => {
|
|
assertDocumentFocused()
|
|
const { component, element } = buildComponent()
|
|
element.classList.add('a', 'b')
|
|
expect(element.className).toBe('editor a b')
|
|
element.focus()
|
|
await component.getNextUpdatePromise()
|
|
expect(element.className).toBe('editor a b is-focused')
|
|
document.body.focus()
|
|
await component.getNextUpdatePromise()
|
|
expect(element.className).toBe('editor a b')
|
|
})
|
|
|
|
it('does not blow away class names managed by the component when packages change the element class name', async () => {
|
|
assertDocumentFocused()
|
|
const { component, element } = buildComponent({ mini: true })
|
|
element.classList.add('a', 'b')
|
|
element.focus()
|
|
await component.getNextUpdatePromise()
|
|
expect(element.className).toBe('editor mini a b is-focused')
|
|
element.className = 'a c d'
|
|
await component.getNextUpdatePromise()
|
|
expect(element.className).toBe('a c d editor is-focused mini')
|
|
})
|
|
|
|
it('ignores resize events when the editor is hidden', async () => {
|
|
const { component, element } = buildComponent({
|
|
autoHeight: false
|
|
})
|
|
element.style.height = 5 * component.getLineHeight() + 'px'
|
|
await component.getNextUpdatePromise()
|
|
const originalClientContainerHeight = component.getClientContainerHeight()
|
|
const originalGutterContainerWidth = component.getGutterContainerWidth()
|
|
const originalLineNumberGutterWidth = component.getLineNumberGutterWidth()
|
|
expect(originalClientContainerHeight).toBeGreaterThan(0)
|
|
expect(originalGutterContainerWidth).toBeGreaterThan(0)
|
|
expect(originalLineNumberGutterWidth).toBeGreaterThan(0)
|
|
|
|
element.style.display = 'none'
|
|
// In production, resize events are triggered before the intersection
|
|
// observer detects the editor's visibility has changed. In tests, we are
|
|
// unable to reproduce this scenario and so we simulate them.
|
|
expect(component.visible).toBe(true)
|
|
component.didResize()
|
|
component.didResizeGutterContainer()
|
|
expect(component.getClientContainerHeight()).toBe(
|
|
originalClientContainerHeight
|
|
)
|
|
expect(component.getGutterContainerWidth()).toBe(
|
|
originalGutterContainerWidth
|
|
)
|
|
expect(component.getLineNumberGutterWidth()).toBe(
|
|
originalLineNumberGutterWidth
|
|
)
|
|
|
|
// Ensure measurements stay the same after receiving the intersection
|
|
// observer events.
|
|
await conditionPromise(() => !component.visible)
|
|
expect(component.getClientContainerHeight()).toBe(
|
|
originalClientContainerHeight
|
|
)
|
|
expect(component.getGutterContainerWidth()).toBe(
|
|
originalGutterContainerWidth
|
|
)
|
|
expect(component.getLineNumberGutterWidth()).toBe(
|
|
originalLineNumberGutterWidth
|
|
)
|
|
})
|
|
|
|
describe('randomized tests', () => {
|
|
let originalTimeout
|
|
|
|
beforeEach(() => {
|
|
originalTimeout = jasmine.getEnv().defaultTimeoutInterval
|
|
jasmine.getEnv().defaultTimeoutInterval = 60 * 1000
|
|
})
|
|
|
|
afterEach(() => {
|
|
jasmine.getEnv().defaultTimeoutInterval = originalTimeout
|
|
})
|
|
|
|
it('renders the visible rows correctly after randomly mutating the editor', async () => {
|
|
const initialSeed = Date.now()
|
|
for (var i = 0; i < 20; i++) {
|
|
let seed = initialSeed + i
|
|
// seed = 1520247533732
|
|
const failureMessage = 'Randomized test failed with seed: ' + seed
|
|
const random = Random(seed)
|
|
|
|
const rowsPerTile = random.intBetween(1, 6)
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile,
|
|
autoHeight: false
|
|
})
|
|
editor.setSoftWrapped(Boolean(random(2)))
|
|
await setEditorWidthInCharacters(component, random(20))
|
|
await setEditorHeightInLines(component, random(10))
|
|
|
|
element.style.fontSize = random(20) + 'px'
|
|
element.style.lineHeight = random.floatBetween(0.1, 2.0)
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
|
|
element.focus()
|
|
|
|
for (var j = 0; j < 5; j++) {
|
|
const k = random(100)
|
|
const range = getRandomBufferRange(random, editor.buffer)
|
|
|
|
if (k < 10) {
|
|
editor.setSoftWrapped(!editor.isSoftWrapped())
|
|
} else if (k < 15) {
|
|
if (random(2)) setEditorWidthInCharacters(component, random(20))
|
|
if (random(2)) setEditorHeightInLines(component, random(10))
|
|
} else if (k < 40) {
|
|
editor.setSelectedBufferRange(range)
|
|
editor.backspace()
|
|
} else if (k < 80) {
|
|
const linesToInsert = buildRandomLines(random, 5)
|
|
editor.setCursorBufferPosition(range.start)
|
|
editor.insertText(linesToInsert)
|
|
} else if (k < 90) {
|
|
if (random(2)) {
|
|
editor.foldBufferRange(range)
|
|
} else {
|
|
editor.destroyFoldsIntersectingBufferRange(range)
|
|
}
|
|
} else if (k < 95) {
|
|
editor.setSelectedBufferRange(range)
|
|
} else {
|
|
if (random(2)) {
|
|
component.setScrollTop(random(component.getScrollHeight()))
|
|
}
|
|
if (random(2)) {
|
|
component.setScrollLeft(random(component.getScrollWidth()))
|
|
}
|
|
}
|
|
|
|
component.scheduleUpdate()
|
|
await component.getNextUpdatePromise()
|
|
|
|
const renderedLines = queryOnScreenLineElements(element).sort(
|
|
(a, b) => a.dataset.screenRow - b.dataset.screenRow
|
|
)
|
|
const renderedLineNumbers = queryOnScreenLineNumberElements(
|
|
element
|
|
).sort((a, b) => a.dataset.screenRow - b.dataset.screenRow)
|
|
const renderedStartRow = component.getRenderedStartRow()
|
|
const expectedLines = editor.displayLayer.getScreenLines(
|
|
renderedStartRow,
|
|
component.getRenderedEndRow()
|
|
)
|
|
|
|
expect(renderedLines.length).toBe(
|
|
expectedLines.length,
|
|
failureMessage
|
|
)
|
|
expect(renderedLineNumbers.length).toBe(
|
|
expectedLines.length,
|
|
failureMessage
|
|
)
|
|
for (let k = 0; k < renderedLines.length; k++) {
|
|
const expectedLine = expectedLines[k]
|
|
const expectedText = expectedLine.lineText || ' '
|
|
|
|
const renderedLine = renderedLines[k]
|
|
const renderedLineNumber = renderedLineNumbers[k]
|
|
let renderedText = renderedLine.textContent
|
|
// We append zero width NBSPs after folds at the end of the
|
|
// line in order to support measurement.
|
|
if (expectedText.endsWith(editor.displayLayer.foldCharacter)) {
|
|
renderedText = renderedText.substring(
|
|
0,
|
|
renderedText.length - 1
|
|
)
|
|
}
|
|
|
|
expect(renderedText).toBe(expectedText, failureMessage)
|
|
expect(parseInt(renderedLine.dataset.screenRow)).toBe(
|
|
renderedStartRow + k,
|
|
failureMessage
|
|
)
|
|
expect(parseInt(renderedLineNumber.dataset.screenRow)).toBe(
|
|
renderedStartRow + k,
|
|
failureMessage
|
|
)
|
|
}
|
|
}
|
|
|
|
element.remove()
|
|
editor.destroy()
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('mini editors', () => {
|
|
it('adds the mini attribute and class even when the element is not attached', () => {
|
|
{
|
|
const { element } = buildComponent({ mini: true })
|
|
expect(element.hasAttribute('mini')).toBe(true)
|
|
expect(element.classList.contains('mini')).toBe(true)
|
|
}
|
|
|
|
{
|
|
const { element } = buildComponent({
|
|
mini: true,
|
|
attach: false
|
|
})
|
|
expect(element.hasAttribute('mini')).toBe(true)
|
|
expect(element.classList.contains('mini')).toBe(true)
|
|
}
|
|
})
|
|
|
|
it('does not render the gutter container', () => {
|
|
const { component, element } = buildComponent({ mini: true })
|
|
expect(component.refs.gutterContainer).toBeUndefined()
|
|
expect(element.querySelector('gutter-container')).toBeNull()
|
|
})
|
|
|
|
it('does not render line decorations for the cursor line', async () => {
|
|
const { component, element, editor } = buildComponent({ mini: true })
|
|
expect(
|
|
element.querySelector('.line').classList.contains('cursor-line')
|
|
).toBe(false)
|
|
|
|
editor.update({ mini: false })
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
element.querySelector('.line').classList.contains('cursor-line')
|
|
).toBe(true)
|
|
|
|
editor.update({ mini: true })
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
element.querySelector('.line').classList.contains('cursor-line')
|
|
).toBe(false)
|
|
})
|
|
|
|
it('does not render scrollbars', async () => {
|
|
const { component, editor } = buildComponent({
|
|
mini: true,
|
|
autoHeight: false
|
|
})
|
|
await setEditorWidthInCharacters(component, 10)
|
|
|
|
editor.setText('x'.repeat(20) + 'y'.repeat(20))
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(component.canScrollVertically()).toBe(false)
|
|
expect(component.canScrollHorizontally()).toBe(false)
|
|
expect(component.refs.horizontalScrollbar).toBeUndefined()
|
|
expect(component.refs.verticalScrollbar).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('focus', () => {
|
|
beforeEach(() => {
|
|
assertDocumentFocused()
|
|
})
|
|
|
|
it('focuses the hidden input element and adds the is-focused class when focused', async () => {
|
|
const { component, element } = buildComponent()
|
|
const { hiddenInput } = component.refs.cursorsAndInput.refs
|
|
|
|
expect(document.activeElement).not.toBe(hiddenInput)
|
|
element.focus()
|
|
expect(document.activeElement).toBe(hiddenInput)
|
|
await component.getNextUpdatePromise()
|
|
expect(element.classList.contains('is-focused')).toBe(true)
|
|
|
|
element.focus() // focusing back to the element does not blur
|
|
expect(document.activeElement).toBe(hiddenInput)
|
|
expect(element.classList.contains('is-focused')).toBe(true)
|
|
|
|
document.body.focus()
|
|
expect(document.activeElement).not.toBe(hiddenInput)
|
|
await component.getNextUpdatePromise()
|
|
expect(element.classList.contains('is-focused')).toBe(false)
|
|
})
|
|
|
|
it('updates the component when the hidden input is focused directly', async () => {
|
|
const { component, element } = buildComponent()
|
|
const { hiddenInput } = component.refs.cursorsAndInput.refs
|
|
expect(element.classList.contains('is-focused')).toBe(false)
|
|
expect(document.activeElement).not.toBe(hiddenInput)
|
|
|
|
hiddenInput.focus()
|
|
await component.getNextUpdatePromise()
|
|
expect(element.classList.contains('is-focused')).toBe(true)
|
|
})
|
|
|
|
it('gracefully handles a focus event that occurs prior to the attachedCallback of the element', () => {
|
|
const { component, element } = buildComponent({ attach: false })
|
|
const parent = document.createElement(
|
|
'text-editor-component-test-element'
|
|
)
|
|
parent.appendChild(element)
|
|
parent.didAttach = () => element.focus()
|
|
jasmine.attachToDOM(parent)
|
|
expect(document.activeElement).toBe(
|
|
component.refs.cursorsAndInput.refs.hiddenInput
|
|
)
|
|
})
|
|
|
|
it('gracefully handles a focus event that occurs prior to detecting the element has become visible', async () => {
|
|
const { component, element } = buildComponent({ attach: false })
|
|
element.style.display = 'none'
|
|
jasmine.attachToDOM(element)
|
|
element.style.display = 'block'
|
|
element.focus()
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(document.activeElement).toBe(
|
|
component.refs.cursorsAndInput.refs.hiddenInput
|
|
)
|
|
})
|
|
|
|
it('emits blur events only when focus shifts to something other than the editor itself or its hidden input', () => {
|
|
const { element } = buildComponent()
|
|
|
|
let blurEventCount = 0
|
|
element.addEventListener('blur', () => blurEventCount++)
|
|
|
|
element.focus()
|
|
expect(blurEventCount).toBe(0)
|
|
element.focus()
|
|
expect(blurEventCount).toBe(0)
|
|
document.body.focus()
|
|
expect(blurEventCount).toBe(1)
|
|
})
|
|
})
|
|
|
|
describe('autoscroll', () => {
|
|
it('automatically scrolls vertically when the requested range is within the vertical scroll margin of the top or bottom', async () => {
|
|
const { component, editor } = buildComponent({
|
|
height: 120 + horizontalScrollbarHeight
|
|
})
|
|
expect(component.getLastVisibleRow()).toBe(7)
|
|
|
|
editor.scrollToScreenRange([[4, 0], [6, 0]])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(6 + 1 + editor.verticalScrollMargin) * component.getLineHeight()
|
|
)
|
|
|
|
editor.scrollToScreenPosition([8, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(8 + 1 + editor.verticalScrollMargin) *
|
|
component.measurements.lineHeight
|
|
)
|
|
|
|
editor.scrollToScreenPosition([3, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(
|
|
(3 - editor.verticalScrollMargin) * component.measurements.lineHeight
|
|
)
|
|
|
|
editor.scrollToScreenPosition([2, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(0)
|
|
})
|
|
|
|
it('does not vertically autoscroll by more than half of the visible lines if the editor is shorter than twice the scroll margin', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
autoHeight: false
|
|
})
|
|
element.style.height =
|
|
5.5 * component.measurements.lineHeight +
|
|
horizontalScrollbarHeight +
|
|
'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getLastVisibleRow()).toBe(5)
|
|
const scrollMarginInLines = 2
|
|
|
|
editor.scrollToScreenPosition([6, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(6 + 1 + scrollMarginInLines) * component.measurements.lineHeight
|
|
)
|
|
|
|
editor.scrollToScreenPosition([6, 4])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(6 + 1 + scrollMarginInLines) * component.measurements.lineHeight
|
|
)
|
|
|
|
editor.scrollToScreenRange([[4, 4], [6, 4]])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(
|
|
(4 - scrollMarginInLines) * component.measurements.lineHeight
|
|
)
|
|
|
|
editor.scrollToScreenRange([[4, 4], [6, 4]], { reversed: false })
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(6 + 1 + scrollMarginInLines) * component.measurements.lineHeight
|
|
)
|
|
})
|
|
|
|
it('autoscrolls the given range to the center of the screen if the `center` option is true', async () => {
|
|
const { component, editor } = buildComponent({ height: 50 })
|
|
expect(component.getLastVisibleRow()).toBe(2)
|
|
|
|
editor.scrollToScreenRange([[4, 0], [6, 0]], { center: true })
|
|
await component.getNextUpdatePromise()
|
|
|
|
const actualScrollCenter =
|
|
(component.getScrollTop() + component.getScrollBottom()) / 2
|
|
const expectedScrollCenter = ((4 + 7) / 2) * component.getLineHeight()
|
|
expect(actualScrollCenter).toBeCloseTo(expectedScrollCenter, 0)
|
|
})
|
|
|
|
it('automatically scrolls horizontally when the requested range is within the horizontal scroll margin of the right edge of the gutter or right edge of the scroll container', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
element.style.width =
|
|
component.getGutterContainerWidth() +
|
|
3 *
|
|
editor.horizontalScrollMargin *
|
|
component.measurements.baseCharacterWidth +
|
|
'px'
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.scrollToScreenRange([[1, 12], [2, 28]])
|
|
await component.getNextUpdatePromise()
|
|
let expectedScrollLeft =
|
|
clientLeftForCharacter(component, 1, 12) -
|
|
lineNodeForScreenRow(component, 1).getBoundingClientRect().left -
|
|
editor.horizontalScrollMargin *
|
|
component.measurements.baseCharacterWidth
|
|
expect(component.getScrollLeft()).toBeCloseTo(expectedScrollLeft, 0)
|
|
|
|
editor.scrollToScreenRange([[1, 12], [2, 28]], { reversed: false })
|
|
await component.getNextUpdatePromise()
|
|
expectedScrollLeft =
|
|
component.getGutterContainerWidth() +
|
|
clientLeftForCharacter(component, 2, 28) -
|
|
lineNodeForScreenRow(component, 2).getBoundingClientRect().left +
|
|
editor.horizontalScrollMargin *
|
|
component.measurements.baseCharacterWidth -
|
|
component.getScrollContainerClientWidth()
|
|
expect(component.getScrollLeft()).toBeCloseTo(expectedScrollLeft, 0)
|
|
})
|
|
|
|
it('does not horizontally autoscroll by more than half of the visible "base-width" characters if the editor is narrower than twice the scroll margin', async () => {
|
|
const { component, editor } = buildComponent({ autoHeight: false })
|
|
await setEditorWidthInCharacters(
|
|
component,
|
|
1.5 * editor.horizontalScrollMargin
|
|
)
|
|
const editorWidthInChars =
|
|
component.getScrollContainerClientWidth() /
|
|
component.getBaseCharacterWidth()
|
|
expect(Math.round(editorWidthInChars)).toBe(9)
|
|
|
|
editor.scrollToScreenRange([[6, 10], [6, 15]])
|
|
await component.getNextUpdatePromise()
|
|
let expectedScrollLeft = Math.floor(
|
|
clientLeftForCharacter(component, 6, 10) -
|
|
lineNodeForScreenRow(component, 1).getBoundingClientRect().left -
|
|
Math.floor((editorWidthInChars - 1) / 2) *
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
})
|
|
|
|
it('correctly autoscrolls after inserting a line that exceeds the current content width', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
element.style.width =
|
|
component.getGutterContainerWidth() + component.getContentWidth() + 'px'
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.setCursorScreenPosition([0, Infinity])
|
|
editor.insertText('x'.repeat(100))
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(component.getScrollLeft()).toBe(
|
|
component.getScrollWidth() - component.getScrollContainerClientWidth()
|
|
)
|
|
})
|
|
|
|
it('does not try to measure lines that do not exist when the animation frame is delivered', async () => {
|
|
const { component, editor } = buildComponent({
|
|
autoHeight: false,
|
|
height: 30,
|
|
rowsPerTile: 2
|
|
})
|
|
editor.scrollToBufferPosition([11, 5])
|
|
editor.getBuffer().deleteRows(11, 12)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollBottom()).toBe(
|
|
(10 + 1) * component.measurements.lineHeight
|
|
)
|
|
})
|
|
|
|
it('accounts for the presence of horizontal scrollbars that appear during the same frame as the autoscroll', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
autoHeight: false
|
|
})
|
|
element.style.height = component.getContentHeight() / 2 + 'px'
|
|
element.style.width = component.getScrollWidth() + 'px'
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.setCursorScreenPosition([10, Infinity])
|
|
editor.insertText('\n\n' + 'x'.repeat(100))
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(component.getScrollTop()).toBe(
|
|
component.getScrollHeight() - component.getScrollContainerClientHeight()
|
|
)
|
|
expect(component.getScrollLeft()).toBe(
|
|
component.getScrollWidth() - component.getScrollContainerClientWidth()
|
|
)
|
|
|
|
// Scrolling to the top should not throw an error. This failed
|
|
// previously due to horizontalPositionsToMeasure not being empty after
|
|
// autoscrolling vertically to account for the horizontal scrollbar.
|
|
spyOn(window, 'onerror')
|
|
await setScrollTop(component, 0)
|
|
expect(window.onerror).not.toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
describe('logical scroll positions', () => {
|
|
it('allows the scrollTop to be changed and queried in terms of rows via setScrollTopRow and getScrollTopRow', () => {
|
|
const { component, element } = buildComponent({
|
|
attach: false,
|
|
height: 80
|
|
})
|
|
|
|
// Caches the scrollTopRow if we don't have measurements
|
|
component.setScrollTopRow(6)
|
|
expect(component.getScrollTopRow()).toBe(6)
|
|
|
|
// Assigns the scrollTop based on the logical position when attached
|
|
jasmine.attachToDOM(element)
|
|
const expectedScrollTop = Math.round(6 * component.getLineHeight())
|
|
expect(component.getScrollTopRow()).toBe(6)
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
|
|
// Allows the scrollTopRow to be updated while attached
|
|
component.setScrollTopRow(4)
|
|
expect(component.getScrollTopRow()).toBe(4)
|
|
expect(component.getScrollTop()).toBe(
|
|
Math.round(4 * component.getLineHeight())
|
|
)
|
|
|
|
// Preserves the scrollTopRow when detached
|
|
element.remove()
|
|
expect(component.getScrollTopRow()).toBe(4)
|
|
expect(component.getScrollTop()).toBe(
|
|
Math.round(4 * component.getLineHeight())
|
|
)
|
|
|
|
component.setScrollTopRow(6)
|
|
expect(component.getScrollTopRow()).toBe(6)
|
|
expect(component.getScrollTop()).toBe(
|
|
Math.round(6 * component.getLineHeight())
|
|
)
|
|
|
|
jasmine.attachToDOM(element)
|
|
element.style.height = '60px'
|
|
expect(component.getScrollTopRow()).toBe(6)
|
|
expect(component.getScrollTop()).toBe(
|
|
Math.round(6 * component.getLineHeight())
|
|
)
|
|
})
|
|
|
|
it('allows the scrollLeft to be changed and queried in terms of base character columns via setScrollLeftColumn and getScrollLeftColumn', () => {
|
|
const { component, element } = buildComponent({
|
|
attach: false,
|
|
width: 80
|
|
})
|
|
|
|
// Caches the scrollTopRow if we don't have measurements
|
|
component.setScrollLeftColumn(2)
|
|
expect(component.getScrollLeftColumn()).toBe(2)
|
|
|
|
// Assigns the scrollTop based on the logical position when attached
|
|
jasmine.attachToDOM(element)
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
2 * component.getBaseCharacterWidth(),
|
|
0
|
|
)
|
|
|
|
// Allows the scrollTopRow to be updated while attached
|
|
component.setScrollLeftColumn(4)
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
4 * component.getBaseCharacterWidth(),
|
|
0
|
|
)
|
|
|
|
// Preserves the scrollTopRow when detached
|
|
element.remove()
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
4 * component.getBaseCharacterWidth(),
|
|
0
|
|
)
|
|
|
|
component.setScrollLeftColumn(6)
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
6 * component.getBaseCharacterWidth(),
|
|
0
|
|
)
|
|
|
|
jasmine.attachToDOM(element)
|
|
element.style.width = '60px'
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
6 * component.getBaseCharacterWidth(),
|
|
0
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('scrolling via the mouse wheel', () => {
|
|
it('scrolls vertically or horizontally depending on whether deltaX or deltaY is larger', () => {
|
|
const scrollSensitivity = 30
|
|
const { component } = buildComponent({
|
|
height: 50,
|
|
width: 50,
|
|
scrollSensitivity
|
|
})
|
|
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
const expectedScrollLeft = component.getScrollLeft()
|
|
component.didMouseWheel({ wheelDeltaX: -5, wheelDeltaY: -20 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`
|
|
)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop =
|
|
component.getScrollTop() - 10 * (scrollSensitivity / 100)
|
|
const expectedScrollLeft = component.getScrollLeft()
|
|
component.didMouseWheel({ wheelDeltaX: -5, wheelDeltaY: 10 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`
|
|
)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop = component.getScrollTop()
|
|
const expectedScrollLeft = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({ wheelDeltaX: -20, wheelDeltaY: 10 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`
|
|
)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop = component.getScrollTop()
|
|
const expectedScrollLeft =
|
|
component.getScrollLeft() - 10 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({ wheelDeltaX: 10, wheelDeltaY: -8 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`
|
|
)
|
|
}
|
|
})
|
|
|
|
it('inverts deltaX and deltaY when holding shift on Windows and Linux', async () => {
|
|
const scrollSensitivity = 50
|
|
const { component } = buildComponent({
|
|
height: 50,
|
|
width: 50,
|
|
scrollSensitivity
|
|
})
|
|
|
|
component.props.platform = 'linux'
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({ wheelDeltaX: 0, wheelDeltaY: -20 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollLeft = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -20,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(-${expectedScrollLeft}px, 0px)`
|
|
)
|
|
await setScrollLeft(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: -20,
|
|
wheelDeltaY: 0,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
component.props.platform = 'win32'
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({ wheelDeltaX: 0, wheelDeltaY: -20 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollLeft = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -20,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(-${expectedScrollLeft}px, 0px)`
|
|
)
|
|
await setScrollLeft(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: -20,
|
|
wheelDeltaY: 0,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
component.props.platform = 'darwin'
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({ wheelDeltaX: 0, wheelDeltaY: -20 })
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollTop = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -20,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollTop()).toBe(expectedScrollTop)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(0px, -${expectedScrollTop}px)`
|
|
)
|
|
await setScrollTop(component, 0)
|
|
}
|
|
|
|
{
|
|
const expectedScrollLeft = 20 * (scrollSensitivity / 100)
|
|
component.didMouseWheel({
|
|
wheelDeltaX: -20,
|
|
wheelDeltaY: 0,
|
|
shiftKey: true
|
|
})
|
|
expect(component.getScrollLeft()).toBe(expectedScrollLeft)
|
|
expect(component.refs.content.style.transform).toBe(
|
|
`translate(-${expectedScrollLeft}px, 0px)`
|
|
)
|
|
await setScrollLeft(component, 0)
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('scrolling via the API', () => {
|
|
it('ignores scroll requests to NaN, null or undefined positions', async () => {
|
|
const { component } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
await setEditorWidthInCharacters(component, 10)
|
|
|
|
const initialScrollTop = Math.round(2 * component.getLineHeight())
|
|
const initialScrollLeft = Math.round(
|
|
5 * component.getBaseCharacterWidth()
|
|
)
|
|
setScrollTop(component, initialScrollTop)
|
|
setScrollLeft(component, initialScrollLeft)
|
|
await component.getNextUpdatePromise()
|
|
|
|
setScrollTop(component, NaN)
|
|
setScrollLeft(component, NaN)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(initialScrollTop)
|
|
expect(component.getScrollLeft()).toBe(initialScrollLeft)
|
|
|
|
setScrollTop(component, null)
|
|
setScrollLeft(component, null)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(initialScrollTop)
|
|
expect(component.getScrollLeft()).toBe(initialScrollLeft)
|
|
|
|
setScrollTop(component, undefined)
|
|
setScrollLeft(component, undefined)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTop()).toBe(initialScrollTop)
|
|
expect(component.getScrollLeft()).toBe(initialScrollLeft)
|
|
})
|
|
})
|
|
|
|
describe('line and line number decorations', () => {
|
|
it('adds decoration classes on screen lines spanned by decorated markers', async () => {
|
|
const { component, editor } = buildComponent({
|
|
softWrapped: true
|
|
})
|
|
await setEditorWidthInCharacters(component, 55)
|
|
expect(lineNodeForScreenRow(component, 3).textContent).toBe(
|
|
' var pivot = items.shift(), current, left = [], '
|
|
)
|
|
expect(lineNodeForScreenRow(component, 4).textContent).toBe(
|
|
' right = [];'
|
|
)
|
|
|
|
const marker1 = editor.markScreenRange([[1, 10], [3, 10]])
|
|
const layer = editor.addMarkerLayer()
|
|
layer.markScreenPosition([5, 0])
|
|
layer.markScreenPosition([8, 0])
|
|
const marker4 = layer.markScreenPosition([10, 0])
|
|
editor.decorateMarker(marker1, {
|
|
type: ['line', 'line-number'],
|
|
class: 'a'
|
|
})
|
|
const layerDecoration = editor.decorateMarkerLayer(layer, {
|
|
type: ['line', 'line-number'],
|
|
class: 'b'
|
|
})
|
|
layerDecoration.setPropertiesForMarker(marker4, {
|
|
type: 'line',
|
|
class: 'c'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 3).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 4).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 5).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 8).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 10).classList.contains('b')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 10).classList.contains('c')).toBe(
|
|
true
|
|
)
|
|
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 2).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 3).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 4).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 5).classList.contains('b')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 8).classList.contains('b')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 10).classList.contains('b')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 10).classList.contains('c')
|
|
).toBe(false)
|
|
|
|
marker1.setScreenRange([[5, 0], [8, 0]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 3).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 4).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 5).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 5).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 6).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 7).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 8).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 8).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 2).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 3).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 4).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 5).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 5).classList.contains('b')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 6).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 7).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 8).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 8).classList.contains('b')
|
|
).toBe(true)
|
|
})
|
|
|
|
it('honors the onlyEmpty and onlyNonEmpty decoration options', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const marker = editor.markScreenPosition([1, 0])
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'a',
|
|
onlyEmpty: true
|
|
})
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'b',
|
|
onlyNonEmpty: true
|
|
})
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'c'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('b')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('c')).toBe(
|
|
true
|
|
)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('a')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('b')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('c')
|
|
).toBe(true)
|
|
|
|
marker.setScreenRange([[1, 0], [2, 4]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('c')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('c')).toBe(
|
|
true
|
|
)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('b')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('c')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 2).classList.contains('b')
|
|
).toBe(true)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 2).classList.contains('c')
|
|
).toBe(true)
|
|
})
|
|
|
|
it('honors the onlyHead option', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const marker = editor.markScreenRange([[1, 4], [3, 4]])
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'a',
|
|
onlyHead: true
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
expect(lineNodeForScreenRow(component, 3).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 1).classList.contains('a')
|
|
).toBe(false)
|
|
expect(
|
|
lineNumberNodeForScreenRow(component, 3).classList.contains('a')
|
|
).toBe(true)
|
|
})
|
|
|
|
it('only decorates the last row of non-empty ranges that end at column 0 if omitEmptyLastRow is false', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const marker = editor.markScreenRange([[1, 0], [3, 0]])
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'a'
|
|
})
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'b',
|
|
omitEmptyLastRow: false
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 3).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
|
|
expect(lineNodeForScreenRow(component, 1).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
expect(lineNodeForScreenRow(component, 3).classList.contains('b')).toBe(
|
|
true
|
|
)
|
|
})
|
|
|
|
it('does not decorate invalidated markers', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const marker = editor.markScreenRange([[1, 0], [3, 0]], {
|
|
invalidate: 'touch'
|
|
})
|
|
editor.decorateMarker(marker, {
|
|
type: ['line', 'line-number'],
|
|
class: 'a'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('a')).toBe(
|
|
true
|
|
)
|
|
|
|
editor.getBuffer().insert([2, 0], 'x')
|
|
expect(marker.isValid()).toBe(false)
|
|
await component.getNextUpdatePromise()
|
|
expect(lineNodeForScreenRow(component, 2).classList.contains('a')).toBe(
|
|
false
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('highlight decorations', () => {
|
|
it('renders single-line highlights', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const marker = editor.markScreenRange([[1, 2], [1, 10]])
|
|
editor.decorateMarker(marker, { type: 'highlight', class: 'a' })
|
|
await component.getNextUpdatePromise()
|
|
|
|
{
|
|
const regions = element.querySelectorAll('.highlight.a .region.a')
|
|
expect(regions.length).toBe(1)
|
|
const regionRect = regions[0].getBoundingClientRect()
|
|
expect(regionRect.top).toBe(
|
|
lineNodeForScreenRow(component, 1).getBoundingClientRect().top
|
|
)
|
|
expect(Math.round(regionRect.left)).toBe(
|
|
clientLeftForCharacter(component, 1, 2)
|
|
)
|
|
expect(Math.round(regionRect.right)).toBe(
|
|
clientLeftForCharacter(component, 1, 10)
|
|
)
|
|
}
|
|
|
|
marker.setScreenRange([[1, 4], [1, 8]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
{
|
|
const regions = element.querySelectorAll('.highlight.a .region.a')
|
|
expect(regions.length).toBe(1)
|
|
const regionRect = regions[0].getBoundingClientRect()
|
|
expect(regionRect.top).toBe(
|
|
lineNodeForScreenRow(component, 1).getBoundingClientRect().top
|
|
)
|
|
expect(regionRect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 1).getBoundingClientRect().bottom
|
|
)
|
|
expect(Math.round(regionRect.left)).toBe(
|
|
clientLeftForCharacter(component, 1, 4)
|
|
)
|
|
expect(Math.round(regionRect.right)).toBe(
|
|
clientLeftForCharacter(component, 1, 8)
|
|
)
|
|
}
|
|
})
|
|
|
|
it('renders multi-line highlights', async () => {
|
|
const { component, element, editor } = buildComponent({ rowsPerTile: 3 })
|
|
const marker = editor.markScreenRange([[2, 4], [3, 4]])
|
|
editor.decorateMarker(marker, { type: 'highlight', class: 'a' })
|
|
|
|
await component.getNextUpdatePromise()
|
|
|
|
{
|
|
expect(element.querySelectorAll('.highlight.a').length).toBe(1)
|
|
|
|
const regions = element.querySelectorAll('.highlight.a .region.a')
|
|
expect(regions.length).toBe(2)
|
|
const region0Rect = regions[0].getBoundingClientRect()
|
|
expect(region0Rect.top).toBe(
|
|
lineNodeForScreenRow(component, 2).getBoundingClientRect().top
|
|
)
|
|
expect(region0Rect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 2).getBoundingClientRect().bottom
|
|
)
|
|
expect(Math.round(region0Rect.left)).toBe(
|
|
clientLeftForCharacter(component, 2, 4)
|
|
)
|
|
expect(Math.round(region0Rect.right)).toBe(
|
|
component.refs.content.getBoundingClientRect().right
|
|
)
|
|
|
|
const region1Rect = regions[1].getBoundingClientRect()
|
|
expect(region1Rect.top).toBe(
|
|
lineNodeForScreenRow(component, 3).getBoundingClientRect().top
|
|
)
|
|
expect(region1Rect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 3).getBoundingClientRect().bottom
|
|
)
|
|
expect(Math.round(region1Rect.left)).toBe(
|
|
clientLeftForCharacter(component, 3, 0)
|
|
)
|
|
expect(Math.round(region1Rect.right)).toBe(
|
|
clientLeftForCharacter(component, 3, 4)
|
|
)
|
|
}
|
|
|
|
marker.setScreenRange([[2, 4], [5, 4]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
{
|
|
expect(element.querySelectorAll('.highlight.a').length).toBe(1)
|
|
|
|
const regions = element.querySelectorAll('.highlight.a .region.a')
|
|
expect(regions.length).toBe(3)
|
|
|
|
const region0Rect = regions[0].getBoundingClientRect()
|
|
expect(region0Rect.top).toBe(
|
|
lineNodeForScreenRow(component, 2).getBoundingClientRect().top
|
|
)
|
|
expect(region0Rect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 2).getBoundingClientRect().bottom
|
|
)
|
|
expect(Math.round(region0Rect.left)).toBe(
|
|
clientLeftForCharacter(component, 2, 4)
|
|
)
|
|
expect(Math.round(region0Rect.right)).toBe(
|
|
component.refs.content.getBoundingClientRect().right
|
|
)
|
|
|
|
const region1Rect = regions[1].getBoundingClientRect()
|
|
expect(region1Rect.top).toBe(
|
|
lineNodeForScreenRow(component, 3).getBoundingClientRect().top
|
|
)
|
|
expect(region1Rect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 5).getBoundingClientRect().top
|
|
)
|
|
expect(Math.round(region1Rect.left)).toBe(
|
|
component.refs.content.getBoundingClientRect().left
|
|
)
|
|
expect(Math.round(region1Rect.right)).toBe(
|
|
component.refs.content.getBoundingClientRect().right
|
|
)
|
|
|
|
const region2Rect = regions[2].getBoundingClientRect()
|
|
expect(region2Rect.top).toBe(
|
|
lineNodeForScreenRow(component, 5).getBoundingClientRect().top
|
|
)
|
|
expect(region2Rect.bottom).toBe(
|
|
lineNodeForScreenRow(component, 6).getBoundingClientRect().top
|
|
)
|
|
expect(Math.round(region2Rect.left)).toBe(
|
|
component.refs.content.getBoundingClientRect().left
|
|
)
|
|
expect(Math.round(region2Rect.right)).toBe(
|
|
clientLeftForCharacter(component, 5, 4)
|
|
)
|
|
}
|
|
})
|
|
|
|
it('can flash highlight decorations', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
height: 200
|
|
})
|
|
const marker = editor.markScreenRange([[2, 4], [3, 4]])
|
|
const decoration = editor.decorateMarker(marker, {
|
|
type: 'highlight',
|
|
class: 'a'
|
|
})
|
|
decoration.flash('b', 10)
|
|
|
|
// Flash on initial appearance of highlight
|
|
await component.getNextUpdatePromise()
|
|
const highlights = element.querySelectorAll('.highlight.a')
|
|
expect(highlights.length).toBe(1)
|
|
|
|
expect(highlights[0].classList.contains('b')).toBe(true)
|
|
|
|
await conditionPromise(() => !highlights[0].classList.contains('b'))
|
|
|
|
// Don't flash on next update if another flash wasn't requested
|
|
await setScrollTop(component, 100)
|
|
expect(highlights[0].classList.contains('b')).toBe(false)
|
|
|
|
// Flashing the same class again before the first flash completes
|
|
// removes the flash class and adds it back on the next frame to ensure
|
|
// CSS transitions apply to the second flash.
|
|
decoration.flash('e', 100)
|
|
await component.getNextUpdatePromise()
|
|
expect(highlights[0].classList.contains('e')).toBe(true)
|
|
|
|
decoration.flash('e', 100)
|
|
await component.getNextUpdatePromise()
|
|
expect(highlights[0].classList.contains('e')).toBe(false)
|
|
|
|
await conditionPromise(() => highlights[0].classList.contains('e'))
|
|
await conditionPromise(() => !highlights[0].classList.contains('e'))
|
|
})
|
|
|
|
it("flashing a highlight decoration doesn't unflash other highlight decorations", async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
height: 200
|
|
})
|
|
const marker = editor.markScreenRange([[2, 4], [3, 4]])
|
|
const decoration = editor.decorateMarker(marker, {
|
|
type: 'highlight',
|
|
class: 'a'
|
|
})
|
|
|
|
// Flash one class
|
|
decoration.flash('c', 1000)
|
|
await component.getNextUpdatePromise()
|
|
const highlights = element.querySelectorAll('.highlight.a')
|
|
expect(highlights.length).toBe(1)
|
|
expect(highlights[0].classList.contains('c')).toBe(true)
|
|
|
|
// Flash another class while the previously-flashed class is still highlighted
|
|
decoration.flash('d', 100)
|
|
await component.getNextUpdatePromise()
|
|
expect(highlights[0].classList.contains('c')).toBe(true)
|
|
expect(highlights[0].classList.contains('d')).toBe(true)
|
|
})
|
|
|
|
it('supports layer decorations', async () => {
|
|
const { component, element, editor } = buildComponent({ rowsPerTile: 12 })
|
|
const markerLayer = editor.addMarkerLayer()
|
|
const marker1 = markerLayer.markScreenRange([[2, 4], [3, 4]])
|
|
const marker2 = markerLayer.markScreenRange([[5, 6], [7, 8]])
|
|
const decoration = editor.decorateMarkerLayer(markerLayer, {
|
|
type: 'highlight',
|
|
class: 'a'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
const highlights = element.querySelectorAll('.highlight')
|
|
expect(highlights[0].classList.contains('a')).toBe(true)
|
|
expect(highlights[1].classList.contains('a')).toBe(true)
|
|
|
|
decoration.setPropertiesForMarker(marker1, {
|
|
type: 'highlight',
|
|
class: 'b'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(highlights[0].classList.contains('b')).toBe(true)
|
|
expect(highlights[1].classList.contains('a')).toBe(true)
|
|
|
|
decoration.setPropertiesForMarker(marker1, null)
|
|
decoration.setPropertiesForMarker(marker2, {
|
|
type: 'highlight',
|
|
class: 'c'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(highlights[0].classList.contains('a')).toBe(true)
|
|
expect(highlights[1].classList.contains('c')).toBe(true)
|
|
})
|
|
|
|
it('clears highlights when recycling a tile that previously contained highlights and now does not', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 2)
|
|
const marker = editor.markScreenRange([[1, 2], [1, 10]])
|
|
editor.decorateMarker(marker, { type: 'highlight', class: 'a' })
|
|
|
|
await component.getNextUpdatePromise()
|
|
expect(element.querySelectorAll('.highlight.a').length).toBe(1)
|
|
|
|
await setScrollTop(component, component.getLineHeight() * 3)
|
|
expect(element.querySelectorAll('.highlight.a').length).toBe(0)
|
|
})
|
|
|
|
it('does not move existing highlights when adding or removing other highlight decorations (regression)', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
|
|
const marker1 = editor.markScreenRange([[1, 6], [1, 10]])
|
|
editor.decorateMarker(marker1, { type: 'highlight', class: 'a' })
|
|
await component.getNextUpdatePromise()
|
|
const marker1Region = element.querySelector('.highlight.a')
|
|
expect(
|
|
Array.from(marker1Region.parentElement.children).indexOf(marker1Region)
|
|
).toBe(0)
|
|
|
|
const marker2 = editor.markScreenRange([[1, 2], [1, 4]])
|
|
editor.decorateMarker(marker2, { type: 'highlight', class: 'b' })
|
|
await component.getNextUpdatePromise()
|
|
const marker2Region = element.querySelector('.highlight.b')
|
|
expect(
|
|
Array.from(marker1Region.parentElement.children).indexOf(marker1Region)
|
|
).toBe(0)
|
|
expect(
|
|
Array.from(marker2Region.parentElement.children).indexOf(marker2Region)
|
|
).toBe(1)
|
|
|
|
marker2.destroy()
|
|
await component.getNextUpdatePromise()
|
|
expect(
|
|
Array.from(marker1Region.parentElement.children).indexOf(marker1Region)
|
|
).toBe(0)
|
|
})
|
|
|
|
it('correctly positions highlights that end on rows preceding or following block decorations', async () => {
|
|
const { editor, element, component } = buildComponent()
|
|
|
|
const item1 = document.createElement('div')
|
|
item1.style.height = '30px'
|
|
item1.style.backgroundColor = 'blue'
|
|
editor.decorateMarker(editor.markBufferPosition([4, 0]), {
|
|
type: 'block',
|
|
position: 'after',
|
|
item: item1
|
|
})
|
|
const item2 = document.createElement('div')
|
|
item2.style.height = '30px'
|
|
item2.style.backgroundColor = 'yellow'
|
|
editor.decorateMarker(editor.markBufferPosition([4, 0]), {
|
|
type: 'block',
|
|
position: 'before',
|
|
item: item2
|
|
})
|
|
editor.decorateMarker(editor.markBufferRange([[3, 0], [4, Infinity]]), {
|
|
type: 'highlight',
|
|
class: 'highlight'
|
|
})
|
|
|
|
await component.getNextUpdatePromise()
|
|
const regions = element.querySelectorAll('.highlight .region')
|
|
expect(regions[0].offsetTop).toBe(3 * component.getLineHeight())
|
|
expect(regions[0].offsetHeight).toBe(component.getLineHeight())
|
|
expect(regions[1].offsetTop).toBe(4 * component.getLineHeight() + 30)
|
|
})
|
|
})
|
|
|
|
describe('overlay decorations', () => {
|
|
function attachFakeWindow (component) {
|
|
const fakeWindow = document.createElement('div')
|
|
fakeWindow.style.position = 'absolute'
|
|
fakeWindow.style.padding = 20 + 'px'
|
|
fakeWindow.style.backgroundColor = 'blue'
|
|
fakeWindow.appendChild(component.element)
|
|
jasmine.attachToDOM(fakeWindow)
|
|
spyOn(component, 'getWindowInnerWidth').andCallFake(
|
|
() => fakeWindow.getBoundingClientRect().width
|
|
)
|
|
spyOn(component, 'getWindowInnerHeight').andCallFake(
|
|
() => fakeWindow.getBoundingClientRect().height
|
|
)
|
|
return fakeWindow
|
|
}
|
|
|
|
it('renders overlay elements at the specified screen position unless it would overflow the window', async () => {
|
|
const { component, editor } = buildComponent({
|
|
width: 200,
|
|
height: 100,
|
|
attach: false
|
|
})
|
|
const fakeWindow = attachFakeWindow(component)
|
|
|
|
await setScrollTop(component, 50)
|
|
await setScrollLeft(component, 100)
|
|
|
|
const marker = editor.markScreenPosition([4, 25])
|
|
|
|
const overlayElement = document.createElement('div')
|
|
overlayElement.style.width = '50px'
|
|
overlayElement.style.height = '50px'
|
|
overlayElement.style.margin = '3px'
|
|
overlayElement.style.backgroundColor = 'red'
|
|
|
|
const decoration = editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
item: overlayElement,
|
|
class: 'a'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
const overlayComponent = component.overlayComponents.values().next().value
|
|
|
|
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)
|
|
)
|
|
|
|
// Updates the horizontal position on scroll
|
|
await setScrollLeft(component, 150)
|
|
expect(overlayWrapper.getBoundingClientRect().left).toBe(
|
|
clientLeftForCharacter(component, 4, 25)
|
|
)
|
|
|
|
// Shifts the overlay horizontally to ensure the overlay element does not
|
|
// overflow the window
|
|
await setScrollLeft(component, 30)
|
|
expect(overlayElement.getBoundingClientRect().right).toBe(
|
|
fakeWindow.getBoundingClientRect().right
|
|
)
|
|
await setScrollLeft(component, 280)
|
|
expect(overlayElement.getBoundingClientRect().left).toBe(
|
|
fakeWindow.getBoundingClientRect().left
|
|
)
|
|
|
|
// Updates the vertical position on scroll
|
|
await setScrollTop(component, 60)
|
|
expect(overlayWrapper.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 5)
|
|
)
|
|
|
|
// Flips the overlay vertically to ensure the overlay element does not
|
|
// overflow the bottom of the window
|
|
setScrollLeft(component, 100)
|
|
await setScrollTop(component, 0)
|
|
expect(overlayWrapper.getBoundingClientRect().bottom).toBe(
|
|
clientTopForLine(component, 4)
|
|
)
|
|
|
|
// Flips the overlay vertically on overlay resize if necessary
|
|
await setScrollTop(component, 20)
|
|
expect(overlayWrapper.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 5)
|
|
)
|
|
overlayElement.style.height = 60 + 'px'
|
|
await overlayComponent.getNextUpdatePromise()
|
|
expect(overlayWrapper.getBoundingClientRect().bottom).toBe(
|
|
clientTopForLine(component, 4)
|
|
)
|
|
|
|
// Does not flip the overlay vertically if it would overflow the top of the window
|
|
overlayElement.style.height = 80 + 'px'
|
|
await overlayComponent.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)
|
|
})
|
|
|
|
it('does not attempt to avoid overflowing the window if `avoidOverflow` is false on the decoration', async () => {
|
|
const { component, editor } = buildComponent({
|
|
width: 200,
|
|
height: 100,
|
|
attach: false
|
|
})
|
|
const fakeWindow = attachFakeWindow(component)
|
|
const overlayElement = document.createElement('div')
|
|
overlayElement.style.width = '50px'
|
|
overlayElement.style.height = '50px'
|
|
overlayElement.style.margin = '3px'
|
|
overlayElement.style.backgroundColor = 'red'
|
|
const marker = editor.markScreenPosition([4, 25])
|
|
editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
item: overlayElement,
|
|
avoidOverflow: false
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
await setScrollLeft(component, 30)
|
|
expect(overlayElement.getBoundingClientRect().right).toBeGreaterThan(
|
|
fakeWindow.getBoundingClientRect().right
|
|
)
|
|
await setScrollLeft(component, 280)
|
|
expect(overlayElement.getBoundingClientRect().left).toBeLessThan(
|
|
fakeWindow.getBoundingClientRect().left
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('custom gutter decorations', () => {
|
|
it('arranges custom gutters based on their priority', async () => {
|
|
const { component, editor } = buildComponent()
|
|
editor.addGutter({ name: 'e', priority: 2 })
|
|
editor.addGutter({ name: 'a', priority: -2 })
|
|
editor.addGutter({ name: 'd', priority: 1 })
|
|
editor.addGutter({ name: 'b', priority: -1 })
|
|
editor.addGutter({ name: 'c', priority: 0 })
|
|
|
|
await component.getNextUpdatePromise()
|
|
const gutters = component.refs.gutterContainer.element.querySelectorAll(
|
|
'.gutter'
|
|
)
|
|
expect(
|
|
Array.from(gutters).map(g => g.getAttribute('gutter-name'))
|
|
).toEqual(['a', 'b', 'c', 'line-number', 'd', 'e'])
|
|
})
|
|
|
|
it('adjusts the left edge of the scroll container based on changes to the gutter container width', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const { scrollContainer, gutterContainer } = component.refs
|
|
|
|
function checkScrollContainerLeft () {
|
|
expect(scrollContainer.getBoundingClientRect().left).toBe(
|
|
Math.round(gutterContainer.element.getBoundingClientRect().right)
|
|
)
|
|
}
|
|
|
|
checkScrollContainerLeft()
|
|
const gutterA = editor.addGutter({ name: 'a' })
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
const gutterB = editor.addGutter({ name: 'b' })
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
gutterA.getElement().style.width = 100 + 'px'
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
gutterA.hide()
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
gutterA.show()
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
gutterA.destroy()
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
|
|
gutterB.destroy()
|
|
await component.getNextUpdatePromise()
|
|
checkScrollContainerLeft()
|
|
})
|
|
|
|
it('allows the element of custom gutters to be retrieved before being rendered in the editor component', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const [lineNumberGutter] = editor.getGutters()
|
|
const gutterA = editor.addGutter({ name: 'a', priority: -1 })
|
|
const gutterB = editor.addGutter({ name: 'b', priority: 1 })
|
|
|
|
const lineNumberGutterElement = lineNumberGutter.getElement()
|
|
const gutterAElement = gutterA.getElement()
|
|
const gutterBElement = gutterB.getElement()
|
|
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(element.contains(lineNumberGutterElement)).toBe(true)
|
|
expect(element.contains(gutterAElement)).toBe(true)
|
|
expect(element.contains(gutterBElement)).toBe(true)
|
|
})
|
|
|
|
it('can show and hide custom gutters', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const gutterA = editor.addGutter({ name: 'a', priority: -1 })
|
|
const gutterB = editor.addGutter({ name: 'b', priority: 1 })
|
|
const gutterAElement = gutterA.getElement()
|
|
const gutterBElement = gutterB.getElement()
|
|
|
|
await component.getNextUpdatePromise()
|
|
expect(gutterAElement.style.display).toBe('')
|
|
expect(gutterBElement.style.display).toBe('')
|
|
|
|
gutterA.hide()
|
|
await component.getNextUpdatePromise()
|
|
expect(gutterAElement.style.display).toBe('none')
|
|
expect(gutterBElement.style.display).toBe('')
|
|
|
|
gutterB.hide()
|
|
await component.getNextUpdatePromise()
|
|
expect(gutterAElement.style.display).toBe('none')
|
|
expect(gutterBElement.style.display).toBe('none')
|
|
|
|
gutterA.show()
|
|
await component.getNextUpdatePromise()
|
|
expect(gutterAElement.style.display).toBe('')
|
|
expect(gutterBElement.style.display).toBe('none')
|
|
})
|
|
|
|
it('renders decorations in custom gutters', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const gutterA = editor.addGutter({ name: 'a', priority: -1 })
|
|
const gutterB = editor.addGutter({ name: 'b', priority: 1 })
|
|
const marker1 = editor.markScreenRange([[2, 0], [4, 0]])
|
|
const marker2 = editor.markScreenRange([[6, 0], [7, 0]])
|
|
const marker3 = editor.markScreenRange([[9, 0], [12, 0]])
|
|
const decorationElement1 = document.createElement('div')
|
|
const decorationElement2 = document.createElement('div')
|
|
// Packages may adopt this class name for decorations to be styled the same as line numbers
|
|
decorationElement2.className = 'line-number'
|
|
|
|
const decoration1 = gutterA.decorateMarker(marker1, { class: 'a' })
|
|
const decoration2 = gutterA.decorateMarker(marker2, {
|
|
class: 'b',
|
|
item: decorationElement1
|
|
})
|
|
const decoration3 = gutterB.decorateMarker(marker3, {
|
|
item: decorationElement2
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
let [
|
|
decorationNode1,
|
|
decorationNode2
|
|
] = gutterA.getElement().firstChild.children
|
|
const [decorationNode3] = gutterB.getElement().firstChild.children
|
|
|
|
expect(decorationNode1.className).toBe('decoration a')
|
|
expect(decorationNode1.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 2)
|
|
)
|
|
expect(decorationNode1.getBoundingClientRect().bottom).toBe(
|
|
clientTopForLine(component, 5)
|
|
)
|
|
expect(decorationNode1.firstChild).toBeNull()
|
|
|
|
expect(decorationNode2.className).toBe('decoration b')
|
|
expect(decorationNode2.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 6)
|
|
)
|
|
expect(decorationNode2.getBoundingClientRect().bottom).toBe(
|
|
clientTopForLine(component, 8)
|
|
)
|
|
expect(decorationNode2.firstChild).toBe(decorationElement1)
|
|
expect(decorationElement1.offsetHeight).toBe(decorationNode2.offsetHeight)
|
|
expect(decorationElement1.offsetWidth).toBe(decorationNode2.offsetWidth)
|
|
|
|
expect(decorationNode3.className).toBe('decoration')
|
|
expect(decorationNode3.getBoundingClientRect().top).toBe(
|
|
clientTopForLine(component, 9)
|
|
)
|
|
expect(decorationNode3.getBoundingClientRect().bottom).toBe(
|
|
clientTopForLine(component, 12) + component.getLineHeight()
|
|
)
|
|
expect(decorationNode3.firstChild).toBe(decorationElement2)
|
|
expect(decorationElement2.offsetHeight).toBe(decorationNode3.offsetHeight)
|
|
expect(decorationElement2.offsetWidth).toBe(decorationNode3.offsetWidth)
|
|
|
|
// Inline styled height is updated when line height changes
|
|
element.style.fontSize =
|
|
parseInt(getComputedStyle(element).fontSize) + 10 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(decorationElement1.offsetHeight).toBe(decorationNode2.offsetHeight)
|
|
expect(decorationElement2.offsetHeight).toBe(decorationNode3.offsetHeight)
|
|
|
|
decoration1.setProperties({
|
|
type: 'gutter',
|
|
gutterName: 'a',
|
|
class: 'c',
|
|
item: decorationElement1
|
|
})
|
|
decoration2.setProperties({ type: 'gutter', gutterName: 'a' })
|
|
decoration3.destroy()
|
|
await component.getNextUpdatePromise()
|
|
expect(decorationNode1.className).toBe('decoration c')
|
|
expect(decorationNode1.firstChild).toBe(decorationElement1)
|
|
expect(decorationElement1.offsetHeight).toBe(decorationNode1.offsetHeight)
|
|
expect(decorationNode2.className).toBe('decoration')
|
|
expect(decorationNode2.firstChild).toBeNull()
|
|
expect(gutterB.getElement().firstChild.children.length).toBe(0)
|
|
})
|
|
|
|
it('renders custom line number gutters', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const gutterA = editor.addGutter({
|
|
name: 'a',
|
|
priority: 1,
|
|
type: 'line-number',
|
|
class: 'a-number',
|
|
labelFn: ({ bufferRow }) => `a - ${bufferRow}`
|
|
})
|
|
const gutterB = editor.addGutter({
|
|
name: 'b',
|
|
priority: 1,
|
|
type: 'line-number',
|
|
class: 'b-number',
|
|
labelFn: ({ bufferRow }) => `b - ${bufferRow}`
|
|
})
|
|
editor.setText('0000\n0001\n0002\n0003\n0004\n')
|
|
|
|
await component.getNextUpdatePromise()
|
|
|
|
const gutterAElement = gutterA.getElement()
|
|
const aNumbers = gutterAElement.querySelectorAll(
|
|
'div.line-number[data-buffer-row]'
|
|
)
|
|
const aLabels = Array.from(aNumbers, e => e.textContent)
|
|
expect(aLabels).toEqual([
|
|
'a - 0',
|
|
'a - 1',
|
|
'a - 2',
|
|
'a - 3',
|
|
'a - 4',
|
|
'a - 5'
|
|
])
|
|
|
|
const gutterBElement = gutterB.getElement()
|
|
const bNumbers = gutterBElement.querySelectorAll(
|
|
'div.line-number[data-buffer-row]'
|
|
)
|
|
const bLabels = Array.from(bNumbers, e => e.textContent)
|
|
expect(bLabels).toEqual([
|
|
'b - 0',
|
|
'b - 1',
|
|
'b - 2',
|
|
'b - 3',
|
|
'b - 4',
|
|
'b - 5'
|
|
])
|
|
})
|
|
|
|
it("updates the editor's soft wrap width when a custom gutter's measurement is available", () => {
|
|
const { component, element, editor } = buildComponent({
|
|
lineNumberGutterVisible: false,
|
|
width: 400,
|
|
softWrapped: true,
|
|
attach: false
|
|
})
|
|
const gutter = editor.addGutter({ name: 'a', priority: 10 })
|
|
gutter.getElement().style.width = '100px'
|
|
|
|
jasmine.attachToDOM(element)
|
|
|
|
expect(component.getGutterContainerWidth()).toBe(100)
|
|
|
|
// Component client width - gutter container width - vertical scrollbar width
|
|
const softWrapColumn = Math.floor(
|
|
(400 - 100 - component.getVerticalScrollbarWidth()) /
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
expect(editor.getSoftWrapColumn()).toBe(softWrapColumn)
|
|
})
|
|
})
|
|
|
|
describe('block decorations', () => {
|
|
it('renders visible block decorations between the appropriate lines, refreshing and measuring them as needed', async () => {
|
|
const editor = buildEditor({ autoHeight: false })
|
|
const {
|
|
item: item1,
|
|
decoration: decoration1
|
|
} = createBlockDecorationAtScreenRow(editor, 0, {
|
|
height: 11,
|
|
position: 'before'
|
|
})
|
|
const {
|
|
item: item2,
|
|
decoration: decoration2
|
|
} = createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: 22,
|
|
margin: 10,
|
|
position: 'before'
|
|
})
|
|
|
|
// render an editor that already contains some block decorations
|
|
const { component, element } = buildComponent({ editor, rowsPerTile: 3 })
|
|
element.style.height =
|
|
4 * component.getLineHeight() + horizontalScrollbarHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item1) +
|
|
getElementHeight(item2)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item1) +
|
|
getElementHeight(item2)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(item1.previousSibling).toBeNull()
|
|
expect(item1.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 2))
|
|
|
|
// add block decorations
|
|
const {
|
|
item: item3,
|
|
decoration: decoration3
|
|
} = createBlockDecorationAtScreenRow(editor, 4, {
|
|
height: 33,
|
|
position: 'before'
|
|
})
|
|
const { item: item4 } = createBlockDecorationAtScreenRow(editor, 7, {
|
|
height: 44,
|
|
position: 'before'
|
|
})
|
|
const { item: item5 } = createBlockDecorationAtScreenRow(editor, 7, {
|
|
height: 50,
|
|
marginBottom: 5,
|
|
position: 'after'
|
|
})
|
|
const { item: item6 } = createBlockDecorationAtScreenRow(editor, 12, {
|
|
height: 60,
|
|
marginTop: 6,
|
|
position: 'after'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item1) +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item1) +
|
|
getElementHeight(item2)
|
|
},
|
|
{
|
|
tileStartRow: 3,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item3)
|
|
}
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(item1.previousSibling).toBeNull()
|
|
expect(item1.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 2))
|
|
expect(item3.previousSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 4))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// destroy decoration1
|
|
decoration1.destroy()
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item2)
|
|
},
|
|
{
|
|
tileStartRow: 3,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item3)
|
|
}
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 2))
|
|
expect(item3.previousSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 4))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// move decoration2 and decoration3
|
|
decoration2.getMarker().setHeadScreenPosition([1, 0])
|
|
decoration3.getMarker().setHeadScreenPosition([0, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// change the text
|
|
editor.getBuffer().setTextInRange([[0, 5], [0, 5]], '\n\n')
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item3)
|
|
},
|
|
{
|
|
tileStartRow: 3,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item2)
|
|
}
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBeNull()
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(element.contains(item4)).toBe(false)
|
|
expect(element.contains(item5)).toBe(false)
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// scroll past the first tile
|
|
await setScrollTop(
|
|
component,
|
|
3 * component.getLineHeight() + getElementHeight(item3)
|
|
)
|
|
expect(component.getRenderedStartRow()).toBe(3)
|
|
expect(component.getRenderedEndRow()).toBe(12)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 3,
|
|
height: 3 * component.getLineHeight() + getElementHeight(item2)
|
|
},
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBeNull()
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
expect(element.contains(item3)).toBe(false)
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 9))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 9))
|
|
expect(element.contains(item6)).toBe(false)
|
|
await setScrollTop(component, 0)
|
|
|
|
// undo the previous change
|
|
editor.undo()
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// invalidate decorations. this also tests a case where two decorations in
|
|
// the same tile change their height without affecting the tile height nor
|
|
// the content height.
|
|
item3.style.height = '22px'
|
|
item3.style.margin = '10px'
|
|
item2.style.height = '33px'
|
|
item2.style.margin = '0px'
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// make decoration before row 0 as wide as the editor, and insert some text into it so that it wraps.
|
|
item3.style.height = ''
|
|
item3.style.margin = ''
|
|
item3.style.width = ''
|
|
item3.style.wordWrap = 'break-word'
|
|
const contentWidthInCharacters = Math.floor(
|
|
component.getScrollContainerClientWidth() /
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
item3.textContent = 'x'.repeat(contentWidthInCharacters * 2)
|
|
await component.getNextUpdatePromise()
|
|
|
|
// make the editor wider, so that the decoration doesn't wrap anymore.
|
|
component.element.style.width =
|
|
component.getGutterContainerWidth() +
|
|
component.getScrollContainerClientWidth() * 2 +
|
|
verticalScrollbarWidth +
|
|
'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() }
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(9)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(element.contains(item6)).toBe(false)
|
|
|
|
// make the editor taller and wider and the same time, ensuring the number
|
|
// of rendered lines is correct.
|
|
setEditorHeightInLines(component, 13)
|
|
await setEditorWidthInCharacters(component, 50)
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(13)
|
|
expect(component.getScrollHeight()).toBe(
|
|
editor.getScreenLineCount() * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3) +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5) +
|
|
getElementHeight(item6)
|
|
)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{
|
|
tileStartRow: 0,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item2) +
|
|
getElementHeight(item3)
|
|
},
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{
|
|
tileStartRow: 6,
|
|
height:
|
|
3 * component.getLineHeight() +
|
|
getElementHeight(item4) +
|
|
getElementHeight(item5)
|
|
}
|
|
])
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
expect(queryOnScreenLineElements(element).length).toBe(13)
|
|
expect(element.contains(item1)).toBe(false)
|
|
expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1))
|
|
expect(item3.previousSibling).toBeNull()
|
|
expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0))
|
|
expect(item4.previousSibling).toBe(lineNodeForScreenRow(component, 6))
|
|
expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7))
|
|
expect(item5.nextSibling).toBe(lineNodeForScreenRow(component, 8))
|
|
expect(item6.previousSibling).toBe(lineNodeForScreenRow(component, 12))
|
|
})
|
|
|
|
it('correctly positions line numbers when block decorations are located at tile boundaries', async () => {
|
|
const { editor, component } = buildComponent({ rowsPerTile: 3 })
|
|
createBlockDecorationAtScreenRow(editor, 0, {
|
|
height: 5,
|
|
position: 'before'
|
|
})
|
|
createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: 7,
|
|
position: 'after'
|
|
})
|
|
createBlockDecorationAtScreenRow(editor, 3, {
|
|
height: 9,
|
|
position: 'before'
|
|
})
|
|
createBlockDecorationAtScreenRow(editor, 3, {
|
|
height: 11,
|
|
position: 'after'
|
|
})
|
|
createBlockDecorationAtScreenRow(editor, 5, {
|
|
height: 13,
|
|
position: 'after'
|
|
})
|
|
|
|
await component.getNextUpdatePromise()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() + 5 + 7 },
|
|
{
|
|
tileStartRow: 3,
|
|
height: 3 * component.getLineHeight() + 9 + 11 + 13
|
|
},
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
})
|
|
|
|
it('removes block decorations whose markers have been destroyed', async () => {
|
|
const { editor, component } = buildComponent({ rowsPerTile: 3 })
|
|
const { marker } = createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: 5,
|
|
position: 'before'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() + 5 },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
|
|
marker.destroy()
|
|
await component.getNextUpdatePromise()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
})
|
|
|
|
it('removes block decorations whose markers are invalidated, and adds them back when they become valid again', async () => {
|
|
const editor = buildEditor({ rowsPerTile: 3, autoHeight: false })
|
|
const { item, decoration, marker } = createBlockDecorationAtScreenRow(
|
|
editor,
|
|
3,
|
|
{ height: 44, position: 'before', invalidate: 'touch' }
|
|
)
|
|
const { component } = buildComponent({ editor, rowsPerTile: 3 })
|
|
|
|
// Invalidating the marker removes the block decoration.
|
|
editor.getBuffer().deleteRows(2, 3)
|
|
await component.getNextUpdatePromise()
|
|
expect(item.parentElement).toBeNull()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
|
|
// Moving invalid markers is ignored.
|
|
marker.setScreenRange([[2, 0], [2, 0]])
|
|
await component.getNextUpdatePromise()
|
|
expect(item.parentElement).toBeNull()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
|
|
// Making the marker valid again adds back the block decoration.
|
|
marker.bufferMarker.valid = true
|
|
marker.setScreenRange([[3, 0], [3, 0]])
|
|
await component.getNextUpdatePromise()
|
|
expect(item.nextSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() + 44 },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
|
|
// Destroying the decoration and invalidating the marker at the same time
|
|
// removes the block decoration correctly.
|
|
editor.getBuffer().deleteRows(2, 3)
|
|
decoration.destroy()
|
|
await component.getNextUpdatePromise()
|
|
expect(item.parentElement).toBeNull()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
})
|
|
|
|
it('does not render block decorations when decorating invalid markers', async () => {
|
|
const editor = buildEditor({ rowsPerTile: 3, autoHeight: false })
|
|
const { component } = buildComponent({ editor, rowsPerTile: 3 })
|
|
|
|
const marker = editor.markScreenPosition([3, 0], { invalidate: 'touch' })
|
|
const item = document.createElement('div')
|
|
item.style.height = 30 + 'px'
|
|
item.style.width = 30 + 'px'
|
|
editor.getBuffer().deleteRows(1, 4)
|
|
|
|
editor.decorateMarker(marker, {
|
|
type: 'block',
|
|
item,
|
|
position: 'before'
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(item.parentElement).toBeNull()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
|
|
// Making the marker valid again causes the corresponding block decoration
|
|
// to be added to the editor.
|
|
marker.bufferMarker.valid = true
|
|
marker.setScreenRange([[2, 0], [2, 0]])
|
|
await component.getNextUpdatePromise()
|
|
expect(item.nextSibling).toBe(lineNodeForScreenRow(component, 2))
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() + 30 },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
})
|
|
|
|
it('does not try to remeasure block decorations whose markers are invalid (regression)', async () => {
|
|
const editor = buildEditor({ rowsPerTile: 3, autoHeight: false })
|
|
const { component } = buildComponent({ editor, rowsPerTile: 3 })
|
|
createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: '12px',
|
|
invalidate: 'touch'
|
|
})
|
|
editor.getBuffer().deleteRows(0, 3)
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Trigger a re-measurement of all block decorations.
|
|
await setEditorWidthInCharacters(component, 20)
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
assertTilesAreSizedAndPositionedCorrectly(component, [
|
|
{ tileStartRow: 0, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 3, height: 3 * component.getLineHeight() },
|
|
{ tileStartRow: 6, height: 3 * component.getLineHeight() }
|
|
])
|
|
})
|
|
|
|
it('does not throw exceptions when destroying a block decoration inside a marker change event (regression)', async () => {
|
|
const { editor, component } = buildComponent({ rowsPerTile: 3 })
|
|
|
|
const marker = editor.markScreenPosition([2, 0])
|
|
marker.onDidChange(() => {
|
|
marker.destroy()
|
|
})
|
|
const item = document.createElement('div')
|
|
editor.decorateMarker(marker, { type: 'block', item })
|
|
|
|
await component.getNextUpdatePromise()
|
|
expect(item.nextSibling).toBe(lineNodeForScreenRow(component, 2))
|
|
|
|
marker.setBufferRange([[0, 0], [0, 0]])
|
|
expect(marker.isDestroyed()).toBe(true)
|
|
|
|
await component.getNextUpdatePromise()
|
|
expect(item.parentElement).toBeNull()
|
|
})
|
|
|
|
it('does not attempt to render block decorations located outside the visible range', async () => {
|
|
const { editor, component } = buildComponent({
|
|
autoHeight: false,
|
|
rowsPerTile: 2
|
|
})
|
|
await setEditorHeightInLines(component, 2)
|
|
expect(component.getRenderedStartRow()).toBe(0)
|
|
expect(component.getRenderedEndRow()).toBe(4)
|
|
|
|
const marker1 = editor.markScreenRange([[3, 0], [5, 0]], {
|
|
reversed: false
|
|
})
|
|
const item1 = document.createElement('div')
|
|
editor.decorateMarker(marker1, { type: 'block', item: item1 })
|
|
|
|
const marker2 = editor.markScreenRange([[3, 0], [5, 0]], {
|
|
reversed: true
|
|
})
|
|
const item2 = document.createElement('div')
|
|
editor.decorateMarker(marker2, { type: 'block', item: item2 })
|
|
|
|
await component.getNextUpdatePromise()
|
|
expect(item1.parentElement).toBeNull()
|
|
expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 3))
|
|
|
|
await setScrollTop(component, 4 * component.getLineHeight())
|
|
expect(component.getRenderedStartRow()).toBe(4)
|
|
expect(component.getRenderedEndRow()).toBe(8)
|
|
expect(item1.nextSibling).toBe(lineNodeForScreenRow(component, 5))
|
|
expect(item2.parentElement).toBeNull()
|
|
})
|
|
|
|
it('measures block decorations correctly when they are added before the component width has been updated', async () => {
|
|
{
|
|
const { editor, component, element } = buildComponent({
|
|
autoHeight: false,
|
|
width: 500,
|
|
attach: false
|
|
})
|
|
const marker = editor.markScreenPosition([0, 0])
|
|
const item = document.createElement('div')
|
|
item.textContent = 'block decoration'
|
|
editor.decorateMarker(marker, {
|
|
type: 'block',
|
|
item
|
|
})
|
|
|
|
jasmine.attachToDOM(element)
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
}
|
|
|
|
{
|
|
const { editor, component, element } = buildComponent({
|
|
autoHeight: false,
|
|
width: 800
|
|
})
|
|
const marker = editor.markScreenPosition([0, 0])
|
|
const item = document.createElement('div')
|
|
item.textContent = 'block decoration that could wrap many times'
|
|
editor.decorateMarker(marker, {
|
|
type: 'block',
|
|
item
|
|
})
|
|
|
|
element.style.width = '50px'
|
|
await component.getNextUpdatePromise()
|
|
assertLinesAreAlignedWithLineNumbers(component)
|
|
}
|
|
})
|
|
|
|
it('bases the width of the block decoration measurement area on the editor scroll width', async () => {
|
|
const { component, element } = buildComponent({
|
|
autoHeight: false,
|
|
width: 150
|
|
})
|
|
expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(
|
|
component.getScrollWidth()
|
|
)
|
|
|
|
element.style.width = '800px'
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(
|
|
component.getScrollWidth()
|
|
)
|
|
})
|
|
|
|
it('does not change the cursor position when clicking on a block decoration', async () => {
|
|
const { editor, component } = buildComponent()
|
|
|
|
const decorationElement = document.createElement('div')
|
|
decorationElement.textContent = 'Parent'
|
|
const childElement = document.createElement('div')
|
|
childElement.textContent = 'Child'
|
|
decorationElement.appendChild(childElement)
|
|
const marker = editor.markScreenPosition([4, 0])
|
|
editor.decorateMarker(marker, { type: 'block', item: decorationElement })
|
|
await component.getNextUpdatePromise()
|
|
|
|
const decorationElementClientRect = decorationElement.getBoundingClientRect()
|
|
component.didMouseDownOnContent({
|
|
target: decorationElement,
|
|
detail: 1,
|
|
button: 0,
|
|
clientX: decorationElementClientRect.left,
|
|
clientY: decorationElementClientRect.top
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
|
|
const childElementClientRect = childElement.getBoundingClientRect()
|
|
component.didMouseDownOnContent({
|
|
target: childElement,
|
|
detail: 1,
|
|
button: 0,
|
|
clientX: childElementClientRect.left,
|
|
clientY: childElementClientRect.top
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
})
|
|
|
|
it('uses the order property to control the order of block decorations at the same screen row', async () => {
|
|
const editor = buildEditor({ autoHeight: false })
|
|
const { component, element } = buildComponent({ editor })
|
|
element.style.height =
|
|
10 * component.getLineHeight() + horizontalScrollbarHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Order parameters that differ from creation order; that collide; and that are not provided.
|
|
const [beforeItems, beforeDecorations] = [
|
|
30,
|
|
20,
|
|
undefined,
|
|
20,
|
|
10,
|
|
undefined
|
|
]
|
|
.map(order => {
|
|
return createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: 10,
|
|
position: 'before',
|
|
order
|
|
})
|
|
})
|
|
.reduce((lists, result) => {
|
|
lists[0].push(result.item)
|
|
lists[1].push(result.decoration)
|
|
return lists
|
|
}, [[], []])
|
|
|
|
const [afterItems] = [undefined, 1, 6, undefined, 6, 2]
|
|
.map(order => {
|
|
return createBlockDecorationAtScreenRow(editor, 2, {
|
|
height: 10,
|
|
position: 'after',
|
|
order
|
|
})
|
|
})
|
|
.reduce((lists, result) => {
|
|
lists[0].push(result.item)
|
|
lists[1].push(result.decoration)
|
|
return lists
|
|
}, [[], []])
|
|
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(beforeItems[4].previousSibling).toBe(
|
|
lineNodeForScreenRow(component, 1)
|
|
)
|
|
expect(beforeItems[4].nextSibling).toBe(beforeItems[1])
|
|
expect(beforeItems[1].nextSibling).toBe(beforeItems[3])
|
|
expect(beforeItems[3].nextSibling).toBe(beforeItems[0])
|
|
expect(beforeItems[0].nextSibling).toBe(beforeItems[2])
|
|
expect(beforeItems[2].nextSibling).toBe(beforeItems[5])
|
|
expect(beforeItems[5].nextSibling).toBe(
|
|
lineNodeForScreenRow(component, 2)
|
|
)
|
|
expect(afterItems[1].previousSibling).toBe(
|
|
lineNodeForScreenRow(component, 2)
|
|
)
|
|
expect(afterItems[1].nextSibling).toBe(afterItems[5])
|
|
expect(afterItems[5].nextSibling).toBe(afterItems[2])
|
|
expect(afterItems[2].nextSibling).toBe(afterItems[4])
|
|
expect(afterItems[4].nextSibling).toBe(afterItems[0])
|
|
expect(afterItems[0].nextSibling).toBe(afterItems[3])
|
|
|
|
// Create a decoration somewhere else and move it to the same screen row as the existing decorations
|
|
const { item: later, decoration } = createBlockDecorationAtScreenRow(
|
|
editor,
|
|
4,
|
|
{ height: 20, position: 'after', order: 3 }
|
|
)
|
|
await component.getNextUpdatePromise()
|
|
expect(later.previousSibling).toBe(lineNodeForScreenRow(component, 4))
|
|
expect(later.nextSibling).toBe(lineNodeForScreenRow(component, 5))
|
|
|
|
decoration.getMarker().setHeadScreenPosition([2, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(later.previousSibling).toBe(afterItems[5])
|
|
expect(later.nextSibling).toBe(afterItems[2])
|
|
|
|
// Move a decoration away from its screen row and ensure the rest maintain their order
|
|
beforeDecorations[3].getMarker().setHeadScreenPosition([5, 0])
|
|
await component.getNextUpdatePromise()
|
|
expect(beforeItems[3].previousSibling).toBe(
|
|
lineNodeForScreenRow(component, 4)
|
|
)
|
|
expect(beforeItems[3].nextSibling).toBe(
|
|
lineNodeForScreenRow(component, 5)
|
|
)
|
|
|
|
expect(beforeItems[4].previousSibling).toBe(
|
|
lineNodeForScreenRow(component, 1)
|
|
)
|
|
expect(beforeItems[4].nextSibling).toBe(beforeItems[1])
|
|
expect(beforeItems[1].nextSibling).toBe(beforeItems[0])
|
|
expect(beforeItems[0].nextSibling).toBe(beforeItems[2])
|
|
expect(beforeItems[2].nextSibling).toBe(beforeItems[5])
|
|
expect(beforeItems[5].nextSibling).toBe(
|
|
lineNodeForScreenRow(component, 2)
|
|
)
|
|
})
|
|
|
|
function createBlockDecorationAtScreenRow (
|
|
editor,
|
|
screenRow,
|
|
{ height, margin, marginTop, marginBottom, position, order, invalidate }
|
|
) {
|
|
const marker = editor.markScreenPosition([screenRow, 0], {
|
|
invalidate: invalidate || 'never'
|
|
})
|
|
const item = document.createElement('div')
|
|
item.style.height = height + 'px'
|
|
if (margin != null) item.style.margin = margin + 'px'
|
|
if (marginTop != null) item.style.marginTop = marginTop + 'px'
|
|
if (marginBottom != null) item.style.marginBottom = marginBottom + 'px'
|
|
item.style.width = 30 + 'px'
|
|
const decoration = editor.decorateMarker(marker, {
|
|
type: 'block',
|
|
item,
|
|
position,
|
|
order
|
|
})
|
|
return { item, decoration, marker }
|
|
}
|
|
|
|
function assertTilesAreSizedAndPositionedCorrectly (component, tiles) {
|
|
let top = 0
|
|
for (let tile of tiles) {
|
|
const linesTileElement = lineNodeForScreenRow(
|
|
component,
|
|
tile.tileStartRow
|
|
).parentElement
|
|
const linesTileBoundingRect = linesTileElement.getBoundingClientRect()
|
|
expect(linesTileBoundingRect.height).toBe(tile.height)
|
|
expect(linesTileBoundingRect.top).toBe(top)
|
|
|
|
const lineNumbersTileElement = lineNumberNodeForScreenRow(
|
|
component,
|
|
tile.tileStartRow
|
|
).parentElement
|
|
const lineNumbersTileBoundingRect = lineNumbersTileElement.getBoundingClientRect()
|
|
expect(lineNumbersTileBoundingRect.height).toBe(tile.height)
|
|
expect(lineNumbersTileBoundingRect.top).toBe(top)
|
|
|
|
top += tile.height
|
|
}
|
|
}
|
|
|
|
function assertLinesAreAlignedWithLineNumbers (component) {
|
|
const startRow = component.getRenderedStartRow()
|
|
const endRow = component.getRenderedEndRow()
|
|
for (let row = startRow; row < endRow; row++) {
|
|
const lineNode = lineNodeForScreenRow(component, row)
|
|
const lineNumberNode = lineNumberNodeForScreenRow(component, row)
|
|
expect(lineNumberNode.getBoundingClientRect().top).toBe(
|
|
lineNode.getBoundingClientRect().top
|
|
)
|
|
}
|
|
}
|
|
})
|
|
|
|
describe('cursor decorations', () => {
|
|
it('allows default cursors to be customized', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
|
|
editor.addCursorAtScreenPosition([1, 0])
|
|
const [cursorMarker1, cursorMarker2] = editor
|
|
.getCursors()
|
|
.map(c => c.getMarker())
|
|
|
|
editor.decorateMarker(cursorMarker1, { type: 'cursor', class: 'a' })
|
|
editor.decorateMarker(cursorMarker2, {
|
|
type: 'cursor',
|
|
class: 'b',
|
|
style: { visibility: 'hidden' }
|
|
})
|
|
editor.decorateMarker(cursorMarker2, {
|
|
type: 'cursor',
|
|
style: { backgroundColor: 'red' }
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
const cursorNodes = element.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(2)
|
|
|
|
expect(cursorNodes[0].className).toBe('cursor a')
|
|
expect(cursorNodes[1].className).toBe('cursor b')
|
|
expect(cursorNodes[1].style.visibility).toBe('hidden')
|
|
expect(cursorNodes[1].style.backgroundColor).toBe('red')
|
|
})
|
|
|
|
it('allows markers that are not actually associated with cursors to be decorated as if they were cursors', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const marker = editor.markScreenPosition([1, 0])
|
|
editor.decorateMarker(marker, { type: 'cursor', class: 'a' })
|
|
await component.getNextUpdatePromise()
|
|
|
|
const cursorNodes = element.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(2)
|
|
expect(cursorNodes[0].className).toBe('cursor')
|
|
expect(cursorNodes[1].className).toBe('cursor a')
|
|
})
|
|
})
|
|
|
|
describe('text decorations', () => {
|
|
it('injects spans with custom class names and inline styles based on text decorations', async () => {
|
|
const { component, element, editor } = buildComponent({ rowsPerTile: 2 })
|
|
|
|
const markerLayer = editor.addMarkerLayer()
|
|
const marker1 = markerLayer.markBufferRange([[0, 2], [2, 7]])
|
|
const marker2 = markerLayer.markBufferRange([[0, 2], [3, 8]])
|
|
const marker3 = markerLayer.markBufferRange([[1, 13], [2, 7]])
|
|
editor.decorateMarker(marker1, {
|
|
type: 'text',
|
|
class: 'a',
|
|
style: { color: 'red' }
|
|
})
|
|
editor.decorateMarker(marker2, {
|
|
type: 'text',
|
|
class: 'b',
|
|
style: { color: 'blue' }
|
|
})
|
|
editor.decorateMarker(marker3, {
|
|
type: 'text',
|
|
class: 'c',
|
|
style: { color: 'green' }
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(textContentOnRowMatchingSelector(component, 0, '.a')).toBe(
|
|
editor.lineTextForScreenRow(0).slice(2)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 1, '.a')).toBe(
|
|
editor.lineTextForScreenRow(1)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 2, '.a')).toBe(
|
|
editor.lineTextForScreenRow(2).slice(0, 7)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 3, '.a')).toBe('')
|
|
|
|
expect(textContentOnRowMatchingSelector(component, 0, '.b')).toBe(
|
|
editor.lineTextForScreenRow(0).slice(2)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 1, '.b')).toBe(
|
|
editor.lineTextForScreenRow(1)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 2, '.b')).toBe(
|
|
editor.lineTextForScreenRow(2)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 3, '.b')).toBe(
|
|
editor.lineTextForScreenRow(3).slice(0, 8)
|
|
)
|
|
|
|
expect(textContentOnRowMatchingSelector(component, 0, '.c')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 1, '.c')).toBe(
|
|
editor.lineTextForScreenRow(1).slice(13)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 2, '.c')).toBe(
|
|
editor.lineTextForScreenRow(2).slice(0, 7)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 3, '.c')).toBe('')
|
|
|
|
for (const span of element.querySelectorAll('.a:not(.c)')) {
|
|
expect(span.style.color).toBe('red')
|
|
}
|
|
for (const span of element.querySelectorAll('.b:not(.c):not(.a)')) {
|
|
expect(span.style.color).toBe('blue')
|
|
}
|
|
for (const span of element.querySelectorAll('.c')) {
|
|
expect(span.style.color).toBe('green')
|
|
}
|
|
|
|
marker2.setHeadScreenPosition([3, 10])
|
|
await component.getNextUpdatePromise()
|
|
expect(textContentOnRowMatchingSelector(component, 3, '.b')).toBe(
|
|
editor.lineTextForScreenRow(3).slice(0, 10)
|
|
)
|
|
})
|
|
|
|
it('correctly handles text decorations starting before the first rendered row and/or ending after the last rendered row', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
autoHeight: false,
|
|
rowsPerTile: 1
|
|
})
|
|
element.style.height = 4 * component.getLineHeight() + 'px'
|
|
await component.getNextUpdatePromise()
|
|
await setScrollTop(component, 4 * component.getLineHeight())
|
|
expect(component.getRenderedStartRow()).toBe(4)
|
|
expect(component.getRenderedEndRow()).toBe(9)
|
|
|
|
const markerLayer = editor.addMarkerLayer()
|
|
const marker1 = markerLayer.markBufferRange([[0, 0], [4, 5]])
|
|
const marker2 = markerLayer.markBufferRange([[7, 2], [10, 8]])
|
|
editor.decorateMarker(marker1, { type: 'text', class: 'a' })
|
|
editor.decorateMarker(marker2, { type: 'text', class: 'b' })
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(textContentOnRowMatchingSelector(component, 4, '.a')).toBe(
|
|
editor.lineTextForScreenRow(4).slice(0, 5)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 5, '.a')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 6, '.a')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 7, '.a')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 8, '.a')).toBe('')
|
|
|
|
expect(textContentOnRowMatchingSelector(component, 4, '.b')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 5, '.b')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 6, '.b')).toBe('')
|
|
expect(textContentOnRowMatchingSelector(component, 7, '.b')).toBe(
|
|
editor.lineTextForScreenRow(7).slice(2)
|
|
)
|
|
expect(textContentOnRowMatchingSelector(component, 8, '.b')).toBe(
|
|
editor.lineTextForScreenRow(8)
|
|
)
|
|
})
|
|
|
|
it('does not create empty spans when a text decoration contains a row but another text decoration starts or ends at the beginning of it', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
const markerLayer = editor.addMarkerLayer()
|
|
const marker1 = markerLayer.markBufferRange([[0, 2], [4, 0]])
|
|
const marker2 = markerLayer.markBufferRange([[2, 0], [5, 8]])
|
|
editor.decorateMarker(marker1, { type: 'text', class: 'a' })
|
|
editor.decorateMarker(marker2, { type: 'text', class: 'b' })
|
|
await component.getNextUpdatePromise()
|
|
for (const decorationSpan of element.querySelectorAll('.a, .b')) {
|
|
expect(decorationSpan.textContent).not.toBe('')
|
|
}
|
|
})
|
|
|
|
it('does not create empty text nodes when a text decoration ends right after a text tag', async () => {
|
|
const { component, editor } = buildComponent()
|
|
const marker = editor.markBufferRange([[0, 8], [0, 29]])
|
|
editor.decorateMarker(marker, { type: 'text', class: 'a' })
|
|
await component.getNextUpdatePromise()
|
|
for (const textNode of textNodesForScreenRow(component, 0)) {
|
|
expect(textNode.textContent).not.toBe('')
|
|
}
|
|
})
|
|
|
|
function textContentOnRowMatchingSelector (component, row, selector) {
|
|
return Array.from(
|
|
lineNodeForScreenRow(component, row).querySelectorAll(selector)
|
|
)
|
|
.map(span => span.textContent)
|
|
.join('')
|
|
}
|
|
})
|
|
|
|
describe('mouse input', () => {
|
|
describe('on the lines', () => {
|
|
describe('when there is only one cursor', () => {
|
|
it('positions the cursor on single-click or when middle-clicking', async () => {
|
|
for (const button of [0, 1]) {
|
|
const { component, editor } = buildComponent()
|
|
const { lineHeight } = component.measurements
|
|
|
|
editor.setCursorScreenPosition([Infinity, Infinity], {
|
|
autoscroll: false
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX: clientLeftForCharacter(component, 0, 0) - 1,
|
|
clientY: clientTopForLine(component, 0) - 1
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
|
|
const maxRow = editor.getLastScreenRow()
|
|
editor.setCursorScreenPosition([Infinity, Infinity], {
|
|
autoscroll: false
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
clientLeftForCharacter(
|
|
component,
|
|
maxRow,
|
|
editor.lineLengthForScreenRow(maxRow)
|
|
) + 1,
|
|
clientY: clientTopForLine(component, maxRow) + 1
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([
|
|
maxRow,
|
|
editor.lineLengthForScreenRow(maxRow)
|
|
])
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
clientLeftForCharacter(
|
|
component,
|
|
0,
|
|
editor.lineLengthForScreenRow(0)
|
|
) + 1,
|
|
clientY: clientTopForLine(component, 0) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([
|
|
0,
|
|
editor.lineLengthForScreenRow(0)
|
|
])
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
(clientLeftForCharacter(component, 3, 0) +
|
|
clientLeftForCharacter(component, 3, 1)) /
|
|
2,
|
|
clientY: clientTopForLine(component, 1) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([1, 0])
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
(clientLeftForCharacter(component, 3, 14) +
|
|
clientLeftForCharacter(component, 3, 15)) /
|
|
2,
|
|
clientY: clientTopForLine(component, 3) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([3, 14])
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
(clientLeftForCharacter(component, 3, 14) +
|
|
clientLeftForCharacter(component, 3, 15)) /
|
|
2 +
|
|
1,
|
|
clientY: clientTopForLine(component, 3) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([3, 15])
|
|
|
|
editor.getBuffer().setTextInRange([[3, 14], [3, 15]], '🐣')
|
|
await component.getNextUpdatePromise()
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
(clientLeftForCharacter(component, 3, 14) +
|
|
clientLeftForCharacter(component, 3, 16)) /
|
|
2,
|
|
clientY: clientTopForLine(component, 3) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([3, 14])
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button,
|
|
clientX:
|
|
(clientLeftForCharacter(component, 3, 14) +
|
|
clientLeftForCharacter(component, 3, 16)) /
|
|
2 +
|
|
1,
|
|
clientY: clientTopForLine(component, 3) + lineHeight / 2
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([3, 16])
|
|
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('when the input is for the primary mouse button', () => {
|
|
it('selects words on double-click', () => {
|
|
const { component, editor } = buildComponent()
|
|
const { clientX, clientY } = clientPositionForCharacter(
|
|
component,
|
|
1,
|
|
16
|
|
)
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button: 0,
|
|
clientX,
|
|
clientY
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 2,
|
|
button: 0,
|
|
clientX,
|
|
clientY
|
|
})
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 13], [1, 21]])
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('selects lines on triple-click', () => {
|
|
const { component, editor } = buildComponent()
|
|
const { clientX, clientY } = clientPositionForCharacter(
|
|
component,
|
|
1,
|
|
16
|
|
)
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button: 0,
|
|
clientX,
|
|
clientY
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 2,
|
|
button: 0,
|
|
clientX,
|
|
clientY
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 3,
|
|
button: 0,
|
|
clientX,
|
|
clientY
|
|
})
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [2, 0]])
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('adds or removes cursors when holding cmd or ctrl when single-clicking', () => {
|
|
const { component, editor } = buildComponent({ platform: 'darwin' })
|
|
expect(editor.getCursorScreenPositions()).toEqual([[0, 0]])
|
|
|
|
// add cursor at 1, 16
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 16), {
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
expect(editor.getCursorScreenPositions()).toEqual([[0, 0], [1, 16]])
|
|
|
|
// remove cursor at 0, 0
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 0, 0), {
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
expect(editor.getCursorScreenPositions()).toEqual([[1, 16]])
|
|
|
|
// cmd-click cursor at 1, 16 but don't remove it because it's the last one
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 16), {
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
expect(editor.getCursorScreenPositions()).toEqual([[1, 16]])
|
|
|
|
// cmd-clicking within a selection destroys it
|
|
editor.addSelectionForScreenRange([[2, 10], [2, 15]], {
|
|
autoscroll: false
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[1, 16], [1, 16]],
|
|
[[2, 10], [2, 15]]
|
|
])
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 2, 13), {
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[1, 16], [1, 16]]])
|
|
|
|
// ctrl-click does not add cursors on macOS, nor does it move the cursor
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 4), {
|
|
detail: 1,
|
|
button: 0,
|
|
ctrlKey: true
|
|
})
|
|
)
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[1, 16], [1, 16]]])
|
|
|
|
// ctrl-click adds cursors on platforms *other* than macOS
|
|
component.props.platform = 'win32'
|
|
editor.setCursorScreenPosition([1, 4], { autoscroll: false })
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 16), {
|
|
detail: 1,
|
|
button: 0,
|
|
ctrlKey: true
|
|
})
|
|
)
|
|
expect(editor.getCursorScreenPositions()).toEqual([[1, 4], [1, 16]])
|
|
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('adds word selections when holding cmd or ctrl when double-clicking', () => {
|
|
const { component, editor } = buildComponent()
|
|
editor.addCursorAtScreenPosition([1, 16], { autoscroll: false })
|
|
expect(editor.getCursorScreenPositions()).toEqual([[0, 0], [1, 16]])
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 16), {
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
component.didMouseDownOnContent(
|
|
Object.assign(clientPositionForCharacter(component, 1, 16), {
|
|
detail: 2,
|
|
button: 0,
|
|
metaKey: true
|
|
})
|
|
)
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[1, 13], [1, 21]]
|
|
])
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('adds line selections when holding cmd or ctrl when triple-clicking', () => {
|
|
const { component, editor } = buildComponent()
|
|
editor.addCursorAtScreenPosition([1, 16], { autoscroll: false })
|
|
expect(editor.getCursorScreenPositions()).toEqual([[0, 0], [1, 16]])
|
|
|
|
const { clientX, clientY } = clientPositionForCharacter(
|
|
component,
|
|
1,
|
|
16
|
|
)
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: true,
|
|
clientX,
|
|
clientY
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 2,
|
|
button: 0,
|
|
metaKey: true,
|
|
clientX,
|
|
clientY
|
|
})
|
|
component.didMouseDownOnContent({
|
|
detail: 3,
|
|
button: 0,
|
|
metaKey: true,
|
|
clientX,
|
|
clientY
|
|
})
|
|
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[1, 0], [2, 0]]
|
|
])
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('expands the last selection on shift-click', () => {
|
|
const { component, editor } = buildComponent()
|
|
|
|
editor.setCursorScreenPosition([2, 18], { autoscroll: false })
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [2, 18]])
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 4, 4)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 18], [4, 4]])
|
|
|
|
// reorients word-wise selections to keep the word selected regardless of
|
|
// where the subsequent shift-click occurs
|
|
editor.setCursorScreenPosition([2, 18], { autoscroll: false })
|
|
editor.getLastSelection().selectWord({ autoscroll: false })
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 2], [2, 20]])
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 3, 11)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 14], [3, 13]])
|
|
|
|
// reorients line-wise selections to keep the line selected regardless of
|
|
// where the subsequent shift-click occurs
|
|
editor.setCursorScreenPosition([2, 18], { autoscroll: false })
|
|
editor.getLastSelection().selectLine(null, { autoscroll: false })
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [3, 0]])
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
shiftKey: true
|
|
},
|
|
clientPositionForCharacter(component, 3, 11)
|
|
)
|
|
)
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [4, 0]])
|
|
|
|
expect(editor.testAutoscrollRequests).toEqual([])
|
|
})
|
|
|
|
it('expands the last selection on drag', () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
|
|
{
|
|
const {
|
|
didDrag,
|
|
didStopDragging
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[0][0]
|
|
didDrag(clientPositionForCharacter(component, 8, 8))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [8, 8]])
|
|
didDrag(clientPositionForCharacter(component, 4, 8))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [4, 8]])
|
|
didStopDragging()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [4, 8]])
|
|
}
|
|
|
|
// Click-drag a second selection... selections are not merged until the
|
|
// drag stops.
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0,
|
|
metaKey: 1
|
|
},
|
|
clientPositionForCharacter(component, 8, 8)
|
|
)
|
|
)
|
|
{
|
|
const {
|
|
didDrag,
|
|
didStopDragging
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[1][0]
|
|
didDrag(clientPositionForCharacter(component, 2, 8))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[1, 4], [4, 8]],
|
|
[[2, 8], [8, 8]]
|
|
])
|
|
didDrag(clientPositionForCharacter(component, 6, 8))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[1, 4], [4, 8]],
|
|
[[6, 8], [8, 8]]
|
|
])
|
|
didDrag(clientPositionForCharacter(component, 2, 8))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[1, 4], [4, 8]],
|
|
[[2, 8], [8, 8]]
|
|
])
|
|
didStopDragging()
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[1, 4], [8, 8]]])
|
|
}
|
|
})
|
|
|
|
it('expands the selection word-wise on double-click-drag', () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 1,
|
|
button: 0
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
component.didMouseDownOnContent(
|
|
Object.assign(
|
|
{
|
|
detail: 2,
|
|
button: 0
|
|
},
|
|
clientPositionForCharacter(component, 1, 4)
|
|
)
|
|
)
|
|
|
|
const {
|
|
didDrag
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[1][0]
|
|
didDrag(clientPositionForCharacter(component, 0, 8))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[0, 4], [1, 5]])
|
|
didDrag(clientPositionForCharacter(component, 2, 10))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 2], [2, 13]])
|
|
})
|
|
|
|
it('expands the selection line-wise on triple-click-drag', () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
|
|
const tripleClickPosition = clientPositionForCharacter(
|
|
component,
|
|
2,
|
|
8
|
|
)
|
|
component.didMouseDownOnContent(
|
|
Object.assign({ detail: 1, button: 0 }, tripleClickPosition)
|
|
)
|
|
component.didMouseDownOnContent(
|
|
Object.assign({ detail: 2, button: 0 }, tripleClickPosition)
|
|
)
|
|
component.didMouseDownOnContent(
|
|
Object.assign({ detail: 3, button: 0 }, tripleClickPosition)
|
|
)
|
|
|
|
const {
|
|
didDrag
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[2][0]
|
|
didDrag(clientPositionForCharacter(component, 1, 8))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [3, 0]])
|
|
didDrag(clientPositionForCharacter(component, 4, 10))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [5, 0]])
|
|
})
|
|
|
|
it('destroys folds when clicking on their fold markers', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
editor.foldBufferRow(1)
|
|
await component.getNextUpdatePromise()
|
|
|
|
const target = element.querySelector('.fold-marker')
|
|
const { clientX, clientY } = clientPositionForCharacter(
|
|
component,
|
|
1,
|
|
editor.lineLengthForScreenRow(1)
|
|
)
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button: 0,
|
|
target,
|
|
clientX,
|
|
clientY
|
|
})
|
|
expect(editor.isFoldedAtBufferRow(1)).toBe(false)
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
})
|
|
|
|
it('autoscrolls the content when dragging near the edge of the scroll container', async () => {
|
|
const { component } = buildComponent({
|
|
width: 200,
|
|
height: 200
|
|
})
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
|
|
let previousScrollTop = 0
|
|
let previousScrollLeft = 0
|
|
function assertScrolledDownAndRight () {
|
|
expect(component.getScrollTop()).toBeGreaterThan(previousScrollTop)
|
|
previousScrollTop = component.getScrollTop()
|
|
expect(component.getScrollLeft()).toBeGreaterThan(
|
|
previousScrollLeft
|
|
)
|
|
previousScrollLeft = component.getScrollLeft()
|
|
}
|
|
|
|
function assertScrolledUpAndLeft () {
|
|
expect(component.getScrollTop()).toBeLessThan(previousScrollTop)
|
|
previousScrollTop = component.getScrollTop()
|
|
expect(component.getScrollLeft()).toBeLessThan(previousScrollLeft)
|
|
previousScrollLeft = component.getScrollLeft()
|
|
}
|
|
|
|
component.didMouseDownOnContent({
|
|
detail: 1,
|
|
button: 0,
|
|
clientX: 100,
|
|
clientY: 100
|
|
})
|
|
const {
|
|
didDrag
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[0][0]
|
|
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDownAndRight()
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDownAndRight()
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDownAndRight()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUpAndLeft()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUpAndLeft()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUpAndLeft()
|
|
|
|
// Don't artificially update scroll position beyond possible values
|
|
expect(component.getScrollTop()).toBe(0)
|
|
expect(component.getScrollLeft()).toBe(0)
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
expect(component.getScrollTop()).toBe(0)
|
|
expect(component.getScrollLeft()).toBe(0)
|
|
|
|
const maxScrollTop = component.getMaxScrollTop()
|
|
const maxScrollLeft = component.getMaxScrollLeft()
|
|
setScrollTop(component, maxScrollTop)
|
|
await setScrollLeft(component, maxScrollLeft)
|
|
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
expect(component.getScrollTop()).toBe(maxScrollTop)
|
|
expect(component.getScrollLeft()).toBe(maxScrollLeft)
|
|
})
|
|
})
|
|
|
|
it('pastes the previously selected text when clicking the middle mouse button on Linux', async () => {
|
|
spyOn(electron.ipcRenderer, 'send').andCallFake(function (
|
|
eventName,
|
|
selectedText
|
|
) {
|
|
if (eventName === 'write-text-to-selection-clipboard') {
|
|
clipboard.writeText(selectedText, 'selection')
|
|
}
|
|
})
|
|
|
|
const { component, editor } = buildComponent({ platform: 'linux' })
|
|
|
|
// Middle mouse pasting.
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
await conditionPromise(() => TextEditor.clipboard.read() === 'sort')
|
|
component.didMouseDownOnContent({
|
|
button: 1,
|
|
clientX: clientLeftForCharacter(component, 10, 0),
|
|
clientY: clientTopForLine(component, 10)
|
|
})
|
|
expect(TextEditor.clipboard.read()).toBe('sort')
|
|
expect(editor.lineTextForBufferRow(10)).toBe('sort')
|
|
editor.undo()
|
|
|
|
// Ensure left clicks don't interfere.
|
|
editor.setSelectedBufferRange([[1, 2], [1, 5]])
|
|
await conditionPromise(() => TextEditor.clipboard.read() === 'var')
|
|
component.didMouseDownOnContent({
|
|
button: 0,
|
|
detail: 1,
|
|
clientX: clientLeftForCharacter(component, 10, 0),
|
|
clientY: clientTopForLine(component, 10)
|
|
})
|
|
component.didMouseDownOnContent({
|
|
button: 1,
|
|
clientX: clientLeftForCharacter(component, 10, 0),
|
|
clientY: clientTopForLine(component, 10)
|
|
})
|
|
expect(editor.lineTextForBufferRow(10)).toBe('var')
|
|
})
|
|
|
|
it('does not paste into a read only editor when clicking the middle mouse button on Linux', async () => {
|
|
spyOn(electron.ipcRenderer, 'send').andCallFake(function (
|
|
eventName,
|
|
selectedText
|
|
) {
|
|
if (eventName === 'write-text-to-selection-clipboard') {
|
|
clipboard.writeText(selectedText, 'selection')
|
|
}
|
|
})
|
|
|
|
const { component, editor } = buildComponent({
|
|
platform: 'linux',
|
|
readOnly: true
|
|
})
|
|
|
|
// Select the word 'sort' on line 2 and copy to clipboard
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
await conditionPromise(() => TextEditor.clipboard.read() === 'sort')
|
|
|
|
// Middle-click in the buffer at line 11, column 1
|
|
component.didMouseDownOnContent({
|
|
button: 1,
|
|
clientX: clientLeftForCharacter(component, 10, 0),
|
|
clientY: clientTopForLine(component, 10)
|
|
})
|
|
|
|
// Ensure that the correct text was copied but not pasted
|
|
expect(TextEditor.clipboard.read()).toBe('sort')
|
|
expect(editor.lineTextForBufferRow(10)).toBe('')
|
|
})
|
|
})
|
|
|
|
describe('on the line number gutter', () => {
|
|
it('selects all buffer rows intersecting the clicked screen row when a line number is clicked', async () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
|
|
await setEditorWidthInCharacters(component, 50)
|
|
editor.foldBufferRange([[4, Infinity], [7, Infinity]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Selects entire buffer line when clicked screen line is soft-wrapped
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
clientY: clientTopForLine(component, 3)
|
|
})
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 0], [5, 0]])
|
|
expect(editor.getSelectedBufferRange()).toEqual([[3, 0], [4, 0]])
|
|
|
|
// Selects entire screen line, even if folds cause that selection to
|
|
// span multiple buffer lines
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
clientY: clientTopForLine(component, 5)
|
|
})
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [6, 0]])
|
|
expect(editor.getSelectedBufferRange()).toEqual([[4, 0], [8, 0]])
|
|
})
|
|
|
|
it('adds new selections when a line number is meta-clicked', async () => {
|
|
const { component, editor } = buildComponent()
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
|
|
await setEditorWidthInCharacters(component, 50)
|
|
editor.foldBufferRange([[4, Infinity], [7, Infinity]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Selects entire buffer line when clicked screen line is soft-wrapped
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
metaKey: true,
|
|
clientY: clientTopForLine(component, 3)
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[3, 0], [5, 0]]
|
|
])
|
|
expect(editor.getSelectedBufferRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[3, 0], [4, 0]]
|
|
])
|
|
|
|
// Selects entire screen line, even if folds cause that selection to
|
|
// span multiple buffer lines
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
metaKey: true,
|
|
clientY: clientTopForLine(component, 5)
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[3, 0], [5, 0]],
|
|
[[5, 0], [6, 0]]
|
|
])
|
|
expect(editor.getSelectedBufferRanges()).toEqual([
|
|
[[0, 0], [0, 0]],
|
|
[[3, 0], [4, 0]],
|
|
[[4, 0], [8, 0]]
|
|
])
|
|
})
|
|
|
|
it('expands the last selection when a line number is shift-clicked', async () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
|
|
await setEditorWidthInCharacters(component, 50)
|
|
editor.foldBufferRange([[4, Infinity], [7, Infinity]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.setSelectedScreenRange([[3, 4], [3, 8]])
|
|
editor.addCursorAtScreenPosition([2, 10])
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
shiftKey: true,
|
|
clientY: clientTopForLine(component, 5)
|
|
})
|
|
|
|
expect(editor.getSelectedBufferRanges()).toEqual([
|
|
[[3, 4], [3, 8]],
|
|
[[2, 10], [8, 0]]
|
|
])
|
|
|
|
// Original selection is preserved when shift-click-dragging
|
|
const {
|
|
didDrag,
|
|
didStopDragging
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[0][0]
|
|
didDrag({
|
|
clientY: clientTopForLine(component, 1)
|
|
})
|
|
expect(editor.getSelectedBufferRanges()).toEqual([
|
|
[[3, 4], [3, 8]],
|
|
[[1, 0], [2, 10]]
|
|
])
|
|
|
|
didDrag({
|
|
clientY: clientTopForLine(component, 5)
|
|
})
|
|
|
|
didStopDragging()
|
|
expect(editor.getSelectedBufferRanges()).toEqual([[[2, 10], [8, 0]]])
|
|
})
|
|
|
|
it('expands the selection when dragging', async () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
editor.setSoftWrapped(true)
|
|
await component.getNextUpdatePromise()
|
|
|
|
await setEditorWidthInCharacters(component, 50)
|
|
editor.foldBufferRange([[4, Infinity], [7, Infinity]])
|
|
await component.getNextUpdatePromise()
|
|
|
|
editor.setSelectedScreenRange([[3, 4], [3, 6]])
|
|
|
|
component.didMouseDownOnLineNumberGutter({
|
|
button: 0,
|
|
metaKey: true,
|
|
clientY: clientTopForLine(component, 2)
|
|
})
|
|
|
|
const {
|
|
didDrag,
|
|
didStopDragging
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[0][0]
|
|
|
|
didDrag({
|
|
clientY: clientTopForLine(component, 1)
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[3, 4], [3, 6]],
|
|
[[1, 0], [3, 0]]
|
|
])
|
|
|
|
didDrag({
|
|
clientY: clientTopForLine(component, 5)
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[3, 4], [3, 6]],
|
|
[[2, 0], [6, 0]]
|
|
])
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
didDrag({
|
|
clientY: clientTopForLine(component, 3)
|
|
})
|
|
expect(editor.getSelectedScreenRanges()).toEqual([
|
|
[[3, 4], [3, 6]],
|
|
[[2, 0], [4, 4]]
|
|
])
|
|
|
|
didStopDragging()
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[2, 0], [4, 4]]])
|
|
})
|
|
|
|
it('toggles folding when clicking on the right icon of a foldable line number', async () => {
|
|
const { component, element, editor } = buildComponent()
|
|
let target = element
|
|
.querySelectorAll('.line-number')[1]
|
|
.querySelector('.icon-right')
|
|
expect(editor.isFoldedAtScreenRow(1)).toBe(false)
|
|
|
|
component.didMouseDownOnLineNumberGutter({
|
|
target,
|
|
button: 0,
|
|
clientY: clientTopForLine(component, 1)
|
|
})
|
|
expect(editor.isFoldedAtScreenRow(1)).toBe(true)
|
|
await component.getNextUpdatePromise()
|
|
|
|
component.didMouseDownOnLineNumberGutter({
|
|
target,
|
|
button: 0,
|
|
clientY: clientTopForLine(component, 1)
|
|
})
|
|
await component.getNextUpdatePromise()
|
|
expect(editor.isFoldedAtScreenRow(1)).toBe(false)
|
|
|
|
editor.foldBufferRange([[5, 12], [5, 17]])
|
|
await component.getNextUpdatePromise()
|
|
expect(editor.isFoldedAtScreenRow(5)).toBe(true)
|
|
|
|
target = element
|
|
.querySelectorAll('.line-number')[4]
|
|
.querySelector('.icon-right')
|
|
component.didMouseDownOnLineNumberGutter({
|
|
target,
|
|
button: 0,
|
|
clientY: clientTopForLine(component, 4)
|
|
})
|
|
expect(editor.isFoldedAtScreenRow(4)).toBe(false)
|
|
})
|
|
|
|
it('autoscrolls when dragging near the top or bottom of the gutter', async () => {
|
|
const { component } = buildComponent({
|
|
width: 200,
|
|
height: 200
|
|
})
|
|
spyOn(component, 'handleMouseDragUntilMouseUp')
|
|
|
|
let previousScrollTop = 0
|
|
let previousScrollLeft = 0
|
|
function assertScrolledDown () {
|
|
expect(component.getScrollTop()).toBeGreaterThan(previousScrollTop)
|
|
previousScrollTop = component.getScrollTop()
|
|
expect(component.getScrollLeft()).toBe(previousScrollLeft)
|
|
previousScrollLeft = component.getScrollLeft()
|
|
}
|
|
|
|
function assertScrolledUp () {
|
|
expect(component.getScrollTop()).toBeLessThan(previousScrollTop)
|
|
previousScrollTop = component.getScrollTop()
|
|
expect(component.getScrollLeft()).toBe(previousScrollLeft)
|
|
previousScrollLeft = component.getScrollLeft()
|
|
}
|
|
|
|
component.didMouseDownOnLineNumberGutter({
|
|
detail: 1,
|
|
button: 0,
|
|
clientX: 0,
|
|
clientY: 100
|
|
})
|
|
const {
|
|
didDrag
|
|
} = component.handleMouseDragUntilMouseUp.argsForCall[0][0]
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDown()
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDown()
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
assertScrolledDown()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUp()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUp()
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
assertScrolledUp()
|
|
|
|
// Don't artificially update scroll measurements beyond the minimum or
|
|
// maximum possible scroll positions
|
|
expect(component.getScrollTop()).toBe(0)
|
|
expect(component.getScrollLeft()).toBe(0)
|
|
didDrag({
|
|
clientX: component.getGutterContainerWidth() + 1,
|
|
clientY: 1
|
|
})
|
|
expect(component.getScrollTop()).toBe(0)
|
|
expect(component.getScrollLeft()).toBe(0)
|
|
|
|
const maxScrollTop = component.getMaxScrollTop()
|
|
const maxScrollLeft = component.getMaxScrollLeft()
|
|
setScrollTop(component, maxScrollTop)
|
|
await setScrollLeft(component, maxScrollLeft)
|
|
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
didDrag({ clientX: 199, clientY: 199 })
|
|
expect(component.getScrollTop()).toBe(maxScrollTop)
|
|
expect(component.getScrollLeft()).toBe(maxScrollLeft)
|
|
})
|
|
})
|
|
|
|
describe('on the scrollbars', () => {
|
|
it('delegates the mousedown events to the parent component unless the mousedown was on the actual scrollbar', async () => {
|
|
const { component, editor } = buildComponent({ height: 100 })
|
|
await setEditorWidthInCharacters(component, 6)
|
|
|
|
const verticalScrollbar = component.refs.verticalScrollbar
|
|
const horizontalScrollbar = component.refs.horizontalScrollbar
|
|
const leftEdgeOfVerticalScrollbar =
|
|
verticalScrollbar.element.getBoundingClientRect().right -
|
|
verticalScrollbarWidth
|
|
const topEdgeOfHorizontalScrollbar =
|
|
horizontalScrollbar.element.getBoundingClientRect().bottom -
|
|
horizontalScrollbarHeight
|
|
|
|
verticalScrollbar.didMouseDown({
|
|
button: 0,
|
|
detail: 1,
|
|
clientY: clientTopForLine(component, 4),
|
|
clientX: leftEdgeOfVerticalScrollbar
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
|
|
verticalScrollbar.didMouseDown({
|
|
button: 0,
|
|
detail: 1,
|
|
clientY: clientTopForLine(component, 4),
|
|
clientX: leftEdgeOfVerticalScrollbar - 1
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([4, 6])
|
|
|
|
horizontalScrollbar.didMouseDown({
|
|
button: 0,
|
|
detail: 1,
|
|
clientY: topEdgeOfHorizontalScrollbar,
|
|
clientX: component.refs.content.getBoundingClientRect().left
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([4, 6])
|
|
|
|
horizontalScrollbar.didMouseDown({
|
|
button: 0,
|
|
detail: 1,
|
|
clientY: topEdgeOfHorizontalScrollbar - 1,
|
|
clientX: component.refs.content.getBoundingClientRect().left
|
|
})
|
|
expect(editor.getCursorScreenPosition()).toEqual([4, 0])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('paste event', () => {
|
|
it("prevents the browser's default processing for the event on Linux", () => {
|
|
const { component } = buildComponent({ platform: 'linux' })
|
|
const event = { preventDefault: () => {} }
|
|
spyOn(event, 'preventDefault')
|
|
|
|
component.didPaste(event)
|
|
expect(event.preventDefault).toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
describe('keyboard input', () => {
|
|
it('handles inserted accented characters via the press-and-hold menu on macOS correctly', () => {
|
|
const { editor, component } = buildComponent({
|
|
text: '',
|
|
chromeVersion: 57
|
|
})
|
|
editor.insertText('x')
|
|
editor.setCursorBufferPosition([0, 1])
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// then closing it via ESC.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'Escape' })
|
|
component.didKeyup({ code: 'Escape' })
|
|
expect(editor.getText()).toBe('xa')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xaa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// then selecting an alternative by typing a number.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'Digit2' })
|
|
component.didKeyup({ code: 'Digit2' })
|
|
component.didTextInput({
|
|
data: 'á',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
expect(editor.getText()).toBe('xá')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xáa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// then selecting an alternative by clicking on it.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'á',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
expect(editor.getText()).toBe('xá')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xáa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// cycling through the alternatives with the arrows, then selecting one of them with Enter.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionStart({ data: '' })
|
|
component.didCompositionUpdate({ data: 'à' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xà')
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xá')
|
|
component.didKeydown({ code: 'Enter' })
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didTextInput({
|
|
data: 'á',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didCompositionEnd({
|
|
data: 'á',
|
|
target: component.refs.cursorsAndInput.refs.hiddenInput
|
|
})
|
|
component.didKeyup({ code: 'Enter' })
|
|
expect(editor.getText()).toBe('xá')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xáa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// cycling through the alternatives with the arrows, then closing it via ESC.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionStart({ data: '' })
|
|
component.didCompositionUpdate({ data: 'à' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xà')
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xá')
|
|
component.didKeydown({ code: 'Escape' })
|
|
component.didCompositionUpdate({ data: 'a' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didCompositionEnd({
|
|
data: 'a',
|
|
target: component.refs.cursorsAndInput.refs.hiddenInput
|
|
})
|
|
component.didKeyup({ code: 'Escape' })
|
|
expect(editor.getText()).toBe('xa')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xaa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate pressing the O key and holding the A key to open the press-and-hold menu right before releasing the O key,
|
|
// cycling through the alternatives with the arrows, then closing it via ESC.
|
|
component.didKeydown({ code: 'KeyO' })
|
|
component.didKeypress({ code: 'KeyO' })
|
|
component.didTextInput({
|
|
data: 'o',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyO' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionStart({ data: '' })
|
|
component.didCompositionUpdate({ data: 'à' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xoà')
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xoá')
|
|
component.didKeydown({ code: 'Escape' })
|
|
component.didCompositionUpdate({ data: 'a' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didCompositionEnd({
|
|
data: 'a',
|
|
target: component.refs.cursorsAndInput.refs.hiddenInput
|
|
})
|
|
component.didKeyup({ code: 'Escape' })
|
|
expect(editor.getText()).toBe('xoa')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
|
|
// Simulate holding the A key to open the press-and-hold menu,
|
|
// cycling through the alternatives with the arrows, then closing it by changing focus.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeyup({ code: 'KeyA' })
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionStart({ data: '' })
|
|
component.didCompositionUpdate({ data: 'à' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xà')
|
|
component.didKeydown({ code: 'ArrowRight' })
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didKeyup({ code: 'ArrowRight' })
|
|
expect(editor.getText()).toBe('xá')
|
|
component.didCompositionUpdate({ data: 'á' })
|
|
component.didTextInput({
|
|
data: 'á',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didCompositionEnd({
|
|
data: 'á',
|
|
target: component.refs.cursorsAndInput.refs.hiddenInput
|
|
})
|
|
expect(editor.getText()).toBe('xá')
|
|
// Ensure another "a" can be typed correctly.
|
|
component.didKeydown({ code: 'KeyA' })
|
|
component.didKeypress({ code: 'KeyA' })
|
|
component.didTextInput({
|
|
data: 'a',
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {}
|
|
})
|
|
component.didKeyup({ code: 'KeyA' })
|
|
expect(editor.getText()).toBe('xáa')
|
|
editor.undo()
|
|
expect(editor.getText()).toBe('x')
|
|
})
|
|
})
|
|
|
|
describe('styling changes', () => {
|
|
it('updates the rendered content based on new measurements when the font dimensions change', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 1,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
editor.setCursorScreenPosition([1, 29], { autoscroll: false })
|
|
await component.getNextUpdatePromise()
|
|
|
|
let cursorNode = element.querySelector('.cursor')
|
|
const initialBaseCharacterWidth = editor.getDefaultCharWidth()
|
|
const initialDoubleCharacterWidth = editor.getDoubleWidthCharWidth()
|
|
const initialHalfCharacterWidth = editor.getHalfWidthCharWidth()
|
|
const initialKoreanCharacterWidth = editor.getKoreanCharWidth()
|
|
const initialRenderedLineCount = queryOnScreenLineElements(element).length
|
|
const initialFontSize = parseInt(getComputedStyle(element).fontSize)
|
|
|
|
expect(initialKoreanCharacterWidth).toBeDefined()
|
|
expect(initialDoubleCharacterWidth).toBeDefined()
|
|
expect(initialHalfCharacterWidth).toBeDefined()
|
|
expect(initialBaseCharacterWidth).toBeDefined()
|
|
expect(initialDoubleCharacterWidth).not.toBe(initialBaseCharacterWidth)
|
|
expect(initialHalfCharacterWidth).not.toBe(initialBaseCharacterWidth)
|
|
expect(initialKoreanCharacterWidth).not.toBe(initialBaseCharacterWidth)
|
|
verifyCursorPosition(component, cursorNode, 1, 29)
|
|
|
|
element.style.fontSize = initialFontSize - 5 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(editor.getDefaultCharWidth()).toBeLessThan(
|
|
initialBaseCharacterWidth
|
|
)
|
|
expect(editor.getDoubleWidthCharWidth()).toBeLessThan(
|
|
initialDoubleCharacterWidth
|
|
)
|
|
expect(editor.getHalfWidthCharWidth()).toBeLessThan(
|
|
initialHalfCharacterWidth
|
|
)
|
|
expect(editor.getKoreanCharWidth()).toBeLessThan(
|
|
initialKoreanCharacterWidth
|
|
)
|
|
expect(queryOnScreenLineElements(element).length).toBeGreaterThan(
|
|
initialRenderedLineCount
|
|
)
|
|
verifyCursorPosition(component, cursorNode, 1, 29)
|
|
|
|
element.style.fontSize = initialFontSize + 10 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(editor.getDefaultCharWidth()).toBeGreaterThan(
|
|
initialBaseCharacterWidth
|
|
)
|
|
expect(editor.getDoubleWidthCharWidth()).toBeGreaterThan(
|
|
initialDoubleCharacterWidth
|
|
)
|
|
expect(editor.getHalfWidthCharWidth()).toBeGreaterThan(
|
|
initialHalfCharacterWidth
|
|
)
|
|
expect(editor.getKoreanCharWidth()).toBeGreaterThan(
|
|
initialKoreanCharacterWidth
|
|
)
|
|
expect(queryOnScreenLineElements(element).length).toBeLessThan(
|
|
initialRenderedLineCount
|
|
)
|
|
verifyCursorPosition(component, cursorNode, 1, 29)
|
|
})
|
|
|
|
it('maintains the scrollTopRow and scrollLeftColumn when the font size changes', async () => {
|
|
const { component, element } = buildComponent({
|
|
rowsPerTile: 1,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
await setEditorWidthInCharacters(component, 20)
|
|
component.setScrollTopRow(4)
|
|
component.setScrollLeftColumn(10)
|
|
await component.getNextUpdatePromise()
|
|
|
|
const initialFontSize = parseInt(getComputedStyle(element).fontSize)
|
|
element.style.fontSize = initialFontSize - 5 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTopRow()).toBe(4)
|
|
|
|
element.style.fontSize = initialFontSize + 5 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollTopRow()).toBe(4)
|
|
})
|
|
|
|
it('gracefully handles the editor being hidden after a styling change', async () => {
|
|
const { component, element } = buildComponent({
|
|
autoHeight: false
|
|
})
|
|
element.style.fontSize =
|
|
parseInt(getComputedStyle(element).fontSize) + 5 + 'px'
|
|
TextEditor.didUpdateStyles()
|
|
element.style.display = 'none'
|
|
await component.getNextUpdatePromise()
|
|
})
|
|
|
|
it('does not throw an exception when the editor is soft-wrapped and changing the font size changes also the longest screen line', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
editor.setText(
|
|
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n' +
|
|
'eiusmod tempor incididunt ut labore et dolore magna' +
|
|
'aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
|
|
)
|
|
editor.setSoftWrapped(true)
|
|
await setEditorHeightInLines(component, 2)
|
|
await setEditorWidthInCharacters(component, 56)
|
|
await setScrollTop(component, 3 * component.getLineHeight())
|
|
|
|
element.style.fontSize = '20px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
})
|
|
|
|
it('updates the width of the lines div based on the longest screen line', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 1,
|
|
autoHeight: false
|
|
})
|
|
editor.setText(
|
|
'Lorem ipsum dolor sit\n' +
|
|
'amet, consectetur adipisicing\n' +
|
|
'elit, sed do\n' +
|
|
'eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
|
|
)
|
|
await setEditorHeightInLines(component, 2)
|
|
|
|
element.style.fontSize = '20px'
|
|
TextEditor.didUpdateStyles()
|
|
await component.getNextUpdatePromise()
|
|
|
|
// Capture the width of the lines before requesting the width of
|
|
// longest line, because making that request forces a DOM update
|
|
const actualWidth = element.querySelector('.lines').style.width
|
|
const expectedWidth = Math.ceil(
|
|
component.pixelPositionForScreenPosition(Point(3, Infinity)).left +
|
|
component.getBaseCharacterWidth()
|
|
)
|
|
expect(actualWidth).toBe(expectedWidth + 'px')
|
|
})
|
|
})
|
|
|
|
describe('synchronous updates', () => {
|
|
let editorElementWasUpdatedSynchronously
|
|
|
|
beforeEach(() => {
|
|
editorElementWasUpdatedSynchronously =
|
|
TextEditorElement.prototype.updatedSynchronously
|
|
})
|
|
|
|
afterEach(() => {
|
|
TextEditorElement.prototype.setUpdatedSynchronously(
|
|
editorElementWasUpdatedSynchronously
|
|
)
|
|
})
|
|
|
|
it('updates synchronously when updatedSynchronously is true', () => {
|
|
const editor = buildEditor()
|
|
const { element } = new TextEditorComponent({
|
|
model: editor,
|
|
updatedSynchronously: true
|
|
})
|
|
jasmine.attachToDOM(element)
|
|
|
|
editor.setText('Lorem ipsum dolor')
|
|
expect(
|
|
queryOnScreenLineElements(element).map(l => l.textContent)
|
|
).toEqual([editor.lineTextForScreenRow(0)])
|
|
})
|
|
|
|
it('does not throw an exception on attachment when setting the soft-wrap column', () => {
|
|
const { element, editor } = buildComponent({
|
|
width: 435,
|
|
attach: false,
|
|
updatedSynchronously: true
|
|
})
|
|
editor.setSoftWrapped(true)
|
|
spyOn(window, 'onerror').andCallThrough()
|
|
jasmine.attachToDOM(element) // should not throw an exception
|
|
expect(window.onerror).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('updates synchronously when creating a component via TextEditor and TextEditorElement.prototype.updatedSynchronously is true', () => {
|
|
TextEditorElement.prototype.setUpdatedSynchronously(true)
|
|
const editor = buildEditor()
|
|
const element = editor.element
|
|
jasmine.attachToDOM(element)
|
|
|
|
editor.setText('Lorem ipsum dolor')
|
|
expect(
|
|
queryOnScreenLineElements(element).map(l => l.textContent)
|
|
).toEqual([editor.lineTextForScreenRow(0)])
|
|
})
|
|
|
|
it('measures dimensions synchronously when measureDimensions is called on the component', () => {
|
|
TextEditorElement.prototype.setUpdatedSynchronously(true)
|
|
const editor = buildEditor({ autoHeight: false })
|
|
const element = editor.element
|
|
jasmine.attachToDOM(element)
|
|
|
|
element.style.height = '100px'
|
|
expect(element.component.getClientContainerHeight()).not.toBe(100)
|
|
element.component.measureDimensions()
|
|
expect(element.component.getClientContainerHeight()).toBe(100)
|
|
})
|
|
})
|
|
|
|
describe('pixelPositionForScreenPosition(point)', () => {
|
|
it('returns the pixel position for the given point, regardless of whether or not it is currently on screen', async () => {
|
|
const { component, editor } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
await setScrollTop(component, 3 * component.getLineHeight())
|
|
|
|
const { component: referenceComponent } = buildComponent()
|
|
const referenceContentRect = referenceComponent.refs.content.getBoundingClientRect()
|
|
|
|
{
|
|
const { top, left } = component.pixelPositionForScreenPosition({
|
|
row: 0,
|
|
column: 0
|
|
})
|
|
expect(top).toBe(
|
|
clientTopForLine(referenceComponent, 0) - referenceContentRect.top
|
|
)
|
|
expect(left).toBe(
|
|
clientLeftForCharacter(referenceComponent, 0, 0) -
|
|
referenceContentRect.left
|
|
)
|
|
}
|
|
|
|
{
|
|
const { top, left } = component.pixelPositionForScreenPosition({
|
|
row: 0,
|
|
column: 5
|
|
})
|
|
expect(top).toBe(
|
|
clientTopForLine(referenceComponent, 0) - referenceContentRect.top
|
|
)
|
|
expect(left).toBe(
|
|
clientLeftForCharacter(referenceComponent, 0, 5) -
|
|
referenceContentRect.left
|
|
)
|
|
}
|
|
|
|
{
|
|
const { top, left } = component.pixelPositionForScreenPosition({
|
|
row: 12,
|
|
column: 1
|
|
})
|
|
expect(top).toBe(
|
|
clientTopForLine(referenceComponent, 12) - referenceContentRect.top
|
|
)
|
|
expect(left).toBe(
|
|
clientLeftForCharacter(referenceComponent, 12, 1) -
|
|
referenceContentRect.left
|
|
)
|
|
}
|
|
|
|
// Measuring a currently rendered line while an autoscroll that causes
|
|
// that line to go off-screen is in progress.
|
|
{
|
|
editor.setCursorScreenPosition([10, 0])
|
|
const { top, left } = component.pixelPositionForScreenPosition({
|
|
row: 3,
|
|
column: 5
|
|
})
|
|
expect(top).toBe(
|
|
clientTopForLine(referenceComponent, 3) - referenceContentRect.top
|
|
)
|
|
expect(left).toBe(
|
|
clientLeftForCharacter(referenceComponent, 3, 5) -
|
|
referenceContentRect.left
|
|
)
|
|
}
|
|
})
|
|
|
|
it('does not get the component into an inconsistent state when the model has unflushed changes (regression)', async () => {
|
|
const { component, editor } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false,
|
|
text: ''
|
|
})
|
|
await setEditorHeightInLines(component, 10)
|
|
|
|
const updatePromise = editor.getBuffer().append('hi\n')
|
|
component.screenPositionForPixelPosition({ top: 800, left: 1 })
|
|
await updatePromise
|
|
})
|
|
|
|
it('does not shift cursors downward or render off-screen content when measuring off-screen lines (regression)', async () => {
|
|
const { component, element } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
component.pixelPositionForScreenPosition({
|
|
row: 12,
|
|
column: 1
|
|
})
|
|
|
|
expect(element.querySelector('.cursor').getBoundingClientRect().top).toBe(
|
|
component.refs.lineTiles.getBoundingClientRect().top
|
|
)
|
|
expect(
|
|
element.querySelector('.line[data-screen-row="12"]').style.visibility
|
|
).toBe('hidden')
|
|
|
|
// Ensure previously measured off screen lines don't have any weird
|
|
// styling when they come on screen in the next frame
|
|
await setEditorHeightInLines(component, 13)
|
|
const previouslyMeasuredLineElement = element.querySelector(
|
|
'.line[data-screen-row="12"]'
|
|
)
|
|
expect(previouslyMeasuredLineElement.style.display).toBe('')
|
|
expect(previouslyMeasuredLineElement.style.visibility).toBe('')
|
|
})
|
|
})
|
|
|
|
describe('screenPositionForPixelPosition', () => {
|
|
it('returns the screen position for the given pixel position, regardless of whether or not it is currently on screen', async () => {
|
|
const { component, editor } = buildComponent({
|
|
rowsPerTile: 2,
|
|
autoHeight: false
|
|
})
|
|
await setEditorHeightInLines(component, 3)
|
|
await setScrollTop(component, 3 * component.getLineHeight())
|
|
const { component: referenceComponent } = buildComponent()
|
|
|
|
{
|
|
const pixelPosition = referenceComponent.pixelPositionForScreenPosition(
|
|
{ row: 0, column: 0 }
|
|
)
|
|
pixelPosition.top += component.getLineHeight() / 3
|
|
pixelPosition.left += component.getBaseCharacterWidth() / 3
|
|
expect(component.screenPositionForPixelPosition(pixelPosition)).toEqual(
|
|
[0, 0]
|
|
)
|
|
}
|
|
|
|
{
|
|
const pixelPosition = referenceComponent.pixelPositionForScreenPosition(
|
|
{ row: 0, column: 5 }
|
|
)
|
|
pixelPosition.top += component.getLineHeight() / 3
|
|
pixelPosition.left += component.getBaseCharacterWidth() / 3
|
|
expect(component.screenPositionForPixelPosition(pixelPosition)).toEqual(
|
|
[0, 5]
|
|
)
|
|
}
|
|
|
|
{
|
|
const pixelPosition = referenceComponent.pixelPositionForScreenPosition(
|
|
{ row: 5, column: 7 }
|
|
)
|
|
pixelPosition.top += component.getLineHeight() / 3
|
|
pixelPosition.left += component.getBaseCharacterWidth() / 3
|
|
expect(component.screenPositionForPixelPosition(pixelPosition)).toEqual(
|
|
[5, 7]
|
|
)
|
|
}
|
|
|
|
{
|
|
const pixelPosition = referenceComponent.pixelPositionForScreenPosition(
|
|
{ row: 12, column: 1 }
|
|
)
|
|
pixelPosition.top += component.getLineHeight() / 3
|
|
pixelPosition.left += component.getBaseCharacterWidth() / 3
|
|
expect(component.screenPositionForPixelPosition(pixelPosition)).toEqual(
|
|
[12, 1]
|
|
)
|
|
}
|
|
|
|
// Measuring a currently rendered line while an autoscroll that causes
|
|
// that line to go off-screen is in progress.
|
|
{
|
|
const pixelPosition = referenceComponent.pixelPositionForScreenPosition(
|
|
{ row: 3, column: 4 }
|
|
)
|
|
pixelPosition.top += component.getLineHeight() / 3
|
|
pixelPosition.left += component.getBaseCharacterWidth() / 3
|
|
editor.setCursorBufferPosition([10, 0])
|
|
expect(component.screenPositionForPixelPosition(pixelPosition)).toEqual(
|
|
[3, 4]
|
|
)
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('model methods that delegate to the component / element', () => {
|
|
it('delegates setHeight and getHeight to the component', async () => {
|
|
const { component, editor } = buildComponent({
|
|
autoHeight: false
|
|
})
|
|
spyOn(Grim, 'deprecate')
|
|
expect(editor.getHeight()).toBe(component.getScrollContainerHeight())
|
|
expect(Grim.deprecate.callCount).toBe(1)
|
|
|
|
editor.setHeight(100)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollContainerHeight()).toBe(100)
|
|
expect(Grim.deprecate.callCount).toBe(2)
|
|
})
|
|
|
|
it('delegates setWidth and getWidth to the component', async () => {
|
|
const { component, editor } = buildComponent()
|
|
spyOn(Grim, 'deprecate')
|
|
expect(editor.getWidth()).toBe(component.getScrollContainerWidth())
|
|
expect(Grim.deprecate.callCount).toBe(1)
|
|
|
|
editor.setWidth(100)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.getScrollContainerWidth()).toBe(100)
|
|
expect(Grim.deprecate.callCount).toBe(2)
|
|
})
|
|
|
|
it('delegates getFirstVisibleScreenRow, getLastVisibleScreenRow, and getVisibleRowRange to the component', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
element.style.height = 4 * component.measurements.lineHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
await setScrollTop(component, 5 * component.getLineHeight())
|
|
|
|
expect(editor.getFirstVisibleScreenRow()).toBe(
|
|
component.getFirstVisibleRow()
|
|
)
|
|
expect(editor.getLastVisibleScreenRow()).toBe(
|
|
component.getLastVisibleRow()
|
|
)
|
|
expect(editor.getVisibleRowRange()).toEqual([
|
|
component.getFirstVisibleRow(),
|
|
component.getLastVisibleRow()
|
|
])
|
|
})
|
|
|
|
it('assigns scrollTop on the component when calling setFirstVisibleScreenRow', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
element.style.height =
|
|
4 * component.measurements.lineHeight + horizontalScrollbarHeight + 'px'
|
|
await component.getNextUpdatePromise()
|
|
|
|
expect(component.getMaxScrollTop() / component.getLineHeight()).toBe(9)
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(
|
|
0 * component.getLineHeight()
|
|
)
|
|
|
|
editor.setFirstVisibleScreenRow(1)
|
|
expect(component.getFirstVisibleRow()).toBe(1)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(
|
|
1 * component.getLineHeight()
|
|
)
|
|
|
|
editor.setFirstVisibleScreenRow(5)
|
|
expect(component.getFirstVisibleRow()).toBe(5)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(
|
|
5 * component.getLineHeight()
|
|
)
|
|
|
|
editor.setFirstVisibleScreenRow(11)
|
|
expect(component.getFirstVisibleRow()).toBe(9)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(
|
|
9 * component.getLineHeight()
|
|
)
|
|
})
|
|
|
|
it('delegates setFirstVisibleScreenColumn and getFirstVisibleScreenColumn to the component', async () => {
|
|
const { component, element, editor } = buildComponent({
|
|
rowsPerTile: 3,
|
|
autoHeight: false
|
|
})
|
|
element.style.width = 30 * component.getBaseCharacterWidth() + 'px'
|
|
await component.getNextUpdatePromise()
|
|
expect(editor.getFirstVisibleScreenColumn()).toBe(0)
|
|
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(0)
|
|
|
|
setScrollLeft(component, 5.5 * component.getBaseCharacterWidth())
|
|
expect(editor.getFirstVisibleScreenColumn()).toBe(5)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBeCloseTo(
|
|
5.5 * component.getBaseCharacterWidth(),
|
|
-1
|
|
)
|
|
|
|
editor.setFirstVisibleScreenColumn(12)
|
|
expect(component.getScrollLeft()).toBeCloseTo(
|
|
12 * component.getBaseCharacterWidth(),
|
|
-1
|
|
)
|
|
await component.getNextUpdatePromise()
|
|
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBeCloseTo(
|
|
12 * component.getBaseCharacterWidth(),
|
|
-1
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('handleMouseDragUntilMouseUp', () => {
|
|
it('repeatedly schedules `didDrag` calls on new animation frames after moving the mouse, and calls `didStopDragging` on mouseup', async () => {
|
|
const { component } = buildComponent()
|
|
|
|
let dragEvents
|
|
let dragging = false
|
|
component.handleMouseDragUntilMouseUp({
|
|
didDrag: event => {
|
|
dragging = true
|
|
dragEvents.push(event)
|
|
},
|
|
didStopDragging: () => {
|
|
dragging = false
|
|
}
|
|
})
|
|
expect(dragging).toBe(false)
|
|
|
|
dragEvents = []
|
|
const moveEvent1 = new MouseEvent('mousemove')
|
|
window.dispatchEvent(moveEvent1)
|
|
expect(dragging).toBe(false)
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
expect(dragEvents).toEqual([moveEvent1])
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
expect(dragEvents).toEqual([moveEvent1, moveEvent1])
|
|
|
|
dragEvents = []
|
|
const moveEvent2 = new MouseEvent('mousemove')
|
|
window.dispatchEvent(moveEvent2)
|
|
expect(dragging).toBe(true)
|
|
expect(dragEvents).toEqual([])
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
expect(dragEvents).toEqual([moveEvent2])
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
expect(dragEvents).toEqual([moveEvent2, moveEvent2])
|
|
|
|
dragEvents = []
|
|
window.dispatchEvent(new MouseEvent('mouseup'))
|
|
expect(dragging).toBe(false)
|
|
expect(dragEvents).toEqual([])
|
|
window.dispatchEvent(new MouseEvent('mousemove'))
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(false)
|
|
expect(dragEvents).toEqual([])
|
|
})
|
|
|
|
it('calls `didStopDragging` if the user interacts with the keyboard while dragging', async () => {
|
|
const { component, editor } = buildComponent()
|
|
|
|
let dragging = false
|
|
function startDragging () {
|
|
component.handleMouseDragUntilMouseUp({
|
|
didDrag: event => {
|
|
dragging = true
|
|
},
|
|
didStopDragging: () => {
|
|
dragging = false
|
|
}
|
|
})
|
|
}
|
|
|
|
startDragging()
|
|
window.dispatchEvent(new MouseEvent('mousemove'))
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
|
|
// Buffer changes don't cause dragging to be stopped.
|
|
editor.insertText('X')
|
|
expect(dragging).toBe(true)
|
|
|
|
// Keyboard interaction prevents users from dragging further.
|
|
component.didKeydown({ code: 'KeyX' })
|
|
expect(dragging).toBe(false)
|
|
|
|
window.dispatchEvent(new MouseEvent('mousemove'))
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(false)
|
|
|
|
// Pressing a modifier key does not terminate dragging, (to ensure we can add new selections with the mouse)
|
|
startDragging()
|
|
window.dispatchEvent(new MouseEvent('mousemove'))
|
|
await getNextAnimationFramePromise()
|
|
expect(dragging).toBe(true)
|
|
component.didKeydown({ key: 'Control' })
|
|
component.didKeydown({ key: 'Alt' })
|
|
component.didKeydown({ key: 'Shift' })
|
|
component.didKeydown({ key: 'Meta' })
|
|
expect(dragging).toBe(true)
|
|
})
|
|
|
|
function getNextAnimationFramePromise () {
|
|
return new Promise(resolve => requestAnimationFrame(resolve))
|
|
}
|
|
})
|
|
})
|
|
|
|
function buildEditor (params = {}) {
|
|
const text = params.text != null ? params.text : SAMPLE_TEXT
|
|
const buffer = new TextBuffer({ text })
|
|
const editorParams = { buffer, readOnly: params.readOnly }
|
|
if (params.height != null) params.autoHeight = false
|
|
for (const paramName of [
|
|
'mini',
|
|
'autoHeight',
|
|
'autoWidth',
|
|
'lineNumberGutterVisible',
|
|
'showLineNumbers',
|
|
'placeholderText',
|
|
'softWrapped',
|
|
'scrollSensitivity'
|
|
]) {
|
|
if (params[paramName] != null) editorParams[paramName] = params[paramName]
|
|
}
|
|
atom.grammars.autoAssignLanguageMode(buffer)
|
|
const editor = new TextEditor(editorParams)
|
|
editor.testAutoscrollRequests = []
|
|
editor.onDidRequestAutoscroll(request => {
|
|
editor.testAutoscrollRequests.push(request)
|
|
})
|
|
editors.push(editor)
|
|
return editor
|
|
}
|
|
|
|
function buildComponent (params = {}) {
|
|
const editor = params.editor || buildEditor(params)
|
|
const component = new TextEditorComponent({
|
|
model: editor,
|
|
rowsPerTile: params.rowsPerTile,
|
|
updatedSynchronously: params.updatedSynchronously || false,
|
|
platform: params.platform,
|
|
chromeVersion: params.chromeVersion
|
|
})
|
|
const { element } = component
|
|
if (!editor.getAutoHeight()) {
|
|
element.style.height = params.height ? params.height + 'px' : '600px'
|
|
}
|
|
if (!editor.getAutoWidth()) {
|
|
element.style.width = params.width ? params.width + 'px' : '800px'
|
|
}
|
|
if (params.attach !== false) jasmine.attachToDOM(element)
|
|
return { component, element, editor }
|
|
}
|
|
|
|
function getEditorWidthInBaseCharacters (component) {
|
|
return Math.round(
|
|
component.getScrollContainerWidth() / component.getBaseCharacterWidth()
|
|
)
|
|
}
|
|
|
|
async function setEditorHeightInLines (component, heightInLines) {
|
|
component.element.style.height =
|
|
component.getLineHeight() * heightInLines + 'px'
|
|
await component.getNextUpdatePromise()
|
|
}
|
|
|
|
async function setEditorWidthInCharacters (component, widthInCharacters) {
|
|
component.element.style.width =
|
|
component.getGutterContainerWidth() +
|
|
widthInCharacters * component.measurements.baseCharacterWidth +
|
|
verticalScrollbarWidth +
|
|
'px'
|
|
await component.getNextUpdatePromise()
|
|
}
|
|
|
|
function verifyCursorPosition (component, cursorNode, row, column) {
|
|
const rect = cursorNode.getBoundingClientRect()
|
|
expect(Math.round(rect.top)).toBe(clientTopForLine(component, row))
|
|
expect(Math.round(rect.left)).toBe(
|
|
Math.round(clientLeftForCharacter(component, row, column))
|
|
)
|
|
}
|
|
|
|
function clientTopForLine (component, row) {
|
|
return lineNodeForScreenRow(component, row).getBoundingClientRect().top
|
|
}
|
|
|
|
function clientLeftForCharacter (component, row, column) {
|
|
const textNodes = textNodesForScreenRow(component, row)
|
|
let textNodeStartColumn = 0
|
|
for (const textNode of textNodes) {
|
|
const textNodeEndColumn = textNodeStartColumn + textNode.textContent.length
|
|
if (column < textNodeEndColumn) {
|
|
const range = document.createRange()
|
|
range.setStart(textNode, column - textNodeStartColumn)
|
|
range.setEnd(textNode, column - textNodeStartColumn)
|
|
return range.getBoundingClientRect().left
|
|
}
|
|
textNodeStartColumn = textNodeEndColumn
|
|
}
|
|
|
|
const lastTextNode = textNodes[textNodes.length - 1]
|
|
const range = document.createRange()
|
|
range.setStart(lastTextNode, 0)
|
|
range.setEnd(lastTextNode, lastTextNode.textContent.length)
|
|
return range.getBoundingClientRect().right
|
|
}
|
|
|
|
function clientPositionForCharacter (component, row, column) {
|
|
return {
|
|
clientX: clientLeftForCharacter(component, row, column),
|
|
clientY: clientTopForLine(component, row)
|
|
}
|
|
}
|
|
|
|
function lineNumberNodeForScreenRow (component, row) {
|
|
const gutterElement =
|
|
component.refs.gutterContainer.refs.lineNumberGutter.element
|
|
const tileStartRow = component.tileStartRowForRow(row)
|
|
const tileIndex = component.renderedTileStartRows.indexOf(tileStartRow)
|
|
return gutterElement.children[tileIndex + 1].children[row - tileStartRow]
|
|
}
|
|
|
|
function lineNodeForScreenRow (component, row) {
|
|
const renderedScreenLine = component.renderedScreenLineForRow(row)
|
|
return component.lineComponentsByScreenLineId.get(renderedScreenLine.id)
|
|
.element
|
|
}
|
|
|
|
function textNodesForScreenRow (component, row) {
|
|
const screenLine = component.renderedScreenLineForRow(row)
|
|
return component.lineComponentsByScreenLineId.get(screenLine.id).textNodes
|
|
}
|
|
|
|
function setScrollTop (component, scrollTop) {
|
|
component.setScrollTop(scrollTop)
|
|
component.scheduleUpdate()
|
|
return component.getNextUpdatePromise()
|
|
}
|
|
|
|
function setScrollLeft (component, scrollLeft) {
|
|
component.setScrollLeft(scrollLeft)
|
|
component.scheduleUpdate()
|
|
return component.getNextUpdatePromise()
|
|
}
|
|
|
|
function getHorizontalScrollbarHeight (component) {
|
|
const element = component.refs.horizontalScrollbar.element
|
|
return element.offsetHeight - element.clientHeight
|
|
}
|
|
|
|
function getVerticalScrollbarWidth (component) {
|
|
const element = component.refs.verticalScrollbar.element
|
|
return element.offsetWidth - element.clientWidth
|
|
}
|
|
|
|
function assertDocumentFocused () {
|
|
if (!document.hasFocus()) {
|
|
throw new Error('The document needs to be focused to run this test')
|
|
}
|
|
}
|
|
|
|
function getElementHeight (element) {
|
|
const topRuler = document.createElement('div')
|
|
const bottomRuler = document.createElement('div')
|
|
let height
|
|
if (document.body.contains(element)) {
|
|
element.parentElement.insertBefore(topRuler, element)
|
|
element.parentElement.insertBefore(bottomRuler, element.nextSibling)
|
|
height = bottomRuler.offsetTop - topRuler.offsetTop
|
|
} else {
|
|
jasmine.attachToDOM(topRuler)
|
|
jasmine.attachToDOM(element)
|
|
jasmine.attachToDOM(bottomRuler)
|
|
height = bottomRuler.offsetTop - topRuler.offsetTop
|
|
element.remove()
|
|
}
|
|
|
|
topRuler.remove()
|
|
bottomRuler.remove()
|
|
return height
|
|
}
|
|
|
|
function queryOnScreenLineNumberElements (element) {
|
|
return Array.from(element.querySelectorAll('.line-number:not(.dummy)'))
|
|
}
|
|
|
|
function queryOnScreenLineElements (element) {
|
|
return Array.from(
|
|
element.querySelectorAll('.line:not(.dummy):not([data-off-screen])')
|
|
)
|
|
}
|