/* global ResizeObserver */

const etch = require('etch');

const { Point, Range } = require('text-buffer');

const LineTopIndex = require('line-top-index');

const TextEditor = require('./text-editor');

const { isPairedCharacter } = require('./text-utils');

const electron = require('electron');

const clipboard = electron.clipboard;

const $ = etch.dom;

let TextEditorElement;

const DEFAULT_ROWS_PER_TILE = 6;

const NORMAL_WIDTH_CHARACTER = 'x';

const DOUBLE_WIDTH_CHARACTER = '我';

const HALF_WIDTH_CHARACTER = 'ﾊ';

const KOREAN_CHARACTER = '세';

const NBSP_CHARACTER = '\u00a0';

const ZERO_WIDTH_NBSP_CHARACTER = '\ufeff';

const MOUSE_DRAG_AUTOSCROLL_MARGIN = 40;

const CURSOR_BLINK_RESUME_DELAY = 300;

const CURSOR_BLINK_PERIOD = 800;

function scaleMouseDragAutoscrollDelta(delta) {

return Math.pow(delta / 3, 3) / 280;

}

module.exports = class TextEditorComponent {

static setScheduler(scheduler) {

etch.setScheduler(scheduler);

}

static getScheduler() {

return etch.getScheduler();

}

static didUpdateStyles() {

if (this.attachedComponents) {

this.attachedComponents.forEach(component => {

component.didUpdateStyles();

});

}

}

static didUpdateScrollbarStyles() {

if (this.attachedComponents) {

this.attachedComponents.forEach(component => {

component.didUpdateScrollbarStyles();

});

}

}

constructor(props) {

this.props = props;

if (!props.model) {

props.model = new TextEditor({

mini: props.mini,

readOnly: props.readOnly

});

}

this.props.model.component = this;

if (props.element) {

this.element = props.element;

} else {

if (!TextEditorElement)

TextEditorElement = require('./text-editor-element');

this.element = new TextEditorElement();

}

this.element.initialize(this);

this.virtualNode = $('atom-text-editor');

this.virtualNode.domNode = this.element;

this.refs = {};

this.updateSync = this.updateSync.bind(this);

this.didBlurHiddenInput = this.didBlurHiddenInput.bind(this);

this.didFocusHiddenInput = this.didFocusHiddenInput.bind(this);

this.didPaste = this.didPaste.bind(this);

this.didTextInput = this.didTextInput.bind(this);

this.didKeydown = this.didKeydown.bind(this);

this.didKeyup = this.didKeyup.bind(this);

this.didKeypress = this.didKeypress.bind(this);

this.didCompositionStart = this.didCompositionStart.bind(this);

this.didCompositionUpdate = this.didCompositionUpdate.bind(this);

this.didCompositionEnd = this.didCompositionEnd.bind(this);

this.updatedSynchronously = this.props.updatedSynchronously;

this.didScrollDummyScrollbar = this.didScrollDummyScrollbar.bind(this);

this.didMouseDownOnContent = this.didMouseDownOnContent.bind(this);

this.debouncedResumeCursorBlinking = debounce(

this.resumeCursorBlinking.bind(this),

this.props.cursorBlinkResumeDelay || CURSOR_BLINK_RESUME_DELAY

);

this.lineTopIndex = new LineTopIndex();

this.lineNodesPool = new NodePool();

this.updateScheduled = false;

this.suppressUpdates = false;

this.hasInitialMeasurements = false;

this.measurements = {

lineHeight: 0,

baseCharacterWidth: 0,

doubleWidthCharacterWidth: 0,

halfWidthCharacterWidth: 0,

koreanCharacterWidth: 0,

gutterContainerWidth: 0,

lineNumberGutterWidth: 0,

clientContainerHeight: 0,

clientContainerWidth: 0,

verticalScrollbarWidth: 0,

horizontalScrollbarHeight: 0,

longestLineWidth: 0

};

this.derivedDimensionsCache = {};

this.visible = false;

this.cursorsBlinking = false;

this.cursorsBlinkedOff = false;

this.nextUpdateOnlyBlinksCursors = null;

this.linesToMeasure = new Map();

this.extraRenderedScreenLines = new Map();

this.horizontalPositionsToMeasure = new Map(); // Keys are rows with positions we want to measure, values are arrays of columns to measure

this.horizontalPixelPositionsByScreenLineId = new Map(); // Values are maps from column to horizontal pixel positions

this.blockDecorationsToMeasure = new Set();

this.blockDecorationsByElement = new WeakMap();

this.blockDecorationSentinel = document.createElement('div');

this.blockDecorationSentinel.style.height = '1px';

this.heightsByBlockDecoration = new WeakMap();

this.blockDecorationResizeObserver = new ResizeObserver(

this.didResizeBlockDecorations.bind(this)

);

this.lineComponentsByScreenLineId = new Map();

this.overlayComponents = new Set();

this.shouldRenderDummyScrollbars = true;

this.remeasureScrollbars = false;

this.pendingAutoscroll = null;

this.scrollTopPending = false;

this.scrollLeftPending = false;

this.scrollTop = 0;

this.scrollLeft = 0;

this.previousScrollWidth = 0;

this.previousScrollHeight = 0;

this.lastKeydown = null;

this.lastKeydownBeforeKeypress = null;

this.accentedCharacterMenuIsOpen = false;

this.remeasureGutterDimensions = false;

this.guttersToRender = [this.props.model.getLineNumberGutter()];

this.guttersVisibility = [this.guttersToRender[0].visible];

this.idsByTileStartRow = new Map();

this.nextTileId = 0;

this.renderedTileStartRows = [];

this.showLineNumbers = this.props.model.doesShowLineNumbers();

this.lineNumbersToRender = {

maxDigits: 2,

bufferRows: [],

screenRows: [],

keys: [],

softWrappedFlags: [],

foldableFlags: []

};

this.decorationsToRender = {

lineNumbers: new Map(),

lines: null,

highlights: [],

cursors: [],

overlays: [],

customGutter: new Map(),

blocks: new Map(),

text: []

};

this.decorationsToMeasure = {

highlights: [],

cursors: new Map()

};

this.textDecorationsByMarker = new Map();

this.textDecorationBoundaries = [];

this.pendingScrollTopRow = this.props.initialScrollTopRow;

this.pendingScrollLeftColumn = this.props.initialScrollLeftColumn;

this.tabIndex =

this.props.element && this.props.element.tabIndex

? this.props.element.tabIndex

: -1;

this.measuredContent = false;

this.queryGuttersToRender();

this.queryMaxLineNumberDigits();

this.observeBlockDecorations();

this.updateClassList();

etch.updateSync(this);

}

update(props) {

if (props.model !== this.props.model) {

this.props.model.component = null;

props.model.component = this;

}

this.props = props;

this.scheduleUpdate();

}

pixelPositionForScreenPosition({ row, column }) {

const top = this.pixelPositionAfterBlocksForRow(row);

let left = column === 0 ? 0 : this.pixelLeftForRowAndColumn(row, column);

if (left == null) {

this.requestHorizontalMeasurement(row, column);

this.updateSync();

left = this.pixelLeftForRowAndColumn(row, column);

}

return { top, left };

}

scheduleUpdate(nextUpdateOnlyBlinksCursors = false) {

if (!this.visible) return;

if (this.suppressUpdates) return;

this.nextUpdateOnlyBlinksCursors =

this.nextUpdateOnlyBlinksCursors !== false &&

nextUpdateOnlyBlinksCursors === true;

if (this.updatedSynchronously) {

this.updateSync();

} else if (!this.updateScheduled) {

this.updateScheduled = true;

etch.getScheduler().updateDocument(() => {

if (this.updateScheduled) this.updateSync(true);

});

}

}

updateSync(useScheduler = false) {

// Don't proceed if we know we are not visible

if (!this.visible) {

this.updateScheduled = false;

return;

}

// Don't proceed if we have to pay for a measurement anyway and detect

// that we are no longer visible.

if (

(this.remeasureCharacterDimensions ||

this.remeasureAllBlockDecorations) &&

!this.isVisible()

) {

if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();

this.updateScheduled = false;

return;

}

const onlyBlinkingCursors = this.nextUpdateOnlyBlinksCursors;

this.nextUpdateOnlyBlinksCursors = null;

if (useScheduler && onlyBlinkingCursors) {

this.refs.cursorsAndInput.updateCursorBlinkSync(this.cursorsBlinkedOff);

if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();

this.updateScheduled = false;

return;

}

if (this.remeasureCharacterDimensions) {

const originalLineHeight = this.getLineHeight();

const originalBaseCharacterWidth = this.getBaseCharacterWidth();

const scrollTopRow = this.getScrollTopRow();

const scrollLeftColumn = this.getScrollLeftColumn();

this.measureCharacterDimensions();

this.measureGutterDimensions();

this.queryLongestLine();

if (this.getLineHeight() !== originalLineHeight) {

this.setScrollTopRow(scrollTopRow);

}

if (this.getBaseCharacterWidth() !== originalBaseCharacterWidth) {

this.setScrollLeftColumn(scrollLeftColumn);

}

this.remeasureCharacterDimensions = false;

}

this.measureBlockDecorations();

this.updateSyncBeforeMeasuringContent();

if (useScheduler === true) {

const scheduler = etch.getScheduler();

scheduler.readDocument(() => {

const restartFrame = this.measureContentDuringUpdateSync();

scheduler.updateDocument(() => {

if (restartFrame) {

this.updateSync(true);

} else {

this.updateSyncAfterMeasuringContent();

}

});

});

} else {

const restartFrame = this.measureContentDuringUpdateSync();

if (restartFrame) {

this.updateSync(false);

} else {

this.updateSyncAfterMeasuringContent();

}

}

this.updateScheduled = false;

}

measureBlockDecorations() {

if (this.remeasureAllBlockDecorations) {

this.remeasureAllBlockDecorations = false;

const decorations = this.props.model.getDecorations();

for (var i = 0; i < decorations.length; i++) {

const decoration = decorations[i];

const marker = decoration.getMarker();

if (marker.isValid() && decoration.getProperties().type === 'block') {

this.blockDecorationsToMeasure.add(decoration);

}

}

// Update the width of the line tiles to ensure block decorations are

// measured with the most recent width.

if (this.blockDecorationsToMeasure.size > 0) {

this.updateSyncBeforeMeasuringContent();

}

}

if (this.blockDecorationsToMeasure.size > 0) {

const { blockDecorationMeasurementArea } = this.refs;

const sentinelElements = new Set();

blockDecorationMeasurementArea.appendChild(document.createElement('div'));

this.blockDecorationsToMeasure.forEach(decoration => {

const { item } = decoration.getProperties();

const decorationElement = TextEditor.viewForItem(item);

if (document.contains(decorationElement)) {

const parentElement = decorationElement.parentElement;

if (!decorationElement.previousSibling) {

const sentinelElement = this.blockDecorationSentinel.cloneNode();

parentElement.insertBefore(sentinelElement, decorationElement);

sentinelElements.add(sentinelElement);

}

if (!decorationElement.nextSibling) {

const sentinelElement = this.blockDecorationSentinel.cloneNode();

parentElement.appendChild(sentinelElement);

sentinelElements.add(sentinelElement);

}

this.didMeasureVisibleBlockDecoration = true;

} else {

blockDecorationMeasurementArea.appendChild(

this.blockDecorationSentinel.cloneNode()

);

blockDecorationMeasurementArea.appendChild(decorationElement);

blockDecorationMeasurementArea.appendChild(

this.blockDecorationSentinel.cloneNode()

);

}

});

if (this.resizeBlockDecorationMeasurementsArea) {

this.resizeBlockDecorationMeasurementsArea = false;

this.refs.blockDecorationMeasurementArea.style.width =

this.getScrollWidth() + 'px';

}

this.blockDecorationsToMeasure.forEach(decoration => {

const { item } = decoration.getProperties();

const decorationElement = TextEditor.viewForItem(item);

const { previousSibling, nextSibling } = decorationElement;

const height =

nextSibling.getBoundingClientRect().top -

previousSibling.getBoundingClientRect().bottom;

this.heightsByBlockDecoration.set(decoration, height);

this.lineTopIndex.resizeBlock(decoration, height);

});

sentinelElements.forEach(sentinelElement => sentinelElement.remove());

while (blockDecorationMeasurementArea.firstChild) {

blockDecorationMeasurementArea.firstChild.remove();

}

this.blockDecorationsToMeasure.clear();

}

}

updateSyncBeforeMeasuringContent() {

this.measuredContent = false;

this.derivedDimensionsCache = {};

this.updateModelSoftWrapColumn();

if (this.pendingAutoscroll) {

let { screenRange, options } = this.pendingAutoscroll;

this.autoscrollVertically(screenRange, options);

this.requestHorizontalMeasurement(

screenRange.start.row,

screenRange.start.column

);

this.requestHorizontalMeasurement(

screenRange.end.row,

screenRange.end.column

);

}

this.populateVisibleRowRange(this.getRenderedStartRow());

this.populateVisibleTiles();

this.queryScreenLinesToRender();

this.queryLongestLine();

this.queryLineNumbersToRender();

this.queryGuttersToRender();

this.queryDecorationsToRender();

this.queryExtraScreenLinesToRender();

this.shouldRenderDummyScrollbars = !this.remeasureScrollbars;

etch.updateSync(this);

this.updateClassList();

this.shouldRenderDummyScrollbars = true;

this.didMeasureVisibleBlockDecoration = false;

}

measureContentDuringUpdateSync() {

let gutterDimensionsChanged = false;

if (this.remeasureGutterDimensions) {

gutterDimensionsChanged = this.measureGutterDimensions();

this.remeasureGutterDimensions = false;

}

const wasHorizontalScrollbarVisible =

this.canScrollHorizontally() && this.getHorizontalScrollbarHeight() > 0;

this.measureLongestLineWidth();

this.measureHorizontalPositions();

this.updateAbsolutePositionedDecorations();

const isHorizontalScrollbarVisible =

this.canScrollHorizontally() && this.getHorizontalScrollbarHeight() > 0;

if (this.pendingAutoscroll) {

this.derivedDimensionsCache = {};

const { screenRange, options } = this.pendingAutoscroll;

this.autoscrollHorizontally(screenRange, options);

if (!wasHorizontalScrollbarVisible && isHorizontalScrollbarVisible) {

this.autoscrollVertically(screenRange, options);

}

this.pendingAutoscroll = null;

}

this.linesToMeasure.clear();

this.measuredContent = true;

return (

gutterDimensionsChanged ||

wasHorizontalScrollbarVisible !== isHorizontalScrollbarVisible

);

}

updateSyncAfterMeasuringContent() {

this.derivedDimensionsCache = {};

etch.updateSync(this);

this.currentFrameLineNumberGutterProps = null;

this.scrollTopPending = false;

this.scrollLeftPending = false;

if (this.remeasureScrollbars) {

// Flush stored scroll positions to the vertical and the horizontal

// scrollbars. This is because they have just been destroyed and recreated

// as a result of their remeasurement, but we could not assign the scroll

// top while they were initialized because they were not attached to the

// DOM yet.

this.refs.verticalScrollbar.flushScrollPosition();

this.refs.horizontalScrollbar.flushScrollPosition();

this.measureScrollbarDimensions();

this.remeasureScrollbars = false;

etch.updateSync(this);

}

this.derivedDimensionsCache = {};

if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();

}

render() {

const { model } = this.props;

const style = {};

if (!model.getAutoHeight() && !model.getAutoWidth()) {

style.contain = 'size';

}

let clientContainerHeight = '100%';

let clientContainerWidth = '100%';

if (this.hasInitialMeasurements) {

if (model.getAutoHeight()) {

clientContainerHeight =

this.getContentHeight() + this.getHorizontalScrollbarHeight() + 'px';

}

if (model.getAutoWidth()) {

style.width = 'min-content';

clientContainerWidth =

this.getGutterContainerWidth() +

this.getContentWidth() +

this.getVerticalScrollbarWidth() +

'px';

} else {

style.width = this.element.style.width;

}

}

let attributes = {};

if (model.isMini()) {

attributes.mini = '';

}

if (model.isReadOnly()) {

attributes.readonly = '';

}

const dataset = { encoding: model.getEncoding() };

const grammar = model.getGrammar();

if (grammar && grammar.scopeName) {

dataset.grammar = grammar.scopeName.replace(/\./g, ' ');

}

return $(

'atom-text-editor',

{

// See this.updateClassList() for construction of the class name

style,

attributes,

dataset,

tabIndex: -1,

on: { mousewheel: this.didMouseWheel }

},

$.div(

{

ref: 'clientContainer',

style: {

position: 'relative',

contain: 'strict',

overflow: 'hidden',

backgroundColor: 'inherit',

height: clientContainerHeight,

width: clientContainerWidth

}

},

this.renderGutterContainer(),

this.renderScrollContainer()

),

this.renderOverlayDecorations()

);

}

renderGutterContainer() {

if (this.props.model.isMini()) {

return null;

} else {

return $(GutterContainerComponent, {

ref: 'gutterContainer',

key: 'gutterContainer',

rootComponent: this,

hasInitialMeasurements: this.hasInitialMeasurements,

measuredContent: this.measuredContent,

scrollTop: this.getScrollTop(),

scrollHeight: this.getScrollHeight(),

lineNumberGutterWidth: this.getLineNumberGutterWidth(),

lineHeight: this.getLineHeight(),

renderedStartRow: this.getRenderedStartRow(),

renderedEndRow: this.getRenderedEndRow(),

rowsPerTile: this.getRowsPerTile(),

guttersToRender: this.guttersToRender,

decorationsToRender: this.decorationsToRender,

isLineNumberGutterVisible: this.props.model.isLineNumberGutterVisible(),

showLineNumbers: this.showLineNumbers,

lineNumbersToRender: this.lineNumbersToRender,

didMeasureVisibleBlockDecoration: this.didMeasureVisibleBlockDecoration

});

}

}

renderScrollContainer() {

const style = {

position: 'absolute',

contain: 'strict',

overflow: 'hidden',

top: 0,

bottom: 0,

backgroundColor: 'inherit'

};

if (this.hasInitialMeasurements) {

style.left = this.getGutterContainerWidth() + 'px';

style.width = this.getScrollContainerWidth() + 'px';

}

return $.div(

{

ref: 'scrollContainer',

key: 'scrollContainer',

className: 'scroll-view',

style

},

this.renderContent(),

this.renderDummyScrollbars()

);

}

renderContent() {

let style = {

contain: 'strict',

overflow: 'hidden',

backgroundColor: 'inherit'

};

if (this.hasInitialMeasurements) {

style.width = ceilToPhysicalPixelBoundary(this.getScrollWidth()) + 'px';

style.height = ceilToPhysicalPixelBoundary(this.getScrollHeight()) + 'px';

style.willChange = 'transform';

style.transform = `translate(${-roundToPhysicalPixelBoundary(

this.getScrollLeft()

)}px, ${-roundToPhysicalPixelBoundary(this.getScrollTop())}px)`;

}

return $.div(

{

ref: 'content',

on: { mousedown: this.didMouseDownOnContent },

style

},

this.renderLineTiles(),

this.renderBlockDecorationMeasurementArea(),

this.renderCharacterMeasurementLine()

);

}

renderHighlightDecorations() {

return $(HighlightsComponent, {

hasInitialMeasurements: this.hasInitialMeasurements,

highlightDecorations: this.decorationsToRender.highlights.slice(),

width: this.getScrollWidth(),

height: this.getScrollHeight(),

lineHeight: this.getLineHeight()

});

}

renderLineTiles() {

const style = {

position: 'absolute',

contain: 'strict',

overflow: 'hidden'

};

const children = [];

children.push(this.renderHighlightDecorations());

if (this.hasInitialMeasurements) {

const { lineComponentsByScreenLineId } = this;

const startRow = this.getRenderedStartRow();

const endRow = this.getRenderedEndRow();

const rowsPerTile = this.getRowsPerTile();

const tileWidth = this.getScrollWidth();

for (let i = 0; i < this.renderedTileStartRows.length; i++) {

const tileStartRow = this.renderedTileStartRows[i];

const tileEndRow = Math.min(endRow, tileStartRow + rowsPerTile);

const tileHeight =

this.pixelPositionBeforeBlocksForRow(tileEndRow) -

this.pixelPositionBeforeBlocksForRow(tileStartRow);

children.push(

$(LinesTileComponent, {

key: this.idsByTileStartRow.get(tileStartRow),

measuredContent: this.measuredContent,

height: tileHeight,

width: tileWidth,

top: this.pixelPositionBeforeBlocksForRow(tileStartRow),

lineHeight: this.getLineHeight(),

renderedStartRow: startRow,

tileStartRow,

tileEndRow,

screenLines: this.renderedScreenLines.slice(

tileStartRow - startRow,

tileEndRow - startRow

),

lineDecorations: this.decorationsToRender.lines.slice(

tileStartRow - startRow,

tileEndRow - startRow

),

textDecorations: this.decorationsToRender.text.slice(

tileStartRow - startRow,

tileEndRow - startRow

),

blockDecorations: this.decorationsToRender.blocks.get(tileStartRow),

displayLayer: this.props.model.displayLayer,

nodePool: this.lineNodesPool,

lineComponentsByScreenLineId

})

);

}

this.extraRenderedScreenLines.forEach((screenLine, screenRow) => {

if (screenRow < startRow || screenRow >= endRow) {

children.push(

$(LineComponent, {

key: 'extra-' + screenLine.id,

offScreen: true,

screenLine,

screenRow,

displayLayer: this.props.model.displayLayer,

nodePool: this.lineNodesPool,

lineComponentsByScreenLineId

})

);

}

});

style.width = this.getScrollWidth() + 'px';

style.height = this.getScrollHeight() + 'px';

}

children.push(this.renderPlaceholderText());

children.push(this.renderCursorsAndInput());

return $.div(

{ key: 'lineTiles', ref: 'lineTiles', className: 'lines', style },

children

);

}

renderCursorsAndInput() {

return $(CursorsAndInputComponent, {

ref: 'cursorsAndInput',

key: 'cursorsAndInput',

didBlurHiddenInput: this.didBlurHiddenInput,

didFocusHiddenInput: this.didFocusHiddenInput,

didTextInput: this.didTextInput,

didPaste: this.didPaste,

didKeydown: this.didKeydown,

didKeyup: this.didKeyup,

didKeypress: this.didKeypress,

didCompositionStart: this.didCompositionStart,

didCompositionUpdate: this.didCompositionUpdate,

didCompositionEnd: this.didCompositionEnd,

measuredContent: this.measuredContent,

lineHeight: this.getLineHeight(),

scrollHeight: this.getScrollHeight(),

scrollWidth: this.getScrollWidth(),

decorationsToRender: this.decorationsToRender,

cursorsBlinkedOff: this.cursorsBlinkedOff,

hiddenInputPosition: this.hiddenInputPosition,

tabIndex: this.tabIndex

});

}

renderPlaceholderText() {

const { model } = this.props;

if (model.isEmpty()) {

const placeholderText = model.getPlaceholderText();

if (placeholderText != null) {

return $.div({ className: 'placeholder-text' }, placeholderText);

}

}

return null;

}

renderCharacterMeasurementLine() {

return $.div(

{

key: 'characterMeasurementLine',

ref: 'characterMeasurementLine',

className: 'line dummy',

style: { position: 'absolute', visibility: 'hidden' }

},

$.span({ ref: 'normalWidthCharacterSpan' }, NORMAL_WIDTH_CHARACTER),

$.span({ ref: 'doubleWidthCharacterSpan' }, DOUBLE_WIDTH_CHARACTER),

$.span({ ref: 'halfWidthCharacterSpan' }, HALF_WIDTH_CHARACTER),

$.span({ ref: 'koreanCharacterSpan' }, KOREAN_CHARACTER)

);

}

renderBlockDecorationMeasurementArea() {

return $.div({

ref: 'blockDecorationMeasurementArea',

key: 'blockDecorationMeasurementArea',

style: {

contain: 'strict',

position: 'absolute',

visibility: 'hidden',

width: this.getScrollWidth() + 'px'

}

});

}

renderDummyScrollbars() {

if (this.shouldRenderDummyScrollbars && !this.props.model.isMini()) {

let scrollHeight, scrollTop, horizontalScrollbarHeight;

let scrollWidth,

scrollLeft,

verticalScrollbarWidth,

forceScrollbarVisible;

let canScrollHorizontally, canScrollVertically;

if (this.hasInitialMeasurements) {

scrollHeight = this.getScrollHeight();

scrollWidth = this.getScrollWidth();

scrollTop = this.getScrollTop();

scrollLeft = this.getScrollLeft();

canScrollHorizontally = this.canScrollHorizontally();

canScrollVertically = this.canScrollVertically();

horizontalScrollbarHeight = this.getHorizontalScrollbarHeight();

verticalScrollbarWidth = this.getVerticalScrollbarWidth();

forceScrollbarVisible = this.remeasureScrollbars;

} else {

forceScrollbarVisible = true;

}

return [

$(DummyScrollbarComponent, {

ref: 'verticalScrollbar',

orientation: 'vertical',

didScroll: this.didScrollDummyScrollbar,

didMouseDown: this.didMouseDownOnContent,

canScroll: canScrollVertically,

scrollHeight,

scrollTop,

horizontalScrollbarHeight,

forceScrollbarVisible

}),

$(DummyScrollbarComponent, {

ref: 'horizontalScrollbar',

orientation: 'horizontal',

didScroll: this.didScrollDummyScrollbar,

didMouseDown: this.didMouseDownOnContent,

canScroll: canScrollHorizontally,

scrollWidth,

scrollLeft,

verticalScrollbarWidth,

forceScrollbarVisible

}),

// Force a "corner" to render where the two scrollbars meet at the lower right

$.div({

ref: 'scrollbarCorner',

className: 'scrollbar-corner',

style: {

position: 'absolute',

height: '20px',

width: '20px',

bottom: 0,

right: 0,

overflow: 'scroll'

}

})

];

} else {

return null;

}

}

renderOverlayDecorations() {

return this.decorationsToRender.overlays.map(overlayProps =>

$(

OverlayComponent,

Object.assign(

{

key: overlayProps.element,

overlayComponents: this.overlayComponents,

didResize: overlayComponent => {

this.updateOverlayToRender(overlayProps);

overlayComponent.update(overlayProps);

}

},

overlayProps

)

)

);

}

// Imperatively manipulate the class list of the root element to avoid

// clearing classes assigned by package authors.

updateClassList() {

const { model } = this.props;

const oldClassList = this.classList;

const newClassList = ['editor'];

if (this.focused) newClassList.push('is-focused');

if (model.isMini()) newClassList.push('mini');

for (var i = 0; i < model.selections.length; i++) {

if (!model.selections[i].isEmpty()) {

newClassList.push('has-selection');

break;

}

}

if (oldClassList) {

for (let i = 0; i < oldClassList.length; i++) {

const className = oldClassList[i];

if (!newClassList.includes(className)) {

this.element.classList.remove(className);

}

}

}

for (let i = 0; i < newClassList.length; i++) {

this.element.classList.add(newClassList[i]);

}

this.classList = newClassList;

}

queryScreenLinesToRender() {

const { model } = this.props;

this.renderedScreenLines = model.displayLayer.getScreenLines(

this.getRenderedStartRow(),

this.getRenderedEndRow()

);

}

queryLongestLine() {

const { model } = this.props;

const longestLineRow = model.getApproximateLongestScreenRow();

const longestLine = model.screenLineForScreenRow(longestLineRow);

if (

longestLine !== this.previousLongestLine ||

this.remeasureCharacterDimensions

) {

this.requestLineToMeasure(longestLineRow, longestLine);

this.longestLineToMeasure = longestLine;

this.previousLongestLine = longestLine;

}

}

queryExtraScreenLinesToRender() {

this.extraRenderedScreenLines.clear();

this.linesToMeasure.forEach((screenLine, row) => {

if (row < this.getRenderedStartRow() || row >= this.getRenderedEndRow()) {

this.extraRenderedScreenLines.set(row, screenLine);

}

});

}

queryLineNumbersToRender() {

const { model } = this.props;

if (!model.anyLineNumberGutterVisible()) return;

if (this.showLineNumbers !== model.doesShowLineNumbers()) {

this.remeasureGutterDimensions = true;

this.showLineNumbers = model.doesShowLineNumbers();

}

this.queryMaxLineNumberDigits();

const startRow = this.getRenderedStartRow();

const endRow = this.getRenderedEndRow();

const renderedRowCount = this.getRenderedRowCount();

const bufferRows = model.bufferRowsForScreenRows(startRow, endRow);

const screenRows = new Array(renderedRowCount);

const keys = new Array(renderedRowCount);

const foldableFlags = new Array(renderedRowCount);

const softWrappedFlags = new Array(renderedRowCount);

let previousBufferRow =

startRow > 0 ? model.bufferRowForScreenRow(startRow - 1) : -1;

let softWrapCount = 0;

for (let row = startRow; row < endRow; row++) {

const i = row - startRow;

const bufferRow = bufferRows[i];

if (bufferRow === previousBufferRow) {

softWrapCount++;

softWrappedFlags[i] = true;

keys[i] = bufferRow + '-' + softWrapCount;

} else {

softWrapCount = 0;

softWrappedFlags[i] = false;

keys[i] = bufferRow;

}

const nextBufferRow = bufferRows[i + 1];

if (bufferRow !== nextBufferRow) {

foldableFlags[i] = model.isFoldableAtBufferRow(bufferRow);

} else {

foldableFlags[i] = false;

}

screenRows[i] = row;

previousBufferRow = bufferRow;

}

// Delete extra buffer row at the end because it's not currently on screen.

bufferRows.pop();

this.lineNumbersToRender.bufferRows = bufferRows;

this.lineNumbersToRender.screenRows = screenRows;

this.lineNumbersToRender.keys = keys;

this.lineNumbersToRender.foldableFlags = foldableFlags;

this.lineNumbersToRender.softWrappedFlags = softWrappedFlags;

}

queryMaxLineNumberDigits() {

const { model } = this.props;

if (model.anyLineNumberGutterVisible()) {

const maxDigits = Math.max(2, model.getLineCount().toString().length);

if (maxDigits !== this.lineNumbersToRender.maxDigits) {

this.remeasureGutterDimensions = true;

this.lineNumbersToRender.maxDigits = maxDigits;