src/text-editor-component.js
/* 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 = TextEditorElement.createTextEditorElement();
}
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 (let 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;
}
}
}
renderedScreenLineForRow(row) {
return (
this.renderedScreenLines[row - this.getRenderedStartRow()] ||
this.extraRenderedScreenLines.get(row)
);
}
queryGuttersToRender() {
const oldGuttersToRender = this.guttersToRender;
const oldGuttersVisibility = this.guttersVisibility;
this.guttersToRender = this.props.model.getGutters();
this.guttersVisibility = this.guttersToRender.map(g => g.visible);
if (
!oldGuttersToRender ||
oldGuttersToRender.length !== this.guttersToRender.length
) {
this.remeasureGutterDimensions = true;
} else {
for (let i = 0, length = this.guttersToRender.length; i < length; i++) {
if (
this.guttersToRender[i] !== oldGuttersToRender[i] ||
this.guttersVisibility[i] !== oldGuttersVisibility[i]
) {
this.remeasureGutterDimensions = true;
break;
}
}
}
}
queryDecorationsToRender() {
this.decorationsToRender.lineNumbers.clear();
this.decorationsToRender.lines = [];
this.decorationsToRender.overlays.length = 0;
this.decorationsToRender.customGutter.clear();
this.decorationsToRender.blocks = new Map();
this.decorationsToRender.text = [];
this.decorationsToMeasure.highlights.length = 0;
this.decorationsToMeasure.cursors.clear();
this.textDecorationsByMarker.clear();
this.textDecorationBoundaries.length = 0;
const decorationsByMarker = this.props.model.decorationManager.decorationPropertiesByMarkerForScreenRowRange(
this.getRenderedStartRow(),
this.getRenderedEndRow()
);
decorationsByMarker.forEach((decorations, marker) => {
const screenRange = marker.getScreenRange();
const reversed = marker.isReversed();
for (let i = 0; i < decorations.length; i++) {
const decoration = decorations[i];
this.addDecorationToRender(
decoration.type,
decoration,
marker,
screenRange,
reversed
);
}
});
this.populateTextDecorationsToRender();
}
addDecorationToRender(type, decoration, marker, screenRange, reversed) {
if (Array.isArray(type)) {
for (let i = 0, length = type.length; i < length; i++) {
this.addDecorationToRender(
type[i],
decoration,
marker,
screenRange,
reversed
);
}
} else {
switch (type) {
case 'line':
case 'line-number':
this.addLineDecorationToRender(
type,
decoration,
screenRange,
reversed
);
break;
case 'highlight':
this.addHighlightDecorationToMeasure(
decoration,
screenRange,
marker.id
);
break;
case 'cursor':
this.addCursorDecorationToMeasure(
decoration,
marker,
screenRange,
reversed
);
break;
case 'overlay':
this.addOverlayDecorationToRender(decoration, marker);
break;
case 'gutter':
this.addCustomGutterDecorationToRender(decoration, screenRange);
break;
case 'block':
this.addBlockDecorationToRender(decoration, screenRange, reversed);
break;
case 'text':
this.addTextDecorationToRender(decoration, screenRange, marker);
break;
}
}
}
addLineDecorationToRender(type, decoration, screenRange, reversed) {
let decorationsToRender;
if (type === 'line') {
decorationsToRender = this.decorationsToRender.lines;
} else {
const gutterName = decoration.gutterName || 'line-number';
decorationsToRender = this.decorationsToRender.lineNumbers.get(
gutterName
);
if (!decorationsToRender) {
decorationsToRender = [];
this.decorationsToRender.lineNumbers.set(
gutterName,
decorationsToRender
);
}
}
let omitLastRow = false;
if (screenRange.isEmpty()) {
if (decoration.onlyNonEmpty) return;
} else {
if (decoration.onlyEmpty) return;
if (decoration.omitEmptyLastRow !== false) {
omitLastRow = screenRange.end.column === 0;
}
}
const renderedStartRow = this.getRenderedStartRow();
let rangeStartRow = screenRange.start.row;
let rangeEndRow = screenRange.end.row;
if (decoration.onlyHead) {
if (reversed) {
rangeEndRow = rangeStartRow;
} else {
rangeStartRow = rangeEndRow;
}
}
rangeStartRow = Math.max(rangeStartRow, this.getRenderedStartRow());
rangeEndRow = Math.min(rangeEndRow, this.getRenderedEndRow() - 1);
for (let row = rangeStartRow; row <= rangeEndRow; row++) {
if (omitLastRow && row === screenRange.end.row) break;
const currentClassName = decorationsToRender[row - renderedStartRow];
const newClassName = currentClassName
? currentClassName + ' ' + decoration.class
: decoration.class;
decorationsToRender[row - renderedStartRow] = newClassName;
}
}
addHighlightDecorationToMeasure(decoration, screenRange, key) {
screenRange = constrainRangeToRows(
screenRange,
this.getRenderedStartRow(),
this.getRenderedEndRow()
);
if (screenRange.isEmpty()) return;
const {
class: className,
flashRequested,
flashClass,
flashDuration
} = decoration;
decoration.flashRequested = false;
this.decorationsToMeasure.highlights.push({
screenRange,
key,
className,
flashRequested,
flashClass,
flashDuration
});
this.requestHorizontalMeasurement(
screenRange.start.row,
screenRange.start.column
);
this.requestHorizontalMeasurement(
screenRange.end.row,
screenRange.end.column
);
}
addCursorDecorationToMeasure(decoration, marker, screenRange, reversed) {
const { model } = this.props;
if (!model.getShowCursorOnSelection() && !screenRange.isEmpty()) return;
let decorationToMeasure = this.decorationsToMeasure.cursors.get(marker);
if (!decorationToMeasure) {
const isLastCursor = model.getLastCursor().getMarker() === marker;
const screenPosition = reversed ? screenRange.start : screenRange.end;
const { row, column } = screenPosition;
if (row < this.getRenderedStartRow() || row >= this.getRenderedEndRow())
return;
this.requestHorizontalMeasurement(row, column);
let columnWidth = 0;
if (model.lineLengthForScreenRow(row) > column) {
columnWidth = 1;
this.requestHorizontalMeasurement(row, column + 1);
}
decorationToMeasure = { screenPosition, columnWidth, isLastCursor };
this.decorationsToMeasure.cursors.set(marker, decorationToMeasure);
}
if (decoration.class) {
if (decorationToMeasure.className) {
decorationToMeasure.className += ' ' + decoration.class;
} else {
decorationToMeasure.className = decoration.class;
}
}
if (decoration.style) {
if (decorationToMeasure.style) {
Object.assign(decorationToMeasure.style, decoration.style);
} else {
decorationToMeasure.style = Object.assign({}, decoration.style);
}
}
}
addOverlayDecorationToRender(decoration, marker) {
const { class: className, item, position, avoidOverflow } = decoration;
const element = TextEditor.viewForItem(item);
const screenPosition =
position === 'tail'
? marker.getTailScreenPosition()
: marker.getHeadScreenPosition();
this.requestHorizontalMeasurement(
screenPosition.row,
screenPosition.column
);
this.decorationsToRender.overlays.push({
className,
element,
avoidOverflow,
screenPosition
});
}
addCustomGutterDecorationToRender(decoration, screenRange) {
let decorations = this.decorationsToRender.customGutter.get(
decoration.gutterName
);
if (!decorations) {
decorations = [];
this.decorationsToRender.customGutter.set(
decoration.gutterName,
decorations
);
}
const top = this.pixelPositionAfterBlocksForRow(screenRange.start.row);
const height =
this.pixelPositionBeforeBlocksForRow(screenRange.end.row + 1) - top;
decorations.push({
className:
'decoration' + (decoration.class ? ' ' + decoration.class : ''),
element: TextEditor.viewForItem(decoration.item),
top,
height
});
}
addBlockDecorationToRender(decoration, screenRange, reversed) {
const { row } = reversed ? screenRange.start : screenRange.end;
if (row < this.getRenderedStartRow() || row >= this.getRenderedEndRow())
return;
const tileStartRow = this.tileStartRowForRow(row);
const screenLine = this.renderedScreenLines[
row - this.getRenderedStartRow()
];
let decorationsByScreenLine = this.decorationsToRender.blocks.get(
tileStartRow
);
if (!decorationsByScreenLine) {
decorationsByScreenLine = new Map();
this.decorationsToRender.blocks.set(
tileStartRow,
decorationsByScreenLine
);
}
let decorations = decorationsByScreenLine.get(screenLine.id);
if (!decorations) {
decorations = [];
decorationsByScreenLine.set(screenLine.id, decorations);
}
decorations.push(decoration);
// Order block decorations by increasing values of their "order" property. Break ties with "id", which mirrors
// their creation sequence.
decorations.sort((a, b) =>
a.order !== b.order ? a.order - b.order : a.id - b.id
);
}
addTextDecorationToRender(decoration, screenRange, marker) {
if (screenRange.isEmpty()) return;
let decorationsForMarker = this.textDecorationsByMarker.get(marker);
if (!decorationsForMarker) {
decorationsForMarker = [];
this.textDecorationsByMarker.set(marker, decorationsForMarker);
this.textDecorationBoundaries.push({
position: screenRange.start,
starting: [marker]
});
this.textDecorationBoundaries.push({
position: screenRange.end,
ending: [marker]
});
}
decorationsForMarker.push(decoration);
}
populateTextDecorationsToRender() {
// Sort all boundaries in ascending order of position
this.textDecorationBoundaries.sort((a, b) =>
a.position.compare(b.position)
);
// Combine adjacent boundaries with the same position
for (let i = 0; i < this.textDecorationBoundaries.length; ) {
const boundary = this.textDecorationBoundaries[i];
const nextBoundary = this.textDecorationBoundaries[i + 1];
if (nextBoundary && nextBoundary.position.isEqual(boundary.position)) {
if (nextBoundary.starting) {
if (boundary.starting) {
boundary.starting.push(...nextBoundary.starting);
} else {
boundary.starting = nextBoundary.starting;
}
}
if (nextBoundary.ending) {
if (boundary.ending) {
boundary.ending.push(...nextBoundary.ending);
} else {
boundary.ending = nextBoundary.ending;
}
}
this.textDecorationBoundaries.splice(i + 1, 1);
} else {
i++;
}
}
const renderedStartRow = this.getRenderedStartRow();
const renderedEndRow = this.getRenderedEndRow();
const containingMarkers = [];
// Iterate over boundaries to build up text decorations.
for (let i = 0; i < this.textDecorationBoundaries.length; i++) {
const boundary = this.textDecorationBoundaries[i];
// If multiple markers start here, sort them by order of nesting (markers ending later come first)
if (boundary.starting && boundary.starting.length > 1) {
boundary.starting.sort((a, b) => a.compare(b));
}
// If multiple markers start here, sort them by order of nesting (markers starting earlier come first)
if (boundary.ending && boundary.ending.length > 1) {
boundary.ending.sort((a, b) => b.compare(a));
}
// Remove markers ending here from containing markers array
if (boundary.ending) {
for (let j = boundary.ending.length - 1; j >= 0; j--) {
containingMarkers.splice(
containingMarkers.lastIndexOf(boundary.ending[j]),
1
);
}
}
// Add markers starting here to containing markers array
if (boundary.starting) containingMarkers.push(...boundary.starting);
// Determine desired className and style based on containing markers
let className, style;
for (let j = 0; j < containingMarkers.length; j++) {
const marker = containingMarkers[j];
const decorations = this.textDecorationsByMarker.get(marker);
for (let k = 0; k < decorations.length; k++) {
const decoration = decorations[k];
if (decoration.class) {
if (className) {
className += ' ' + decoration.class;
} else {
className = decoration.class;
}
}
if (decoration.style) {
if (style) {
Object.assign(style, decoration.style);
} else {
style = Object.assign({}, decoration.style);
}
}
}
}
// Add decoration start with className/style for current position's column,
// and also for the start of every row up until the next decoration boundary
if (boundary.position.row >= renderedStartRow) {
this.addTextDecorationStart(
boundary.position.row,
boundary.position.column,
className,
style
);
}
const nextBoundary = this.textDecorationBoundaries[i + 1];
if (nextBoundary) {
let row = Math.max(boundary.position.row + 1, renderedStartRow);
const endRow = Math.min(nextBoundary.position.row, renderedEndRow);
for (; row < endRow; row++) {
this.addTextDecorationStart(row, 0, className, style);
}
if (
row === nextBoundary.position.row &&
nextBoundary.position.column !== 0
) {
this.addTextDecorationStart(row, 0, className, style);
}
}
}
}
addTextDecorationStart(row, column, className, style) {
const renderedStartRow = this.getRenderedStartRow();
let decorationStarts = this.decorationsToRender.text[
row - renderedStartRow
];
if (!decorationStarts) {
decorationStarts = [];
this.decorationsToRender.text[row - renderedStartRow] = decorationStarts;
}
decorationStarts.push({ column, className, style });
}
updateAbsolutePositionedDecorations() {
this.updateHighlightsToRender();
this.updateCursorsToRender();
this.updateOverlaysToRender();
}
updateHighlightsToRender() {
this.decorationsToRender.highlights.length = 0;
for (let i = 0; i < this.decorationsToMeasure.highlights.length; i++) {
const highlight = this.decorationsToMeasure.highlights[i];
const { start, end } = highlight.screenRange;
highlight.startPixelTop = this.pixelPositionAfterBlocksForRow(start.row);
highlight.startPixelLeft = this.pixelLeftForRowAndColumn(
start.row,
start.column
);
highlight.endPixelTop =
this.pixelPositionAfterBlocksForRow(end.row) + this.getLineHeight();
highlight.endPixelLeft = this.pixelLeftForRowAndColumn(
end.row,
end.column
);
this.decorationsToRender.highlights.push(highlight);
}
}
updateCursorsToRender() {
this.decorationsToRender.cursors.length = 0;
this.decorationsToMeasure.cursors.forEach(cursor => {
const { screenPosition, className, style } = cursor;
const { row, column } = screenPosition;
const pixelTop = this.pixelPositionAfterBlocksForRow(row);
const pixelLeft = this.pixelLeftForRowAndColumn(row, column);
let pixelWidth;
if (cursor.columnWidth === 0) {
pixelWidth = this.getBaseCharacterWidth();
} else {
pixelWidth = this.pixelLeftForRowAndColumn(row, column + 1) - pixelLeft;
}
const cursorPosition = {
pixelTop,
pixelLeft,
pixelWidth,
className,
style
};
this.decorationsToRender.cursors.push(cursorPosition);
if (cursor.isLastCursor) this.hiddenInputPosition = cursorPosition;
});
}
updateOverlayToRender(decoration) {
const windowInnerHeight = this.getWindowInnerHeight();
const windowInnerWidth = this.getWindowInnerWidth();
const contentClientRect = this.refs.content.getBoundingClientRect();
const { element, screenPosition, avoidOverflow } = decoration;
const { row, column } = screenPosition;
let wrapperTop =
contentClientRect.top +
this.pixelPositionAfterBlocksForRow(row) +
this.getLineHeight();
let wrapperLeft =
contentClientRect.left + this.pixelLeftForRowAndColumn(row, column);
const clientRect = element.getBoundingClientRect();
if (avoidOverflow !== false) {
const computedStyle = window.getComputedStyle(element);
const elementTop = wrapperTop + parseInt(computedStyle.marginTop);
const elementBottom = elementTop + clientRect.height;
const flippedElementTop =
wrapperTop -
this.getLineHeight() -
clientRect.height -
parseInt(computedStyle.marginBottom);
const elementLeft = wrapperLeft + parseInt(computedStyle.marginLeft);
const elementRight = elementLeft + clientRect.width;
if (elementBottom > windowInnerHeight && flippedElementTop >= 0) {
wrapperTop -= elementTop - flippedElementTop;
}
if (elementLeft < 0) {
wrapperLeft -= elementLeft;
} else if (elementRight > windowInnerWidth) {
wrapperLeft -= elementRight - windowInnerWidth;
}
}
decoration.pixelTop = Math.round(wrapperTop);
decoration.pixelLeft = Math.round(wrapperLeft);
}
updateOverlaysToRender() {
const overlayCount = this.decorationsToRender.overlays.length;
if (overlayCount === 0) return null;
for (let i = 0; i < overlayCount; i++) {
const decoration = this.decorationsToRender.overlays[i];
this.updateOverlayToRender(decoration);
}
}
didAttach() {
if (!this.attached) {
this.attached = true;
this.intersectionObserver = new IntersectionObserver(entries => {
const { intersectionRect } = entries[entries.length - 1];
if (intersectionRect.width > 0 || intersectionRect.height > 0) {
this.didShow();
} else {
this.didHide();
}
});
this.intersectionObserver.observe(this.element);
this.resizeObserver = new ResizeObserver(this.didResize.bind(this));
this.resizeObserver.observe(this.element);
if (this.refs.gutterContainer) {
this.gutterContainerResizeObserver = new ResizeObserver(
this.didResizeGutterContainer.bind(this)
);
this.gutterContainerResizeObserver.observe(
this.refs.gutterContainer.element
);
}
this.overlayComponents.forEach(component => component.didAttach());
if (this.isVisible()) {
this.didShow();
if (this.refs.verticalScrollbar)
this.refs.verticalScrollbar.flushScrollPosition();
if (this.refs.horizontalScrollbar)
this.refs.horizontalScrollbar.flushScrollPosition();
} else {
this.didHide();
}
if (!this.constructor.attachedComponents) {
this.constructor.attachedComponents = new Set();
}
this.constructor.attachedComponents.add(this);
}
}
didDetach() {
if (this.attached) {
this.intersectionObserver.disconnect();
this.resizeObserver.disconnect();
if (this.gutterContainerResizeObserver)
this.gutterContainerResizeObserver.disconnect();
this.overlayComponents.forEach(component => component.didDetach());
this.didHide();
this.attached = false;
this.constructor.attachedComponents.delete(this);
}
}
didShow() {
if (!this.visible && this.isVisible()) {
if (!this.hasInitialMeasurements) this.measureDimensions();
this.visible = true;
this.props.model.setVisible(true);
this.resizeBlockDecorationMeasurementsArea = true;
this.updateSync();
this.flushPendingLogicalScrollPosition();
}
}
didHide() {
if (this.visible) {
this.visible = false;
this.props.model.setVisible(false);
}
}
// Called by TextEditorElement so that focus events can be handled before
// the element is attached to the DOM.
didFocus() {
if (!this.visible) this.didShow();
if (!this.focused) {
this.focused = true;
this.startCursorBlinking();
this.scheduleUpdate();
}
this.getHiddenInput().focus({ preventScroll: true });
}
// Called by TextEditorElement so that this function is always the first
// listener to be fired, even if other listeners are bound before creating
// the component.
didBlur(event) {
if (event.relatedTarget === this.getHiddenInput()) {
event.stopImmediatePropagation();
}
}
didBlurHiddenInput(event) {
if (
this.element !== event.relatedTarget &&
!this.element.contains(event.relatedTarget)
) {
this.focused = false;
this.stopCursorBlinking();
this.scheduleUpdate();
this.element.dispatchEvent(new FocusEvent(event.type, event));
}
}
didFocusHiddenInput() {
if (!this.focused) {
this.focused = true;
this.startCursorBlinking();
this.scheduleUpdate();
}
}
didMouseWheel(event) {
const scrollSensitivity = this.props.model.getScrollSensitivity() / 100;
let { wheelDeltaX, wheelDeltaY } = event;
if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) {
wheelDeltaX = wheelDeltaX * scrollSensitivity;
wheelDeltaY = 0;
} else {
wheelDeltaX = 0;
wheelDeltaY = wheelDeltaY * scrollSensitivity;
}
if (this.getPlatform() !== 'darwin' && event.shiftKey) {
let temp = wheelDeltaX;
wheelDeltaX = wheelDeltaY;
wheelDeltaY = temp;
}
const scrollLeftChanged =
wheelDeltaX !== 0 &&
this.setScrollLeft(this.getScrollLeft() - wheelDeltaX);
const scrollTopChanged =
wheelDeltaY !== 0 && this.setScrollTop(this.getScrollTop() - wheelDeltaY);
if (scrollLeftChanged || scrollTopChanged) {
event.preventDefault();
this.updateSync();
}
}
didResize() {
// Prevent the component from measuring the client container dimensions when
// getting spurious resize events.
if (this.isVisible()) {
const clientContainerWidthChanged = this.measureClientContainerWidth();
const clientContainerHeightChanged = this.measureClientContainerHeight();
if (clientContainerWidthChanged || clientContainerHeightChanged) {
if (clientContainerWidthChanged) {
this.remeasureAllBlockDecorations = true;
}
this.resizeObserver.disconnect();
this.scheduleUpdate();
process.nextTick(() => {
this.resizeObserver.observe(this.element);
});
}
}
}
didResizeGutterContainer() {
// Prevent the component from measuring the gutter dimensions when getting
// spurious resize events.
if (this.isVisible() && this.measureGutterDimensions()) {
this.gutterContainerResizeObserver.disconnect();
this.scheduleUpdate();
process.nextTick(() => {
this.gutterContainerResizeObserver.observe(
this.refs.gutterContainer.element
);
});
}
}
didScrollDummyScrollbar() {
let scrollTopChanged = false;
let scrollLeftChanged = false;
if (!this.scrollTopPending) {
scrollTopChanged = this.setScrollTop(
this.refs.verticalScrollbar.element.scrollTop
);
}
if (!this.scrollLeftPending) {
scrollLeftChanged = this.setScrollLeft(
this.refs.horizontalScrollbar.element.scrollLeft
);
}
if (scrollTopChanged || scrollLeftChanged) this.updateSync();
}
didUpdateStyles() {
this.remeasureCharacterDimensions = true;
this.horizontalPixelPositionsByScreenLineId.clear();
this.scheduleUpdate();
}
didUpdateScrollbarStyles() {
if (!this.props.model.isMini()) {
this.remeasureScrollbars = true;
this.scheduleUpdate();
}
}
didPaste(event) {
// On Linux, Chromium translates a middle-button mouse click into a
// mousedown event *and* a paste event. Since Atom supports the middle mouse
// click as a way of closing a tab, we only want the mousedown event, not
// the paste event. And since we don't use the `paste` event for any
// behavior in Atom, we can no-op the event to eliminate this issue.
// See https://github.com/atom/atom/pull/15183#issue-248432413.
if (this.getPlatform() === 'linux') event.preventDefault();
}
didTextInput(event) {
if (this.compositionCheckpoint) {
this.props.model.revertToCheckpoint(this.compositionCheckpoint);
this.compositionCheckpoint = null;
}
if (this.isInputEnabled()) {
event.stopPropagation();
// WARNING: If we call preventDefault on the input of a space
// character, then the browser interprets the spacebar keypress as a
// page-down command, causing spaces to scroll elements containing
// editors. This means typing space will actually change the contents
// of the hidden input, which will cause the browser to autoscroll the
// scroll container to reveal the input if it is off screen (See
// https://github.com/atom/atom/issues/16046). To correct for this
// situation, we automatically reset the scroll position to 0,0 after
// typing a space. None of this can really be tested.
if (event.data === ' ') {
window.setImmediate(() => {
this.refs.scrollContainer.scrollTop = 0;
this.refs.scrollContainer.scrollLeft = 0;
});
} else {
event.preventDefault();
}
// If the input event is fired while the accented character menu is open it
// means that the user has chosen one of the accented alternatives. Thus, we
// will replace the original non accented character with the selected
// alternative.
if (this.accentedCharacterMenuIsOpen) {
this.props.model.selectLeft();
}
this.props.model.insertText(event.data, { groupUndo: true });
}
}
// We need to get clever to detect when the accented character menu is
// opened on macOS. Usually, every keydown event that could cause input is
// followed by a corresponding keypress. However, pressing and holding
// long enough to open the accented character menu causes additional keydown
// events to fire that aren't followed by their own keypress and textInput
// events.
//
// Therefore, we assume the accented character menu has been deployed if,
// before observing any keyup event, we observe events in the following
// sequence:
//
// keydown(code: X), keypress, keydown(code: X)
//
// The code X must be the same in the keydown events that bracket the
// keypress, meaning we're *holding* the _same_ key we initially pressed.
// Got that?
didKeydown(event) {
// Stop dragging when user interacts with the keyboard. This prevents
// unwanted selections in the case edits are performed while selecting text
// at the same time. Modifier keys are exempt to preserve the ability to
// add selections, shift-scroll horizontally while selecting.
if (
this.stopDragging &&
event.key !== 'Control' &&
event.key !== 'Alt' &&
event.key !== 'Meta' &&
event.key !== 'Shift'
) {
this.stopDragging();
}
if (this.lastKeydownBeforeKeypress != null) {
if (this.lastKeydownBeforeKeypress.code === event.code) {
this.accentedCharacterMenuIsOpen = true;
}
this.lastKeydownBeforeKeypress = null;
}
this.lastKeydown = event;
}
didKeypress(event) {
this.lastKeydownBeforeKeypress = this.lastKeydown;
// This cancels the accented character behavior if we type a key normally
// with the menu open.
this.accentedCharacterMenuIsOpen = false;
}
didKeyup(event) {
if (
this.lastKeydownBeforeKeypress &&
this.lastKeydownBeforeKeypress.code === event.code
) {
this.lastKeydownBeforeKeypress = null;
}
}
// The IME composition events work like this:
//
// User types 's', chromium pops up the completion helper
// 1. compositionstart fired
// 2. compositionupdate fired; event.data == 's'
// User hits arrow keys to move around in completion helper
// 3. compositionupdate fired; event.data == 's' for each arry key press
// User escape to cancel OR User chooses a completion
// 4. compositionend fired
// 5. textInput fired; event.data == the completion string
didCompositionStart() {
// Workaround for Chromium not preventing composition events when
// preventDefault is called on the keydown event that precipitated them.
if (this.lastKeydown && this.lastKeydown.defaultPrevented) {
this.getHiddenInput().disabled = true;
process.nextTick(() => {
// Disabling the hidden input makes it lose focus as well, so we have to
// re-enable and re-focus it.
this.getHiddenInput().disabled = false;
this.getHiddenInput().focus({ preventScroll: true });
});
return;
}
this.compositionCheckpoint = this.props.model.createCheckpoint();
if (this.accentedCharacterMenuIsOpen) {
this.props.model.selectLeft();
}
}
didCompositionUpdate(event) {
this.props.model.insertText(event.data, { select: true });
}
didCompositionEnd(event) {
event.target.value = '';
}
didMouseDownOnContent(event) {
const { model } = this.props;
const { target, button, detail, ctrlKey, shiftKey, metaKey } = event;
const platform = this.getPlatform();
// Ignore clicks on block decorations.
if (target) {
let element = target;
while (element && element !== this.element) {
if (this.blockDecorationsByElement.has(element)) {
return;
}
element = element.parentElement;
}
}
const screenPosition = this.screenPositionForMouseEvent(event);
if (button === 1) {
model.setCursorScreenPosition(screenPosition, { autoscroll: false });
// On Linux, pasting happens on middle click. A textInput event with the
// contents of the selection clipboard will be dispatched by the browser
// automatically on mouseup if editor.selectionClipboard is set to true.
if (
platform === 'linux' &&
this.isInputEnabled() &&
atom.config.get('editor.selectionClipboard')
)
model.insertText(clipboard.readText('selection'));
return;
}
if (button !== 0) return;
// Ctrl-click brings up the context menu on macOS
if (platform === 'darwin' && ctrlKey) return;
if (target && target.matches('.fold-marker')) {
const bufferPosition = model.bufferPositionForScreenPosition(
screenPosition
);
model.destroyFoldsContainingBufferPositions([bufferPosition], false);
return;
}
const allowMultiCursor = atom.config.get('editor.multiCursorOnClick');
const addOrRemoveSelection =
allowMultiCursor && (metaKey || (ctrlKey && platform !== 'darwin'));
switch (detail) {
case 1:
if (addOrRemoveSelection) {
const existingSelection = model.getSelectionAtScreenPosition(
screenPosition
);
if (existingSelection) {
if (model.hasMultipleCursors()) existingSelection.destroy();
} else {
model.addCursorAtScreenPosition(screenPosition, {
autoscroll: false
});
}
} else {
if (shiftKey) {
model.selectToScreenPosition(screenPosition, { autoscroll: false });
} else {
model.setCursorScreenPosition(screenPosition, {
autoscroll: false
});
}
}
break;
case 2:
if (addOrRemoveSelection)
model.addCursorAtScreenPosition(screenPosition, {
autoscroll: false
});
model.getLastSelection().selectWord({ autoscroll: false });
break;
case 3:
if (addOrRemoveSelection)
model.addCursorAtScreenPosition(screenPosition, {
autoscroll: false
});
model.getLastSelection().selectLine(null, { autoscroll: false });
break;
}
this.handleMouseDragUntilMouseUp({
didDrag: event => {
this.autoscrollOnMouseDrag(event);
const screenPosition = this.screenPositionForMouseEvent(event);
model.selectToScreenPosition(screenPosition, {
suppressSelectionMerge: true,
autoscroll: false
});
this.updateSync();
},
didStopDragging: () => {
model.finalizeSelections();
model.mergeIntersectingSelections();
this.updateSync();
}
});
}
didMouseDownOnLineNumberGutter(event) {
const { model } = this.props;
const { target, button, ctrlKey, shiftKey, metaKey } = event;
// Only handle mousedown events for left mouse button
if (button !== 0) return;
const clickedScreenRow = this.screenPositionForMouseEvent(event).row;
const startBufferRow = model.bufferPositionForScreenPosition([
clickedScreenRow,
0
]).row;
if (
target &&
(target.matches('.foldable .icon-right') ||
target.matches('.folded .icon-right'))
) {
model.toggleFoldAtBufferRow(startBufferRow);
return;
}
const addOrRemoveSelection =
metaKey || (ctrlKey && this.getPlatform() !== 'darwin');
const endBufferRow = model.bufferPositionForScreenPosition([
clickedScreenRow,
Infinity
]).row;
const clickedLineBufferRange = Range(
Point(startBufferRow, 0),
Point(endBufferRow + 1, 0)
);
let initialBufferRange;
if (shiftKey) {
const lastSelection = model.getLastSelection();
initialBufferRange = lastSelection.getBufferRange();
lastSelection.setBufferRange(
initialBufferRange.union(clickedLineBufferRange),
{
reversed: clickedScreenRow < lastSelection.getScreenRange().start.row,
autoscroll: false,
preserveFolds: true,
suppressSelectionMerge: true
}
);
} else {
initialBufferRange = clickedLineBufferRange;
if (addOrRemoveSelection) {
model.addSelectionForBufferRange(clickedLineBufferRange, {
autoscroll: false,
preserveFolds: true
});
} else {
model.setSelectedBufferRange(clickedLineBufferRange, {
autoscroll: false,
preserveFolds: true
});
}
}
const initialScreenRange = model.screenRangeForBufferRange(
initialBufferRange
);
this.handleMouseDragUntilMouseUp({
didDrag: event => {
this.autoscrollOnMouseDrag(event, true);
const dragRow = this.screenPositionForMouseEvent(event).row;
const draggedLineScreenRange = Range(
Point(dragRow, 0),
Point(dragRow + 1, 0)
);
model
.getLastSelection()
.setScreenRange(draggedLineScreenRange.union(initialScreenRange), {
reversed: dragRow < initialScreenRange.start.row,
autoscroll: false,
preserveFolds: true
});
this.updateSync();
},
didStopDragging: () => {
model.mergeIntersectingSelections();
this.updateSync();
}
});
}
handleMouseDragUntilMouseUp({ didDrag, didStopDragging }) {
let dragging = false;
let lastMousemoveEvent;
const animationFrameLoop = () => {
window.requestAnimationFrame(() => {
if (dragging && this.visible) {
didDrag(lastMousemoveEvent);
animationFrameLoop();
}
});
};
function didMouseMove(event) {
lastMousemoveEvent = event;
if (!dragging) {
dragging = true;
animationFrameLoop();
}
}
function didMouseUp() {
this.stopDragging = null;
window.removeEventListener('mousemove', didMouseMove);
window.removeEventListener('mouseup', didMouseUp, { capture: true });
if (dragging) {
dragging = false;
didStopDragging();
}
}
window.addEventListener('mousemove', didMouseMove);
window.addEventListener('mouseup', didMouseUp, { capture: true });
this.stopDragging = didMouseUp;
}
autoscrollOnMouseDrag({ clientX, clientY }, verticalOnly = false) {
let {
top,
bottom,
left,
right
} = this.refs.scrollContainer.getBoundingClientRect(); // Using var to avoid deopt on += assignments below
top += MOUSE_DRAG_AUTOSCROLL_MARGIN;
bottom -= MOUSE_DRAG_AUTOSCROLL_MARGIN;
left += MOUSE_DRAG_AUTOSCROLL_MARGIN;
right -= MOUSE_DRAG_AUTOSCROLL_MARGIN;
let yDelta, yDirection;
if (clientY < top) {
yDelta = top - clientY;
yDirection = -1;
} else if (clientY > bottom) {
yDelta = clientY - bottom;
yDirection = 1;
}
let xDelta, xDirection;
if (clientX < left) {
xDelta = left - clientX;
xDirection = -1;
} else if (clientX > right) {
xDelta = clientX - right;
xDirection = 1;
}
let scrolled = false;
if (yDelta != null) {
const scaledDelta = scaleMouseDragAutoscrollDelta(yDelta) * yDirection;
scrolled = this.setScrollTop(this.getScrollTop() + scaledDelta);
}
if (!verticalOnly && xDelta != null) {
const scaledDelta = scaleMouseDragAutoscrollDelta(xDelta) * xDirection;
scrolled = this.setScrollLeft(this.getScrollLeft() + scaledDelta);
}
if (scrolled) this.updateSync();
}
screenPositionForMouseEvent(event) {
return this.screenPositionForPixelPosition(
this.pixelPositionForMouseEvent(event)
);
}
pixelPositionForMouseEvent({ clientX, clientY }) {
const scrollContainerRect = this.refs.scrollContainer.getBoundingClientRect();
clientX = Math.min(
scrollContainerRect.right,
Math.max(scrollContainerRect.left, clientX)
);
clientY = Math.min(
scrollContainerRect.bottom,
Math.max(scrollContainerRect.top, clientY)
);
const linesRect = this.refs.lineTiles.getBoundingClientRect();
return {
top: clientY - linesRect.top,
left: clientX - linesRect.left
};
}
didUpdateSelections() {
this.pauseCursorBlinking();
this.scheduleUpdate();
}
pauseCursorBlinking() {
this.stopCursorBlinking();
this.debouncedResumeCursorBlinking();
}
resumeCursorBlinking() {
this.cursorsBlinkedOff = true;
this.startCursorBlinking();
}
stopCursorBlinking() {
if (this.cursorsBlinking) {
this.cursorsBlinkedOff = false;
this.cursorsBlinking = false;
window.clearInterval(this.cursorBlinkIntervalHandle);
this.cursorBlinkIntervalHandle = null;
this.scheduleUpdate();
}
}
startCursorBlinking() {
if (!this.cursorsBlinking) {
this.cursorBlinkIntervalHandle = window.setInterval(() => {
this.cursorsBlinkedOff = !this.cursorsBlinkedOff;
this.scheduleUpdate(true);
}, (this.props.cursorBlinkPeriod || CURSOR_BLINK_PERIOD) / 2);
this.cursorsBlinking = true;
this.scheduleUpdate(true);
}
}
didRequestAutoscroll(autoscroll) {
this.pendingAutoscroll = autoscroll;
this.scheduleUpdate();
}
flushPendingLogicalScrollPosition() {
let changedScrollTop = false;
if (this.pendingScrollTopRow > 0) {
changedScrollTop = this.setScrollTopRow(this.pendingScrollTopRow, false);
this.pendingScrollTopRow = null;
}
let changedScrollLeft = false;
if (this.pendingScrollLeftColumn > 0) {
changedScrollLeft = this.setScrollLeftColumn(
this.pendingScrollLeftColumn,
false
);
this.pendingScrollLeftColumn = null;
}
if (changedScrollTop || changedScrollLeft) {
this.updateSync();
}
}
autoscrollVertically(screenRange, options) {
const screenRangeTop = this.pixelPositionAfterBlocksForRow(
screenRange.start.row
);
const screenRangeBottom =
this.pixelPositionAfterBlocksForRow(screenRange.end.row) +
this.getLineHeight();
const verticalScrollMargin = this.getVerticalAutoscrollMargin();
let desiredScrollTop, desiredScrollBottom;
if (options && options.center) {
const desiredScrollCenter = (screenRangeTop + screenRangeBottom) / 2;
desiredScrollTop =
desiredScrollCenter - this.getScrollContainerClientHeight() / 2;
desiredScrollBottom =
desiredScrollCenter + this.getScrollContainerClientHeight() / 2;
} else {
desiredScrollTop = screenRangeTop - verticalScrollMargin;
desiredScrollBottom = screenRangeBottom + verticalScrollMargin;
}
if (!options || options.reversed !== false) {
if (desiredScrollBottom > this.getScrollBottom()) {
this.setScrollBottom(desiredScrollBottom);
}
if (desiredScrollTop < this.getScrollTop()) {
this.setScrollTop(desiredScrollTop);
}
} else {
if (desiredScrollTop < this.getScrollTop()) {
this.setScrollTop(desiredScrollTop);
}
if (desiredScrollBottom > this.getScrollBottom()) {
this.setScrollBottom(desiredScrollBottom);
}
}
return false;
}
autoscrollHorizontally(screenRange, options) {
const horizontalScrollMargin = this.getHorizontalAutoscrollMargin();
const gutterContainerWidth = this.getGutterContainerWidth();
let left =
this.pixelLeftForRowAndColumn(
screenRange.start.row,
screenRange.start.column
) + gutterContainerWidth;
let right =
this.pixelLeftForRowAndColumn(
screenRange.end.row,
screenRange.end.column
) + gutterContainerWidth;
const desiredScrollLeft = Math.max(
0,
left - horizontalScrollMargin - gutterContainerWidth
);
const desiredScrollRight = Math.min(
this.getScrollWidth(),
right + horizontalScrollMargin
);
if (!options || options.reversed !== false) {
if (desiredScrollRight > this.getScrollRight()) {
this.setScrollRight(desiredScrollRight);
}
if (desiredScrollLeft < this.getScrollLeft()) {
this.setScrollLeft(desiredScrollLeft);
}
} else {
if (desiredScrollLeft < this.getScrollLeft()) {
this.setScrollLeft(desiredScrollLeft);
}
if (desiredScrollRight > this.getScrollRight()) {
this.setScrollRight(desiredScrollRight);
}
}
}
getVerticalAutoscrollMargin() {
const maxMarginInLines = Math.floor(
(this.getScrollContainerClientHeight() / this.getLineHeight() - 1) / 2
);
const marginInLines = Math.min(
this.props.model.verticalScrollMargin,
maxMarginInLines
);
return marginInLines * this.getLineHeight();
}
getHorizontalAutoscrollMargin() {
const maxMarginInBaseCharacters = Math.floor(
(this.getScrollContainerClientWidth() / this.getBaseCharacterWidth() -
1) /
2
);
const marginInBaseCharacters = Math.min(
this.props.model.horizontalScrollMargin,
maxMarginInBaseCharacters
);
return marginInBaseCharacters * this.getBaseCharacterWidth();
}
// This method is called at the beginning of a frame render to relay any
// potential changes in the editor's width into the model before proceeding.
updateModelSoftWrapColumn() {
const { model } = this.props;
const newEditorWidthInChars = this.getScrollContainerClientWidthInBaseCharacters();
if (newEditorWidthInChars !== model.getEditorWidthInChars()) {
this.suppressUpdates = true;
const renderedStartRow = this.getRenderedStartRow();
this.props.model.setEditorWidthInChars(newEditorWidthInChars);
// Relaying a change in to the editor's client width may cause the
// vertical scrollbar to appear or disappear, which causes the editor's
// client width to change *again*. Make sure the display layer is fully
// populated for the visible area before recalculating the editor's
// width in characters. Then update the display layer *again* just in
// case a change in scrollbar visibility causes lines to wrap
// differently. We capture the renderedStartRow before resetting the
// display layer because once it has been reset, we can't compute the
// rendered start row accurately. 😥
this.populateVisibleRowRange(renderedStartRow);
this.props.model.setEditorWidthInChars(
this.getScrollContainerClientWidthInBaseCharacters()
);
this.derivedDimensionsCache = {};
this.suppressUpdates = false;
}
}
// This method exists because it existed in the previous implementation and some
// package tests relied on it
measureDimensions() {
this.measureCharacterDimensions();
this.measureGutterDimensions();
this.measureClientContainerHeight();
this.measureClientContainerWidth();
this.measureScrollbarDimensions();
this.hasInitialMeasurements = true;
}
measureCharacterDimensions() {
this.measurements.lineHeight = Math.max(
1,
this.refs.characterMeasurementLine.getBoundingClientRect().height
);
this.measurements.baseCharacterWidth = this.refs.normalWidthCharacterSpan.getBoundingClientRect().width;
this.measurements.doubleWidthCharacterWidth = this.refs.doubleWidthCharacterSpan.getBoundingClientRect().width;
this.measurements.halfWidthCharacterWidth = this.refs.halfWidthCharacterSpan.getBoundingClientRect().width;
this.measurements.koreanCharacterWidth = this.refs.koreanCharacterSpan.getBoundingClientRect().width;
this.props.model.setLineHeightInPixels(this.measurements.lineHeight);
this.props.model.setDefaultCharWidth(
this.measurements.baseCharacterWidth,
this.measurements.doubleWidthCharacterWidth,
this.measurements.halfWidthCharacterWidth,
this.measurements.koreanCharacterWidth
);
this.lineTopIndex.setDefaultLineHeight(this.measurements.lineHeight);
}
measureGutterDimensions() {
let dimensionsChanged = false;
if (this.refs.gutterContainer) {
const gutterContainerWidth = this.refs.gutterContainer.element
.offsetWidth;
if (gutterContainerWidth !== this.measurements.gutterContainerWidth) {
dimensionsChanged = true;
this.measurements.gutterContainerWidth = gutterContainerWidth;
}
} else {
this.measurements.gutterContainerWidth = 0;
}
if (
this.refs.gutterContainer &&
this.refs.gutterContainer.refs.lineNumberGutter
) {
const lineNumberGutterWidth = this.refs.gutterContainer.refs
.lineNumberGutter.element.offsetWidth;
if (lineNumberGutterWidth !== this.measurements.lineNumberGutterWidth) {
dimensionsChanged = true;
this.measurements.lineNumberGutterWidth = lineNumberGutterWidth;
}
} else {
this.measurements.lineNumberGutterWidth = 0;
}
return dimensionsChanged;
}
measureClientContainerHeight() {
const clientContainerHeight = this.refs.clientContainer.offsetHeight;
if (clientContainerHeight !== this.measurements.clientContainerHeight) {
this.measurements.clientContainerHeight = clientContainerHeight;
return true;
} else {
return false;
}
}
measureClientContainerWidth() {
const clientContainerWidth = this.refs.clientContainer.offsetWidth;
if (clientContainerWidth !== this.measurements.clientContainerWidth) {
this.measurements.clientContainerWidth = clientContainerWidth;
return true;
} else {
return false;
}
}
measureScrollbarDimensions() {
if (this.props.model.isMini()) {
this.measurements.verticalScrollbarWidth = 0;
this.measurements.horizontalScrollbarHeight = 0;
} else {
this.measurements.verticalScrollbarWidth = this.refs.verticalScrollbar.getRealScrollbarWidth();
this.measurements.horizontalScrollbarHeight = this.refs.horizontalScrollbar.getRealScrollbarHeight();
}
}
measureLongestLineWidth() {
if (this.longestLineToMeasure) {
const lineComponent = this.lineComponentsByScreenLineId.get(
this.longestLineToMeasure.id
);
this.measurements.longestLineWidth =
lineComponent.element.firstChild.offsetWidth;
this.longestLineToMeasure = null;
}
}
requestLineToMeasure(row, screenLine) {
this.linesToMeasure.set(row, screenLine);
}
requestHorizontalMeasurement(row, column) {
if (column === 0) return;
const screenLine = this.props.model.screenLineForScreenRow(row);
if (screenLine) {
this.requestLineToMeasure(row, screenLine);
let columns = this.horizontalPositionsToMeasure.get(row);
if (columns == null) {
columns = [];
this.horizontalPositionsToMeasure.set(row, columns);
}
columns.push(column);
}
}
measureHorizontalPositions() {
this.horizontalPositionsToMeasure.forEach((columnsToMeasure, row) => {
columnsToMeasure.sort((a, b) => a - b);
const screenLine = this.renderedScreenLineForRow(row);
const lineComponent = this.lineComponentsByScreenLineId.get(
screenLine.id
);
if (!lineComponent) {
const error = new Error(
'Requested measurement of a line component that is not currently rendered'
);
error.metadata = {
row,
columnsToMeasure,
renderedScreenLineIds: this.renderedScreenLines.map(line => line.id),
extraRenderedScreenLineIds: Array.from(
this.extraRenderedScreenLines.keys()
),
lineComponentScreenLineIds: Array.from(
this.lineComponentsByScreenLineId.keys()
),
renderedStartRow: this.getRenderedStartRow(),
renderedEndRow: this.getRenderedEndRow(),
requestedScreenLineId: screenLine.id
};
throw error;
}
const lineNode = lineComponent.element;
const textNodes = lineComponent.textNodes;
let positionsForLine = this.horizontalPixelPositionsByScreenLineId.get(
screenLine.id
);
if (positionsForLine == null) {
positionsForLine = new Map();
this.horizontalPixelPositionsByScreenLineId.set(
screenLine.id,
positionsForLine
);
}
this.measureHorizontalPositionsOnLine(
lineNode,
textNodes,
columnsToMeasure,
positionsForLine
);
});
this.horizontalPositionsToMeasure.clear();
}
measureHorizontalPositionsOnLine(
lineNode,
textNodes,
columnsToMeasure,
positions
) {
let lineNodeClientLeft = -1;
let textNodeStartColumn = 0;
let textNodesIndex = 0;
let lastTextNodeRight = null;
// eslint-disable-next-line no-labels
columnLoop: for (
let columnsIndex = 0;
columnsIndex < columnsToMeasure.length;
columnsIndex++
) {
const nextColumnToMeasure = columnsToMeasure[columnsIndex];
while (textNodesIndex < textNodes.length) {
if (nextColumnToMeasure === 0) {
positions.set(0, 0);
continue columnLoop; // eslint-disable-line no-labels
}
if (positions.has(nextColumnToMeasure)) continue columnLoop; // eslint-disable-line no-labels
const textNode = textNodes[textNodesIndex];
const textNodeEndColumn =
textNodeStartColumn + textNode.textContent.length;
if (nextColumnToMeasure < textNodeEndColumn) {
let clientPixelPosition;
if (nextColumnToMeasure === textNodeStartColumn) {
clientPixelPosition = clientRectForRange(textNode, 0, 1).left;
} else {
clientPixelPosition = clientRectForRange(
textNode,
0,
nextColumnToMeasure - textNodeStartColumn
).right;
}
if (lineNodeClientLeft === -1) {
lineNodeClientLeft = lineNode.getBoundingClientRect().left;
}
positions.set(
nextColumnToMeasure,
Math.round(clientPixelPosition - lineNodeClientLeft)
);
continue columnLoop; // eslint-disable-line no-labels
} else {
textNodesIndex++;
textNodeStartColumn = textNodeEndColumn;
}
}
if (lastTextNodeRight == null) {
const lastTextNode = textNodes[textNodes.length - 1];
lastTextNodeRight = clientRectForRange(
lastTextNode,
0,
lastTextNode.textContent.length
).right;
}
if (lineNodeClientLeft === -1) {
lineNodeClientLeft = lineNode.getBoundingClientRect().left;
}
positions.set(
nextColumnToMeasure,
Math.round(lastTextNodeRight - lineNodeClientLeft)
);
}
}
rowForPixelPosition(pixelPosition) {
return Math.max(0, this.lineTopIndex.rowForPixelPosition(pixelPosition));
}
heightForBlockDecorationsBeforeRow(row) {
return (
this.pixelPositionAfterBlocksForRow(row) -
this.pixelPositionBeforeBlocksForRow(row)
);
}
heightForBlockDecorationsAfterRow(row) {
const currentRowBottom =
this.pixelPositionAfterBlocksForRow(row) + this.getLineHeight();
const nextRowTop = this.pixelPositionBeforeBlocksForRow(row + 1);
return nextRowTop - currentRowBottom;
}
pixelPositionBeforeBlocksForRow(row) {
return this.lineTopIndex.pixelPositionBeforeBlocksForRow(row);
}
pixelPositionAfterBlocksForRow(row) {
return this.lineTopIndex.pixelPositionAfterBlocksForRow(row);
}
pixelLeftForRowAndColumn(row, column) {
if (column === 0) return 0;
const screenLine = this.renderedScreenLineForRow(row);
if (screenLine) {
const horizontalPositionsByColumn = this.horizontalPixelPositionsByScreenLineId.get(
screenLine.id
);
if (horizontalPositionsByColumn) {
return horizontalPositionsByColumn.get(column);
}
}
}
screenPositionForPixelPosition({ top, left }) {
const { model } = this.props;
const row = Math.min(
this.rowForPixelPosition(top),
model.getApproximateScreenLineCount() - 1
);
let screenLine = this.renderedScreenLineForRow(row);
if (!screenLine) {
this.requestLineToMeasure(row, model.screenLineForScreenRow(row));
this.updateSyncBeforeMeasuringContent();
this.measureContentDuringUpdateSync();
screenLine = this.renderedScreenLineForRow(row);
}
const linesClientLeft = this.refs.lineTiles.getBoundingClientRect().left;
const targetClientLeft = linesClientLeft + Math.max(0, left);
const { textNodes } = this.lineComponentsByScreenLineId.get(screenLine.id);
let containingTextNodeIndex;
{
let low = 0;
let high = textNodes.length - 1;
while (low <= high) {
const mid = low + ((high - low) >> 1);
const textNode = textNodes[mid];
const textNodeRect = clientRectForRange(textNode, 0, textNode.length);
if (targetClientLeft < textNodeRect.left) {
high = mid - 1;
containingTextNodeIndex = Math.max(0, mid - 1);
} else if (targetClientLeft > textNodeRect.right) {
low = mid + 1;
containingTextNodeIndex = Math.min(textNodes.length - 1, mid + 1);
} else {
containingTextNodeIndex = mid;
break;
}
}
}
const containingTextNode = textNodes[containingTextNodeIndex];
let characterIndex = 0;
{
let low = 0;
let high = containingTextNode.length - 1;
while (low <= high) {
const charIndex = low + ((high - low) >> 1);
const nextCharIndex = isPairedCharacter(
containingTextNode.textContent,
charIndex
)
? charIndex + 2
: charIndex + 1;
const rangeRect = clientRectForRange(
containingTextNode,
charIndex,
nextCharIndex
);
if (targetClientLeft < rangeRect.left) {
high = charIndex - 1;
characterIndex = Math.max(0, charIndex - 1);
} else if (targetClientLeft > rangeRect.right) {
low = nextCharIndex;
characterIndex = Math.min(
containingTextNode.textContent.length,
nextCharIndex
);
} else {
if (targetClientLeft <= (rangeRect.left + rangeRect.right) / 2) {
characterIndex = charIndex;
} else {
characterIndex = nextCharIndex;
}
break;
}
}
}
let textNodeStartColumn = 0;
for (let i = 0; i < containingTextNodeIndex; i++) {
textNodeStartColumn = textNodeStartColumn + textNodes[i].length;
}
const column = textNodeStartColumn + characterIndex;
return Point(row, column);
}
didResetDisplayLayer() {
this.spliceLineTopIndex(0, Infinity, Infinity);
this.scheduleUpdate();
}
didChangeDisplayLayer(changes) {
for (let i = 0; i < changes.length; i++) {
const { oldRange, newRange } = changes[i];
this.spliceLineTopIndex(
newRange.start.row,
oldRange.end.row - oldRange.start.row,
newRange.end.row - newRange.start.row
);
}
this.scheduleUpdate();
}
didChangeSelectionRange() {
const { model } = this.props;
if (this.getPlatform() === 'linux') {
if (this.selectionClipboardImmediateId) {
clearImmediate(this.selectionClipboardImmediateId);
}
this.selectionClipboardImmediateId = setImmediate(() => {
this.selectionClipboardImmediateId = null;
if (model.isDestroyed()) return;
const selectedText = model.getSelectedText();
if (selectedText) {
// This uses ipcRenderer.send instead of clipboard.writeText because
// clipboard.writeText is a sync ipcRenderer call on Linux and that
// will slow down selections.
electron.ipcRenderer.send(
'write-text-to-selection-clipboard',
selectedText
);
}
});
}
}
observeBlockDecorations() {
const { model } = this.props;
const decorations = model.getDecorations({ type: 'block' });
for (let i = 0; i < decorations.length; i++) {
this.addBlockDecoration(decorations[i]);
}
}
addBlockDecoration(decoration, subscribeToChanges = true) {
const marker = decoration.getMarker();
const { item, position } = decoration.getProperties();
const element = TextEditor.viewForItem(item);
if (marker.isValid()) {
const row = marker.getHeadScreenPosition().row;
this.lineTopIndex.insertBlock(decoration, row, 0, position === 'after');
this.blockDecorationsToMeasure.add(decoration);
this.blockDecorationsByElement.set(element, decoration);
this.blockDecorationResizeObserver.observe(element);
this.scheduleUpdate();
}
if (subscribeToChanges) {
let wasValid = marker.isValid();
const didUpdateDisposable = marker.bufferMarker.onDidChange(
({ textChanged }) => {
const isValid = marker.isValid();
if (wasValid && !isValid) {
wasValid = false;
this.blockDecorationsToMeasure.delete(decoration);
this.heightsByBlockDecoration.delete(decoration);
this.blockDecorationsByElement.delete(element);
this.blockDecorationResizeObserver.unobserve(element);
this.lineTopIndex.removeBlock(decoration);
this.scheduleUpdate();
} else if (!wasValid && isValid) {
wasValid = true;
this.addBlockDecoration(decoration, false);
} else if (isValid && !textChanged) {
this.lineTopIndex.moveBlock(
decoration,
marker.getHeadScreenPosition().row
);
this.scheduleUpdate();
}
}
);
const didDestroyDisposable = decoration.onDidDestroy(() => {
didUpdateDisposable.dispose();
didDestroyDisposable.dispose();
if (wasValid) {
wasValid = false;
this.blockDecorationsToMeasure.delete(decoration);
this.heightsByBlockDecoration.delete(decoration);
this.blockDecorationsByElement.delete(element);
this.blockDecorationResizeObserver.unobserve(element);
this.lineTopIndex.removeBlock(decoration);
this.scheduleUpdate();
}
});
}
}
didResizeBlockDecorations(entries) {
if (!this.visible) return;
for (let i = 0; i < entries.length; i++) {
const { target, contentRect } = entries[i];
const decoration = this.blockDecorationsByElement.get(target);
const previousHeight = this.heightsByBlockDecoration.get(decoration);
if (
this.element.contains(target) &&
contentRect.height !== previousHeight
) {
this.invalidateBlockDecorationDimensions(decoration);
}
}
}
invalidateBlockDecorationDimensions(decoration) {
this.blockDecorationsToMeasure.add(decoration);
this.scheduleUpdate();
}
spliceLineTopIndex(startRow, oldExtent, newExtent) {
const invalidatedBlockDecorations = this.lineTopIndex.splice(
startRow,
oldExtent,
newExtent
);
invalidatedBlockDecorations.forEach(decoration => {
const newPosition = decoration.getMarker().getHeadScreenPosition();
this.lineTopIndex.moveBlock(decoration, newPosition.row);
});
}
isVisible() {
return this.element.offsetWidth > 0 || this.element.offsetHeight > 0;
}
getWindowInnerHeight() {
return window.innerHeight;
}
getWindowInnerWidth() {
return window.innerWidth;
}
getLineHeight() {
return this.measurements.lineHeight;
}
getBaseCharacterWidth() {
return this.measurements.baseCharacterWidth;
}
getLongestLineWidth() {
return this.measurements.longestLineWidth;
}
getClientContainerHeight() {
return this.measurements.clientContainerHeight;
}
getClientContainerWidth() {
return this.measurements.clientContainerWidth;
}
getScrollContainerWidth() {
if (this.props.model.getAutoWidth()) {
return this.getScrollWidth();
} else {
return this.getClientContainerWidth() - this.getGutterContainerWidth();
}
}
getScrollContainerHeight() {
if (this.props.model.getAutoHeight()) {
return this.getScrollHeight() + this.getHorizontalScrollbarHeight();
} else {
return this.getClientContainerHeight();
}
}
getScrollContainerClientWidth() {
return this.getScrollContainerWidth() - this.getVerticalScrollbarWidth();
}
getScrollContainerClientHeight() {
return (
this.getScrollContainerHeight() - this.getHorizontalScrollbarHeight()
);
}
canScrollVertically() {
const { model } = this.props;
if (model.isMini()) return false;
if (model.getAutoHeight()) return false;
return this.getContentHeight() > this.getScrollContainerClientHeight();
}
canScrollHorizontally() {
const { model } = this.props;
if (model.isMini()) return false;
if (model.getAutoWidth()) return false;
if (model.isSoftWrapped()) return false;
return this.getContentWidth() > this.getScrollContainerClientWidth();
}
getScrollHeight() {
if (this.props.model.getScrollPastEnd()) {
return (
this.getContentHeight() +
Math.max(
3 * this.getLineHeight(),
this.getScrollContainerClientHeight() - 3 * this.getLineHeight()
)
);
} else if (this.props.model.getAutoHeight()) {
return this.getContentHeight();
} else {
return Math.max(
this.getContentHeight(),
this.getScrollContainerClientHeight()
);
}
}
getScrollWidth() {
const { model } = this.props;
if (model.isSoftWrapped()) {
return this.getScrollContainerClientWidth();
} else if (model.getAutoWidth()) {
return this.getContentWidth();
} else {
return Math.max(
this.getContentWidth(),
this.getScrollContainerClientWidth()
);
}
}
getContentHeight() {
return this.pixelPositionAfterBlocksForRow(
this.props.model.getApproximateScreenLineCount()
);
}
getContentWidth() {
return Math.ceil(this.getLongestLineWidth() + this.getBaseCharacterWidth());
}
getScrollContainerClientWidthInBaseCharacters() {
return Math.floor(
this.getScrollContainerClientWidth() / this.getBaseCharacterWidth()
);
}
getGutterContainerWidth() {
return this.measurements.gutterContainerWidth;
}
getLineNumberGutterWidth() {
return this.measurements.lineNumberGutterWidth;
}
getVerticalScrollbarWidth() {
return this.measurements.verticalScrollbarWidth;
}
getHorizontalScrollbarHeight() {
return this.measurements.horizontalScrollbarHeight;
}
getRowsPerTile() {
return this.props.rowsPerTile || DEFAULT_ROWS_PER_TILE;
}
tileStartRowForRow(row) {
return row - (row % this.getRowsPerTile());
}
getRenderedStartRow() {
if (this.derivedDimensionsCache.renderedStartRow == null) {
this.derivedDimensionsCache.renderedStartRow = this.tileStartRowForRow(
this.getFirstVisibleRow()
);
}
return this.derivedDimensionsCache.renderedStartRow;
}
getRenderedEndRow() {
if (this.derivedDimensionsCache.renderedEndRow == null) {
this.derivedDimensionsCache.renderedEndRow = Math.min(
this.props.model.getApproximateScreenLineCount(),
this.getRenderedStartRow() +
this.getVisibleTileCount() * this.getRowsPerTile()
);
}
return this.derivedDimensionsCache.renderedEndRow;
}
getRenderedRowCount() {
if (this.derivedDimensionsCache.renderedRowCount == null) {
this.derivedDimensionsCache.renderedRowCount = Math.max(
0,
this.getRenderedEndRow() - this.getRenderedStartRow()
);
}
return this.derivedDimensionsCache.renderedRowCount;
}
getRenderedTileCount() {
if (this.derivedDimensionsCache.renderedTileCount == null) {
this.derivedDimensionsCache.renderedTileCount = Math.ceil(
this.getRenderedRowCount() / this.getRowsPerTile()
);
}
return this.derivedDimensionsCache.renderedTileCount;
}
getFirstVisibleRow() {
if (this.derivedDimensionsCache.firstVisibleRow == null) {
this.derivedDimensionsCache.firstVisibleRow = this.rowForPixelPosition(
this.getScrollTop()
);
}
return this.derivedDimensionsCache.firstVisibleRow;
}
getLastVisibleRow() {
if (this.derivedDimensionsCache.lastVisibleRow == null) {
this.derivedDimensionsCache.lastVisibleRow = Math.min(
this.props.model.getApproximateScreenLineCount() - 1,
this.rowForPixelPosition(this.getScrollBottom())
);
}
return this.derivedDimensionsCache.lastVisibleRow;
}
// We may render more tiles than needed if some contain block decorations,
// but keeping this calculation simple ensures the number of tiles remains
// fixed for a given editor height, which eliminates situations where a
// tile is repeatedly added and removed during scrolling in certain
// combinations of editor height and line height.
getVisibleTileCount() {
if (this.derivedDimensionsCache.visibleTileCount == null) {
const editorHeightInTiles =
this.getScrollContainerHeight() /
this.getLineHeight() /
this.getRowsPerTile();
this.derivedDimensionsCache.visibleTileCount =
Math.ceil(editorHeightInTiles) + 1;
}
return this.derivedDimensionsCache.visibleTileCount;
}
getFirstVisibleColumn() {
return Math.floor(this.getScrollLeft() / this.getBaseCharacterWidth());
}
getScrollTop() {
this.scrollTop = Math.min(this.getMaxScrollTop(), this.scrollTop);
return this.scrollTop;
}
setScrollTop(scrollTop) {
if (Number.isNaN(scrollTop) || scrollTop == null) return false;
scrollTop = roundToPhysicalPixelBoundary(
Math.max(0, Math.min(this.getMaxScrollTop(), scrollTop))
);
if (scrollTop !== this.scrollTop) {
this.derivedDimensionsCache = {};
this.scrollTopPending = true;
this.scrollTop = scrollTop;
this.element.emitter.emit('did-change-scroll-top', scrollTop);
return true;
} else {
return false;
}
}
getMaxScrollTop() {
return Math.round(
Math.max(
0,
this.getScrollHeight() - this.getScrollContainerClientHeight()
)
);
}
getScrollBottom() {
return this.getScrollTop() + this.getScrollContainerClientHeight();
}
setScrollBottom(scrollBottom) {
return this.setScrollTop(
scrollBottom - this.getScrollContainerClientHeight()
);
}
getScrollLeft() {
return this.scrollLeft;
}
setScrollLeft(scrollLeft) {
if (Number.isNaN(scrollLeft) || scrollLeft == null) return false;
scrollLeft = roundToPhysicalPixelBoundary(
Math.max(0, Math.min(this.getMaxScrollLeft(), scrollLeft))
);
if (scrollLeft !== this.scrollLeft) {
this.scrollLeftPending = true;
this.scrollLeft = scrollLeft;
this.element.emitter.emit('did-change-scroll-left', scrollLeft);
return true;
} else {
return false;
}
}
getMaxScrollLeft() {
return Math.round(
Math.max(0, this.getScrollWidth() - this.getScrollContainerClientWidth())
);
}
getScrollRight() {
return this.getScrollLeft() + this.getScrollContainerClientWidth();
}
setScrollRight(scrollRight) {
return this.setScrollLeft(
scrollRight - this.getScrollContainerClientWidth()
);
}
setScrollTopRow(scrollTopRow, scheduleUpdate = true) {
if (this.hasInitialMeasurements) {
const didScroll = this.setScrollTop(
this.pixelPositionBeforeBlocksForRow(scrollTopRow)
);
if (didScroll && scheduleUpdate) {
this.scheduleUpdate();
}
return didScroll;
} else {
this.pendingScrollTopRow = scrollTopRow;
return false;
}
}
getScrollTopRow() {
if (this.hasInitialMeasurements) {
return this.rowForPixelPosition(this.getScrollTop());
} else {
return this.pendingScrollTopRow || 0;
}
}
setScrollLeftColumn(scrollLeftColumn, scheduleUpdate = true) {
if (this.hasInitialMeasurements && this.getLongestLineWidth() != null) {
const didScroll = this.setScrollLeft(
scrollLeftColumn * this.getBaseCharacterWidth()
);
if (didScroll && scheduleUpdate) {
this.scheduleUpdate();
}
return didScroll;
} else {
this.pendingScrollLeftColumn = scrollLeftColumn;
return false;
}
}
getScrollLeftColumn() {
if (this.hasInitialMeasurements && this.getLongestLineWidth() != null) {
return Math.round(this.getScrollLeft() / this.getBaseCharacterWidth());
} else {
return this.pendingScrollLeftColumn || 0;
}
}
// Ensure the spatial index is populated with rows that are currently visible
populateVisibleRowRange(renderedStartRow) {
const { model } = this.props;
const previousScreenLineCount = model.getApproximateScreenLineCount();
const renderedEndRow =
renderedStartRow + this.getVisibleTileCount() * this.getRowsPerTile();
this.props.model.displayLayer.populateSpatialIndexIfNeeded(
Infinity,
renderedEndRow
);
// If the approximate screen line count changes, previously-cached derived
// dimensions could now be out of date.
if (model.getApproximateScreenLineCount() !== previousScreenLineCount) {
this.derivedDimensionsCache = {};
}
}
populateVisibleTiles() {
const startRow = this.getRenderedStartRow();
const endRow = this.getRenderedEndRow();
const freeTileIds = [];
for (let i = 0; i < this.renderedTileStartRows.length; i++) {
const tileStartRow = this.renderedTileStartRows[i];
if (tileStartRow < startRow || tileStartRow >= endRow) {
const tileId = this.idsByTileStartRow.get(tileStartRow);
freeTileIds.push(tileId);
this.idsByTileStartRow.delete(tileStartRow);
}
}
const rowsPerTile = this.getRowsPerTile();
this.renderedTileStartRows.length = this.getRenderedTileCount();
for (
let tileStartRow = startRow, i = 0;
tileStartRow < endRow;
tileStartRow = tileStartRow + rowsPerTile, i++
) {
this.renderedTileStartRows[i] = tileStartRow;
if (!this.idsByTileStartRow.has(tileStartRow)) {
if (freeTileIds.length > 0) {
this.idsByTileStartRow.set(tileStartRow, freeTileIds.shift());
} else {
this.idsByTileStartRow.set(tileStartRow, this.nextTileId++);
}
}
}
this.renderedTileStartRows.sort(
(a, b) => this.idsByTileStartRow.get(a) - this.idsByTileStartRow.get(b)
);
}
getNextUpdatePromise() {
if (!this.nextUpdatePromise) {
this.nextUpdatePromise = new Promise(resolve => {
this.resolveNextUpdatePromise = () => {
this.nextUpdatePromise = null;
this.resolveNextUpdatePromise = null;
resolve();
};
});
}
return this.nextUpdatePromise;
}
setInputEnabled(inputEnabled) {
this.props.model.update({ keyboardInputEnabled: inputEnabled });
}
isInputEnabled() {
return (
!this.props.model.isReadOnly() &&
this.props.model.isKeyboardInputEnabled()
);
}
getHiddenInput() {
return this.refs.cursorsAndInput.refs.hiddenInput;
}
getPlatform() {
return this.props.platform || process.platform;
}
getChromeVersion() {
return this.props.chromeVersion || parseInt(process.versions.chrome);
}
};
class DummyScrollbarComponent {
constructor(props) {
this.props = props;
etch.initialize(this);
}
update(newProps) {
const oldProps = this.props;
this.props = newProps;
etch.updateSync(this);
const shouldFlushScrollPosition =
newProps.scrollTop !== oldProps.scrollTop ||
newProps.scrollLeft !== oldProps.scrollLeft;
if (shouldFlushScrollPosition) this.flushScrollPosition();
}
flushScrollPosition() {
if (this.props.orientation === 'horizontal') {
this.element.scrollLeft = this.props.scrollLeft;
} else {
this.element.scrollTop = this.props.scrollTop;
}
}
render() {
const {
orientation,
scrollWidth,
scrollHeight,
verticalScrollbarWidth,
horizontalScrollbarHeight,
canScroll,
forceScrollbarVisible,
didScroll
} = this.props;
const outerStyle = {
position: 'absolute',
contain: 'content',
zIndex: 1,
willChange: 'transform'
};
if (!canScroll) outerStyle.visibility = 'hidden';
const innerStyle = {};
if (orientation === 'horizontal') {
let right = verticalScrollbarWidth || 0;
outerStyle.bottom = 0;
outerStyle.left = 0;
outerStyle.right = right + 'px';
outerStyle.height = '15px';
outerStyle.overflowY = 'hidden';
outerStyle.overflowX = forceScrollbarVisible ? 'scroll' : 'auto';
outerStyle.cursor = 'default';
innerStyle.height = '15px';
innerStyle.width = (scrollWidth || 0) + 'px';
} else {
let bottom = horizontalScrollbarHeight || 0;
outerStyle.right = 0;
outerStyle.top = 0;
outerStyle.bottom = bottom + 'px';
outerStyle.width = '15px';
outerStyle.overflowX = 'hidden';
outerStyle.overflowY = forceScrollbarVisible ? 'scroll' : 'auto';
outerStyle.cursor = 'default';
innerStyle.width = '15px';
innerStyle.height = (scrollHeight || 0) + 'px';
}
return $.div(
{
className: `${orientation}-scrollbar`,
style: outerStyle,
on: {
scroll: didScroll,
mousedown: this.didMouseDown
}
},
$.div({ style: innerStyle })
);
}
didMouseDown(event) {
let { bottom, right } = this.element.getBoundingClientRect();
const clickedOnScrollbar =
this.props.orientation === 'horizontal'
? event.clientY >= bottom - this.getRealScrollbarHeight()
: event.clientX >= right - this.getRealScrollbarWidth();
if (!clickedOnScrollbar) this.props.didMouseDown(event);
}
getRealScrollbarWidth() {
return this.element.offsetWidth - this.element.clientWidth;
}
getRealScrollbarHeight() {
return this.element.offsetHeight - this.element.clientHeight;
}
}
class GutterContainerComponent {
constructor(props) {
this.props = props;
etch.initialize(this);
}
update(props) {
if (this.shouldUpdate(props)) {
this.props = props;
etch.updateSync(this);
}
}
shouldUpdate(props) {
return (
!props.measuredContent ||
props.lineNumberGutterWidth !== this.props.lineNumberGutterWidth
);
}
render() {
const {
hasInitialMeasurements,
scrollTop,
scrollHeight,
guttersToRender,
decorationsToRender
} = this.props;
const innerStyle = {
willChange: 'transform',
display: 'flex'
};
if (hasInitialMeasurements) {
innerStyle.transform = `translateY(${-roundToPhysicalPixelBoundary(
scrollTop
)}px)`;
}
return $.div(
{
ref: 'gutterContainer',
key: 'gutterContainer',
className: 'gutter-container',
style: {
position: 'relative',
zIndex: 1,
backgroundColor: 'inherit'
}
},
$.div(
{ style: innerStyle },
guttersToRender.map(gutter => {
if (gutter.type === 'line-number') {
return this.renderLineNumberGutter(gutter);
} else {
return $(CustomGutterComponent, {
key: gutter,
element: gutter.getElement(),
name: gutter.name,
visible: gutter.isVisible(),
height: scrollHeight,
decorations: decorationsToRender.customGutter.get(gutter.name)
});
}
})
)
);
}
renderLineNumberGutter(gutter) {
const {
rootComponent,
showLineNumbers,
hasInitialMeasurements,
lineNumbersToRender,
renderedStartRow,
renderedEndRow,
rowsPerTile,
decorationsToRender,
didMeasureVisibleBlockDecoration,
scrollHeight,
lineNumberGutterWidth,
lineHeight
} = this.props;
if (!gutter.isVisible()) {
return null;
}
const oneTrueLineNumberGutter = gutter.name === 'line-number';
const ref = oneTrueLineNumberGutter ? 'lineNumberGutter' : undefined;
const width = oneTrueLineNumberGutter ? lineNumberGutterWidth : undefined;
if (hasInitialMeasurements) {
const {
maxDigits,
keys,
bufferRows,
screenRows,
softWrappedFlags,
foldableFlags
} = lineNumbersToRender;
return $(LineNumberGutterComponent, {
ref,
element: gutter.getElement(),
name: gutter.name,
className: gutter.className,
labelFn: gutter.labelFn,
onMouseDown: gutter.onMouseDown,
onMouseMove: gutter.onMouseMove,
rootComponent: rootComponent,
startRow: renderedStartRow,
endRow: renderedEndRow,
rowsPerTile: rowsPerTile,
maxDigits: maxDigits,
keys: keys,
bufferRows: bufferRows,
screenRows: screenRows,
softWrappedFlags: softWrappedFlags,
foldableFlags: foldableFlags,
decorations: decorationsToRender.lineNumbers.get(gutter.name) || [],
blockDecorations: decorationsToRender.blocks,
didMeasureVisibleBlockDecoration: didMeasureVisibleBlockDecoration,
height: scrollHeight,
width,
lineHeight: lineHeight,
showLineNumbers
});
} else {
return $(LineNumberGutterComponent, {
ref,
element: gutter.getElement(),
name: gutter.name,
className: gutter.className,
onMouseDown: gutter.onMouseDown,
onMouseMove: gutter.onMouseMove,
maxDigits: lineNumbersToRender.maxDigits,
showLineNumbers
});
}
}
}
class LineNumberGutterComponent {
constructor(props) {
this.props = props;
this.element = this.props.element;
this.virtualNode = $.div(null);
this.virtualNode.domNode = this.element;
this.nodePool = new NodePool();
etch.updateSync(this);
}
update(newProps) {
if (this.shouldUpdate(newProps)) {
this.props = newProps;
etch.updateSync(this);
}
}
render() {
const {
rootComponent,
showLineNumbers,
height,
width,
startRow,
endRow,
rowsPerTile,
maxDigits,
keys,
bufferRows,
screenRows,
softWrappedFlags,
foldableFlags,
decorations,
className
} = this.props;
let children = null;
if (bufferRows) {
children = new Array(rootComponent.renderedTileStartRows.length);
for (let i = 0; i < rootComponent.renderedTileStartRows.length; i++) {
const tileStartRow = rootComponent.renderedTileStartRows[i];
const tileEndRow = Math.min(endRow, tileStartRow + rowsPerTile);
const tileChildren = new Array(tileEndRow - tileStartRow);
for (let row = tileStartRow; row < tileEndRow; row++) {
const indexInTile = row - tileStartRow;
const j = row - startRow;
const key = keys[j];
const softWrapped = softWrappedFlags[j];
const foldable = foldableFlags[j];
const bufferRow = bufferRows[j];
const screenRow = screenRows[j];
let className = 'line-number';
if (foldable) className = className + ' foldable';
const decorationsForRow = decorations[row - startRow];
if (decorationsForRow)
className = className + ' ' + decorationsForRow;
let number = null;
if (showLineNumbers) {
if (this.props.labelFn == null) {
number = softWrapped ? '•' : bufferRow + 1;
number =
NBSP_CHARACTER.repeat(maxDigits - number.length) + number;
} else {
number = this.props.labelFn({
bufferRow,
screenRow,
foldable,
softWrapped,
maxDigits
});
}
}
// We need to adjust the line number position to account for block
// decorations preceding the current row and following the preceding
// row. Note that we ignore the latter when the line number starts at
// the beginning of the tile, because the tile will already be
// positioned to take into account block decorations added after the
// last row of the previous tile.
let marginTop = rootComponent.heightForBlockDecorationsBeforeRow(row);
if (indexInTile > 0)
marginTop += rootComponent.heightForBlockDecorationsAfterRow(
row - 1
);
tileChildren[row - tileStartRow] = $(LineNumberComponent, {
key,
className,
width,
bufferRow,
screenRow,
number,
marginTop,
nodePool: this.nodePool
});
}
const tileTop = rootComponent.pixelPositionBeforeBlocksForRow(
tileStartRow
);
const tileBottom = rootComponent.pixelPositionBeforeBlocksForRow(
tileEndRow
);
const tileHeight = tileBottom - tileTop;
const tileWidth = width != null && width > 0 ? width + 'px' : '';
children[i] = $.div(
{
key: rootComponent.idsByTileStartRow.get(tileStartRow),
style: {
contain: 'layout style',
position: 'absolute',
top: 0,
height: tileHeight + 'px',
width: tileWidth,
transform: `translateY(${tileTop}px)`
}
},
...tileChildren
);
}
}
let rootClassName = 'gutter line-numbers';
if (className) {
rootClassName += ' ' + className;
}
return $.div(
{
className: rootClassName,
attributes: { 'gutter-name': this.props.name },
style: {
position: 'relative',
height: ceilToPhysicalPixelBoundary(height) + 'px'
},
on: {
mousedown: this.didMouseDown,
mousemove: this.didMouseMove
}
},
$.div(
{
key: 'placeholder',
className: 'line-number dummy',
style: { visibility: 'hidden' }
},
showLineNumbers ? '0'.repeat(maxDigits) : null,
$.div({ className: 'icon-right' })
),
children
);
}
shouldUpdate(newProps) {
const oldProps = this.props;
if (oldProps.showLineNumbers !== newProps.showLineNumbers) return true;
if (oldProps.height !== newProps.height) return true;
if (oldProps.width !== newProps.width) return true;
if (oldProps.lineHeight !== newProps.lineHeight) return true;
if (oldProps.startRow !== newProps.startRow) return true;
if (oldProps.endRow !== newProps.endRow) return true;
if (oldProps.rowsPerTile !== newProps.rowsPerTile) return true;
if (oldProps.maxDigits !== newProps.maxDigits) return true;
if (oldProps.labelFn !== newProps.labelFn) return true;
if (oldProps.className !== newProps.className) return true;
if (newProps.didMeasureVisibleBlockDecoration) return true;
if (!arraysEqual(oldProps.keys, newProps.keys)) return true;
if (!arraysEqual(oldProps.bufferRows, newProps.bufferRows)) return true;
if (!arraysEqual(oldProps.foldableFlags, newProps.foldableFlags))
return true;
if (!arraysEqual(oldProps.decorations, newProps.decorations)) return true;
let oldTileStartRow = oldProps.startRow;
let newTileStartRow = newProps.startRow;
while (
oldTileStartRow < oldProps.endRow ||
newTileStartRow < newProps.endRow
) {
let oldTileBlockDecorations = oldProps.blockDecorations.get(
oldTileStartRow
);
let newTileBlockDecorations = newProps.blockDecorations.get(
newTileStartRow
);
if (oldTileBlockDecorations && newTileBlockDecorations) {
if (oldTileBlockDecorations.size !== newTileBlockDecorations.size)
return true;
let blockDecorationsChanged = false;
oldTileBlockDecorations.forEach((oldDecorations, screenLineId) => {
if (!blockDecorationsChanged) {
const newDecorations = newTileBlockDecorations.get(screenLineId);
blockDecorationsChanged =
newDecorations == null ||
!arraysEqual(oldDecorations, newDecorations);
}
});
if (blockDecorationsChanged) return true;
newTileBlockDecorations.forEach((newDecorations, screenLineId) => {
if (!blockDecorationsChanged) {
const oldDecorations = oldTileBlockDecorations.get(screenLineId);
blockDecorationsChanged = oldDecorations == null;
}
});
if (blockDecorationsChanged) return true;
} else if (oldTileBlockDecorations) {
return true;
} else if (newTileBlockDecorations) {
return true;
}
oldTileStartRow += oldProps.rowsPerTile;
newTileStartRow += newProps.rowsPerTile;
}
return false;
}
didMouseDown(event) {
if (this.props.onMouseDown == null) {
this.props.rootComponent.didMouseDownOnLineNumberGutter(event);
} else {
const { bufferRow, screenRow } = event.target.dataset;
this.props.onMouseDown({
bufferRow: parseInt(bufferRow, 10),
screenRow: parseInt(screenRow, 10),
domEvent: event
});
}
}
didMouseMove(event) {
if (this.props.onMouseMove != null) {
const { bufferRow, screenRow } = event.target.dataset;
this.props.onMouseMove({
bufferRow: parseInt(bufferRow, 10),
screenRow: parseInt(screenRow, 10),
domEvent: event
});
}
}
}
class LineNumberComponent {
constructor(props) {
const {
className,
width,
marginTop,
bufferRow,
screenRow,
number,
nodePool
} = props;
this.props = props;
const style = {};
if (width != null && width > 0) style.width = width + 'px';
if (marginTop != null && marginTop > 0) style.marginTop = marginTop + 'px';
this.element = nodePool.getElement('DIV', className, style);
this.element.dataset.bufferRow = bufferRow;
this.element.dataset.screenRow = screenRow;
if (number) this.element.appendChild(nodePool.getTextNode(number));
this.element.appendChild(nodePool.getElement('DIV', 'icon-right', null));
}
destroy() {
this.element.remove();
this.props.nodePool.release(this.element);
}
update(props) {
const {
nodePool,
className,
width,
marginTop,
bufferRow,
screenRow,
number
} = props;
if (this.props.bufferRow !== bufferRow)
this.element.dataset.bufferRow = bufferRow;
if (this.props.screenRow !== screenRow)
this.element.dataset.screenRow = screenRow;
if (this.props.className !== className) this.element.className = className;
if (this.props.width !== width) {
if (width != null && width > 0) {
this.element.style.width = width + 'px';
} else {
this.element.style.width = '';
}
}
if (this.props.marginTop !== marginTop) {
if (marginTop != null && marginTop > 0) {
this.element.style.marginTop = marginTop + 'px';
} else {
this.element.style.marginTop = '';
}
}
if (this.props.number !== number) {
if (this.props.number != null) {
const numberNode = this.element.firstChild;
numberNode.remove();
nodePool.release(numberNode);
}
if (number != null) {
this.element.insertBefore(
nodePool.getTextNode(number),
this.element.firstChild
);
}
}
this.props = props;
}
}
class CustomGutterComponent {
constructor(props) {
this.props = props;
this.element = this.props.element;
this.virtualNode = $.div(null);
this.virtualNode.domNode = this.element;
etch.updateSync(this);
}
update(props) {
this.props = props;
etch.updateSync(this);
}
destroy() {
etch.destroy(this);
}
render() {
let className = 'gutter';
if (this.props.className) {
className += ' ' + this.props.className;
}
return $.div(
{
className,
attributes: { 'gutter-name': this.props.name },
style: {
display: this.props.visible ? '' : 'none'
}
},
$.div(
{
className: 'custom-decorations',
style: { height: this.props.height + 'px' }
},
this.renderDecorations()
)
);
}
renderDecorations() {
if (!this.props.decorations) return null;
return this.props.decorations.map(({ className, element, top, height }) => {
return $(CustomGutterDecorationComponent, {
className,
element,
top,
height
});
});
}
}
class CustomGutterDecorationComponent {
constructor(props) {
this.props = props;
this.element = document.createElement('div');
const { top, height, className, element } = this.props;
this.element.style.position = 'absolute';
this.element.style.top = top + 'px';
this.element.style.height = height + 'px';
if (className != null) this.element.className = className;
if (element != null) {
this.element.appendChild(element);
element.style.height = height + 'px';
}
}
update(newProps) {
const oldProps = this.props;
this.props = newProps;
if (newProps.top !== oldProps.top)
this.element.style.top = newProps.top + 'px';
if (newProps.height !== oldProps.height) {
this.element.style.height = newProps.height + 'px';
if (newProps.element)
newProps.element.style.height = newProps.height + 'px';
}
if (newProps.className !== oldProps.className)
this.element.className = newProps.className || '';
if (newProps.element !== oldProps.element) {
if (this.element.firstChild) this.element.firstChild.remove();
if (newProps.element != null) {
this.element.appendChild(newProps.element);
newProps.element.style.height = newProps.height + 'px';
}
}
}
}
class CursorsAndInputComponent {
constructor(props) {
this.props = props;
etch.initialize(this);
}
update(props) {
if (props.measuredContent) {
this.props = props;
etch.updateSync(this);
}
}
updateCursorBlinkSync(cursorsBlinkedOff) {
this.props.cursorsBlinkedOff = cursorsBlinkedOff;
const className = this.getCursorsClassName();
this.refs.cursors.className = className;
this.virtualNode.props.className = className;
}
render() {
const {
lineHeight,
decorationsToRender,
scrollHeight,
scrollWidth
} = this.props;
const className = this.getCursorsClassName();
const cursorHeight = lineHeight + 'px';
const children = [this.renderHiddenInput()];
for (let i = 0; i < decorationsToRender.cursors.length; i++) {
const {
pixelLeft,
pixelTop,
pixelWidth,
className: extraCursorClassName,
style: extraCursorStyle
} = decorationsToRender.cursors[i];
let cursorClassName = 'cursor';
if (extraCursorClassName) cursorClassName += ' ' + extraCursorClassName;
const cursorStyle = {
height: cursorHeight,
width: Math.min(pixelWidth, scrollWidth - pixelLeft) + 'px',
transform: `translate(${pixelLeft}px, ${pixelTop}px)`
};
if (extraCursorStyle) Object.assign(cursorStyle, extraCursorStyle);
children.push(
$.div({
className: cursorClassName,
style: cursorStyle
})
);
}
return $.div(
{
key: 'cursors',
ref: 'cursors',
className,
style: {
position: 'absolute',
contain: 'strict',
zIndex: 1,
width: scrollWidth + 'px',
height: scrollHeight + 'px',
pointerEvents: 'none',
userSelect: 'none'
}
},
children
);
}
getCursorsClassName() {
return this.props.cursorsBlinkedOff ? 'cursors blink-off' : 'cursors';
}
renderHiddenInput() {
const {
lineHeight,
hiddenInputPosition,
didBlurHiddenInput,
didFocusHiddenInput,
didPaste,
didTextInput,
didKeydown,
didKeyup,
didKeypress,
didCompositionStart,
didCompositionUpdate,
didCompositionEnd,
tabIndex
} = this.props;
let top, left;
if (hiddenInputPosition) {
top = hiddenInputPosition.pixelTop;
left = hiddenInputPosition.pixelLeft;
} else {
top = 0;
left = 0;
}
return $.input({
ref: 'hiddenInput',
key: 'hiddenInput',
className: 'hidden-input',
on: {
blur: didBlurHiddenInput,
focus: didFocusHiddenInput,
paste: didPaste,
textInput: didTextInput,
keydown: didKeydown,
keyup: didKeyup,
keypress: didKeypress,
compositionstart: didCompositionStart,
compositionupdate: didCompositionUpdate,
compositionend: didCompositionEnd
},
tabIndex: tabIndex,
style: {
position: 'absolute',
width: '1px',
height: lineHeight + 'px',
top: top + 'px',
left: left + 'px',
opacity: 0,
padding: 0,
border: 0
}
});
}
}
class LinesTileComponent {
constructor(props) {
this.props = props;
etch.initialize(this);
this.createLines();
this.updateBlockDecorations({}, props);
}
update(newProps) {
if (this.shouldUpdate(newProps)) {
const oldProps = this.props;
this.props = newProps;
etch.updateSync(this);
if (!newProps.measuredContent) {
this.updateLines(oldProps, newProps);
this.updateBlockDecorations(oldProps, newProps);
}
}
}
destroy() {
for (let i = 0; i < this.lineComponents.length; i++) {
this.lineComponents[i].destroy();
}
this.lineComponents.length = 0;
return etch.destroy(this);
}
render() {
const { height, width, top } = this.props;
return $.div(
{
style: {
contain: 'layout style',
position: 'absolute',
height: height + 'px',
width: width + 'px',
transform: `translateY(${top}px)`
}
}
// Lines and block decorations will be manually inserted here for efficiency
);
}
createLines() {
const {
tileStartRow,
screenLines,
lineDecorations,
textDecorations,
nodePool,
displayLayer,
lineComponentsByScreenLineId
} = this.props;
this.lineComponents = [];
for (let i = 0, length = screenLines.length; i < length; i++) {
const component = new LineComponent({
screenLine: screenLines[i],
screenRow: tileStartRow + i,
lineDecoration: lineDecorations[i],
textDecorations: textDecorations[i],
displayLayer,
nodePool,
lineComponentsByScreenLineId
});
this.element.appendChild(component.element);
this.lineComponents.push(component);
}
}
updateLines(oldProps, newProps) {
const {
screenLines,
tileStartRow,
lineDecorations,
textDecorations,
nodePool,
displayLayer,
lineComponentsByScreenLineId
} = newProps;
const oldScreenLines = oldProps.screenLines;
const newScreenLines = screenLines;
const oldScreenLinesEndIndex = oldScreenLines.length;
const newScreenLinesEndIndex = newScreenLines.length;
let oldScreenLineIndex = 0;
let newScreenLineIndex = 0;
let lineComponentIndex = 0;
while (
oldScreenLineIndex < oldScreenLinesEndIndex ||
newScreenLineIndex < newScreenLinesEndIndex
) {
const oldScreenLine = oldScreenLines[oldScreenLineIndex];
const newScreenLine = newScreenLines[newScreenLineIndex];
if (oldScreenLineIndex >= oldScreenLinesEndIndex) {
var newScreenLineComponent = new LineComponent({
screenLine: newScreenLine,
screenRow: tileStartRow + newScreenLineIndex,
lineDecoration: lineDecorations[newScreenLineIndex],
textDecorations: textDecorations[newScreenLineIndex],
displayLayer,
nodePool,
lineComponentsByScreenLineId
});
this.element.appendChild(newScreenLineComponent.element);
this.lineComponents.push(newScreenLineComponent);
newScreenLineIndex++;
lineComponentIndex++;
} else if (newScreenLineIndex >= newScreenLinesEndIndex) {
this.lineComponents[lineComponentIndex].destroy();
this.lineComponents.splice(lineComponentIndex, 1);
oldScreenLineIndex++;
} else if (oldScreenLine === newScreenLine) {
const lineComponent = this.lineComponents[lineComponentIndex];
lineComponent.update({
screenRow: tileStartRow + newScreenLineIndex,
lineDecoration: lineDecorations[newScreenLineIndex],
textDecorations: textDecorations[newScreenLineIndex]
});
oldScreenLineIndex++;
newScreenLineIndex++;
lineComponentIndex++;
} else {
const oldScreenLineIndexInNewScreenLines = newScreenLines.indexOf(
oldScreenLine
);
const newScreenLineIndexInOldScreenLines = oldScreenLines.indexOf(
newScreenLine
);
if (
newScreenLineIndex < oldScreenLineIndexInNewScreenLines &&
oldScreenLineIndexInNewScreenLines < newScreenLinesEndIndex
) {
const newScreenLineComponents = [];
while (newScreenLineIndex < oldScreenLineIndexInNewScreenLines) {
// eslint-disable-next-line no-redeclare
var newScreenLineComponent = new LineComponent({
screenLine: newScreenLines[newScreenLineIndex],
screenRow: tileStartRow + newScreenLineIndex,
lineDecoration: lineDecorations[newScreenLineIndex],
textDecorations: textDecorations[newScreenLineIndex],
displayLayer,
nodePool,
lineComponentsByScreenLineId
});
this.element.insertBefore(
newScreenLineComponent.element,
this.getFirstElementForScreenLine(oldProps, oldScreenLine)
);
newScreenLineComponents.push(newScreenLineComponent);
newScreenLineIndex++;
}
this.lineComponents.splice(
lineComponentIndex,
0,
...newScreenLineComponents
);
lineComponentIndex =
lineComponentIndex + newScreenLineComponents.length;
} else if (
oldScreenLineIndex < newScreenLineIndexInOldScreenLines &&
newScreenLineIndexInOldScreenLines < oldScreenLinesEndIndex
) {
while (oldScreenLineIndex < newScreenLineIndexInOldScreenLines) {
this.lineComponents[lineComponentIndex].destroy();
this.lineComponents.splice(lineComponentIndex, 1);
oldScreenLineIndex++;
}
} else {
const oldScreenLineComponent = this.lineComponents[
lineComponentIndex
];
// eslint-disable-next-line no-redeclare
var newScreenLineComponent = new LineComponent({
screenLine: newScreenLines[newScreenLineIndex],
screenRow: tileStartRow + newScreenLineIndex,
lineDecoration: lineDecorations[newScreenLineIndex],
textDecorations: textDecorations[newScreenLineIndex],
displayLayer,
nodePool,
lineComponentsByScreenLineId
});
this.element.insertBefore(
newScreenLineComponent.element,
oldScreenLineComponent.element
);
oldScreenLineComponent.destroy();
this.lineComponents[lineComponentIndex] = newScreenLineComponent;
oldScreenLineIndex++;
newScreenLineIndex++;
lineComponentIndex++;
}
}
}
}
getFirstElementForScreenLine(oldProps, screenLine) {
const blockDecorations = oldProps.blockDecorations
? oldProps.blockDecorations.get(screenLine.id)
: null;
if (blockDecorations) {
const blockDecorationElementsBeforeOldScreenLine = [];
for (let i = 0; i < blockDecorations.length; i++) {
const decoration = blockDecorations[i];
if (decoration.position !== 'after') {
blockDecorationElementsBeforeOldScreenLine.push(
TextEditor.viewForItem(decoration.item)
);
}
}
for (
let i = 0;
i < blockDecorationElementsBeforeOldScreenLine.length;
i++
) {
const blockDecorationElement =
blockDecorationElementsBeforeOldScreenLine[i];
if (
!blockDecorationElementsBeforeOldScreenLine.includes(
blockDecorationElement.previousSibling
)
) {
return blockDecorationElement;
}
}
}
return oldProps.lineComponentsByScreenLineId.get(screenLine.id).element;
}
updateBlockDecorations(oldProps, newProps) {
const { blockDecorations, lineComponentsByScreenLineId } = newProps;
if (oldProps.blockDecorations) {
oldProps.blockDecorations.forEach((oldDecorations, screenLineId) => {
const newDecorations = newProps.blockDecorations
? newProps.blockDecorations.get(screenLineId)
: null;
for (let i = 0; i < oldDecorations.length; i++) {
const oldDecoration = oldDecorations[i];
if (newDecorations && newDecorations.includes(oldDecoration))
continue;
const element = TextEditor.viewForItem(oldDecoration.item);
if (element.parentElement !== this.element) continue;
element.remove();
}
});
}
if (blockDecorations) {
blockDecorations.forEach((newDecorations, screenLineId) => {
const oldDecorations = oldProps.blockDecorations
? oldProps.blockDecorations.get(screenLineId)
: null;
const lineNode = lineComponentsByScreenLineId.get(screenLineId).element;
let lastAfter = lineNode;
for (let i = 0; i < newDecorations.length; i++) {
const newDecoration = newDecorations[i];
const element = TextEditor.viewForItem(newDecoration.item);
if (oldDecorations && oldDecorations.includes(newDecoration)) {
if (newDecoration.position === 'after') {
lastAfter = element;
}
continue;
}
if (newDecoration.position === 'after') {
this.element.insertBefore(element, lastAfter.nextSibling);
lastAfter = element;
} else {
this.element.insertBefore(element, lineNode);
}
}
});
}
}
shouldUpdate(newProps) {
const oldProps = this.props;
if (oldProps.top !== newProps.top) return true;
if (oldProps.height !== newProps.height) return true;
if (oldProps.width !== newProps.width) return true;
if (oldProps.lineHeight !== newProps.lineHeight) return true;
if (oldProps.tileStartRow !== newProps.tileStartRow) return true;
if (oldProps.tileEndRow !== newProps.tileEndRow) return true;
if (!arraysEqual(oldProps.screenLines, newProps.screenLines)) return true;
if (!arraysEqual(oldProps.lineDecorations, newProps.lineDecorations))
return true;
if (oldProps.blockDecorations && newProps.blockDecorations) {
if (oldProps.blockDecorations.size !== newProps.blockDecorations.size)
return true;
let blockDecorationsChanged = false;
oldProps.blockDecorations.forEach((oldDecorations, screenLineId) => {
if (!blockDecorationsChanged) {
const newDecorations = newProps.blockDecorations.get(screenLineId);
blockDecorationsChanged =
newDecorations == null ||
!arraysEqual(oldDecorations, newDecorations);
}
});
if (blockDecorationsChanged) return true;
newProps.blockDecorations.forEach((newDecorations, screenLineId) => {
if (!blockDecorationsChanged) {
const oldDecorations = oldProps.blockDecorations.get(screenLineId);
blockDecorationsChanged = oldDecorations == null;
}
});
if (blockDecorationsChanged) return true;
} else if (oldProps.blockDecorations) {
return true;
} else if (newProps.blockDecorations) {
return true;
}
if (oldProps.textDecorations.length !== newProps.textDecorations.length)
return true;
for (let i = 0; i < oldProps.textDecorations.length; i++) {
if (
!textDecorationsEqual(
oldProps.textDecorations[i],
newProps.textDecorations[i]
)
)
return true;
}
return false;
}
}
class LineComponent {
constructor(props) {
const {
nodePool,
screenRow,
screenLine,
lineComponentsByScreenLineId,
offScreen
} = props;
this.props = props;
this.element = nodePool.getElement('DIV', this.buildClassName(), null);
this.element.dataset.screenRow = screenRow;
this.textNodes = [];
if (offScreen) {
this.element.style.position = 'absolute';
this.element.style.visibility = 'hidden';
this.element.dataset.offScreen = true;
}
this.appendContents();
lineComponentsByScreenLineId.set(screenLine.id, this);
}
update(newProps) {
if (this.props.lineDecoration !== newProps.lineDecoration) {
this.props.lineDecoration = newProps.lineDecoration;
this.element.className = this.buildClassName();
}
if (this.props.screenRow !== newProps.screenRow) {
this.props.screenRow = newProps.screenRow;
this.element.dataset.screenRow = newProps.screenRow;
}
if (
!textDecorationsEqual(
this.props.textDecorations,
newProps.textDecorations
)
) {
this.props.textDecorations = newProps.textDecorations;
this.element.firstChild.remove();
this.appendContents();
}
}
destroy() {
const { nodePool, lineComponentsByScreenLineId, screenLine } = this.props;
if (lineComponentsByScreenLineId.get(screenLine.id) === this) {
lineComponentsByScreenLineId.delete(screenLine.id);
}
this.element.remove();
nodePool.release(this.element);
}
appendContents() {
const { displayLayer, nodePool, screenLine, textDecorations } = this.props;
this.textNodes.length = 0;
const { lineText, tags } = screenLine;
let openScopeNode = nodePool.getElement('SPAN', null, null);
this.element.appendChild(openScopeNode);
let decorationIndex = 0;
let column = 0;
let activeClassName = null;
let activeStyle = null;
let nextDecoration = textDecorations
? textDecorations[decorationIndex]
: null;
if (nextDecoration && nextDecoration.column === 0) {
column = nextDecoration.column;
activeClassName = nextDecoration.className;
activeStyle = nextDecoration.style;
nextDecoration = textDecorations[++decorationIndex];
}
for (let i = 0; i < tags.length; i++) {
const tag = tags[i];
if (tag !== 0) {
if (displayLayer.isCloseTag(tag)) {
openScopeNode = openScopeNode.parentElement;
} else if (displayLayer.isOpenTag(tag)) {
const newScopeNode = nodePool.getElement(
'SPAN',
displayLayer.classNameForTag(tag),
null
);
openScopeNode.appendChild(newScopeNode);
openScopeNode = newScopeNode;
} else {
const nextTokenColumn = column + tag;
while (nextDecoration && nextDecoration.column <= nextTokenColumn) {
const text = lineText.substring(column, nextDecoration.column);
this.appendTextNode(
openScopeNode,
text,
activeClassName,
activeStyle
);
column = nextDecoration.column;
activeClassName = nextDecoration.className;
activeStyle = nextDecoration.style;
nextDecoration = textDecorations[++decorationIndex];
}
if (column < nextTokenColumn) {
const text = lineText.substring(column, nextTokenColumn);
this.appendTextNode(
openScopeNode,
text,
activeClassName,
activeStyle
);
column = nextTokenColumn;
}
}
}
}
if (column === 0) {
const textNode = nodePool.getTextNode(' ');
this.element.appendChild(textNode);
this.textNodes.push(textNode);
}
if (lineText.endsWith(displayLayer.foldCharacter)) {
// Insert a zero-width non-breaking whitespace, so that LinesYardstick can
// take the fold-marker::after pseudo-element into account during
// measurements when such marker is the last character on the line.
const textNode = nodePool.getTextNode(ZERO_WIDTH_NBSP_CHARACTER);
this.element.appendChild(textNode);
this.textNodes.push(textNode);
}
}
appendTextNode(openScopeNode, text, activeClassName, activeStyle) {
const { nodePool } = this.props;
if (activeClassName || activeStyle) {
const decorationNode = nodePool.getElement(
'SPAN',
activeClassName,
activeStyle
);
openScopeNode.appendChild(decorationNode);
openScopeNode = decorationNode;
}
const textNode = nodePool.getTextNode(text);
openScopeNode.appendChild(textNode);
this.textNodes.push(textNode);
}
buildClassName() {
const { lineDecoration } = this.props;
let className = 'line';
if (lineDecoration != null) className = className + ' ' + lineDecoration;
return className;
}
}
class HighlightsComponent {
constructor(props) {
this.props = {};
this.element = document.createElement('div');
this.element.className = 'highlights';
this.element.style.contain = 'strict';
this.element.style.position = 'absolute';
this.element.style.overflow = 'hidden';
this.element.style.userSelect = 'none';
this.highlightComponentsByKey = new Map();
this.update(props);
}
destroy() {
this.highlightComponentsByKey.forEach(highlightComponent => {
highlightComponent.destroy();
});
this.highlightComponentsByKey.clear();
}
update(newProps) {
if (this.shouldUpdate(newProps)) {
this.props = newProps;
const { height, width, lineHeight, highlightDecorations } = this.props;
this.element.style.height = height + 'px';
this.element.style.width = width + 'px';
const visibleHighlightDecorations = new Set();
if (highlightDecorations) {
for (let i = 0; i < highlightDecorations.length; i++) {
const highlightDecoration = highlightDecorations[i];
const highlightProps = Object.assign(
{ lineHeight },
highlightDecorations[i]
);
let highlightComponent = this.highlightComponentsByKey.get(
highlightDecoration.key
);
if (highlightComponent) {
highlightComponent.update(highlightProps);
} else {
highlightComponent = new HighlightComponent(highlightProps);
this.element.appendChild(highlightComponent.element);
this.highlightComponentsByKey.set(
highlightDecoration.key,
highlightComponent
);
}
highlightDecorations[i].flashRequested = false;
visibleHighlightDecorations.add(highlightDecoration.key);
}
}
this.highlightComponentsByKey.forEach((highlightComponent, key) => {
if (!visibleHighlightDecorations.has(key)) {
highlightComponent.destroy();
this.highlightComponentsByKey.delete(key);
}
});
}
}
shouldUpdate(newProps) {
const oldProps = this.props;
if (!newProps.hasInitialMeasurements) return false;
if (oldProps.width !== newProps.width) return true;
if (oldProps.height !== newProps.height) return true;
if (oldProps.lineHeight !== newProps.lineHeight) return true;
if (!oldProps.highlightDecorations && newProps.highlightDecorations)
return true;
if (oldProps.highlightDecorations && !newProps.highlightDecorations)
return true;
if (oldProps.highlightDecorations && newProps.highlightDecorations) {
if (
oldProps.highlightDecorations.length !==
newProps.highlightDecorations.length
)
return true;
for (
let i = 0, length = oldProps.highlightDecorations.length;
i < length;
i++
) {
const oldHighlight = oldProps.highlightDecorations[i];
const newHighlight = newProps.highlightDecorations[i];
if (oldHighlight.className !== newHighlight.className) return true;
if (newHighlight.flashRequested) return true;
if (oldHighlight.startPixelTop !== newHighlight.startPixelTop)
return true;
if (oldHighlight.startPixelLeft !== newHighlight.startPixelLeft)
return true;
if (oldHighlight.endPixelTop !== newHighlight.endPixelTop) return true;
if (oldHighlight.endPixelLeft !== newHighlight.endPixelLeft)
return true;
if (!oldHighlight.screenRange.isEqual(newHighlight.screenRange))
return true;
}
}
}
}
class HighlightComponent {
constructor(props) {
this.props = props;
etch.initialize(this);
if (this.props.flashRequested) this.performFlash();
}
destroy() {
if (this.timeoutsByClassName) {
this.timeoutsByClassName.forEach(timeout => {
window.clearTimeout(timeout);
});
this.timeoutsByClassName.clear();
}
return etch.destroy(this);
}
update(newProps) {
this.props = newProps;
etch.updateSync(this);
if (newProps.flashRequested) this.performFlash();
}
performFlash() {
const { flashClass, flashDuration } = this.props;
if (!this.timeoutsByClassName) this.timeoutsByClassName = new Map();
// If a flash of this class is already in progress, clear it early and
// flash again on the next frame to ensure CSS transitions apply to the
// second flash.
if (this.timeoutsByClassName.has(flashClass)) {
window.clearTimeout(this.timeoutsByClassName.get(flashClass));
this.timeoutsByClassName.delete(flashClass);
this.element.classList.remove(flashClass);
requestAnimationFrame(() => this.performFlash());
} else {
this.element.classList.add(flashClass);
this.timeoutsByClassName.set(
flashClass,
window.setTimeout(() => {
this.element.classList.remove(flashClass);
}, flashDuration)
);
}
}
render() {
const {
className,
screenRange,
lineHeight,
startPixelTop,
startPixelLeft,
endPixelTop,
endPixelLeft
} = this.props;
const regionClassName = 'region ' + className;
let children;
if (screenRange.start.row === screenRange.end.row) {
children = $.div({
className: regionClassName,
style: {
position: 'absolute',
boxSizing: 'border-box',
top: startPixelTop + 'px',
left: startPixelLeft + 'px',
width: endPixelLeft - startPixelLeft + 'px',
height: lineHeight + 'px'
}
});
} else {
children = [];
children.push(
$.div({
className: regionClassName,
style: {
position: 'absolute',
boxSizing: 'border-box',
top: startPixelTop + 'px',
left: startPixelLeft + 'px',
right: 0,
height: lineHeight + 'px'
}
})
);
if (screenRange.end.row - screenRange.start.row > 1) {
children.push(
$.div({
className: regionClassName,
style: {
position: 'absolute',
boxSizing: 'border-box',
top: startPixelTop + lineHeight + 'px',
left: 0,
right: 0,
height: endPixelTop - startPixelTop - lineHeight * 2 + 'px'
}
})
);
}
if (endPixelLeft > 0) {
children.push(
$.div({
className: regionClassName,
style: {
position: 'absolute',
boxSizing: 'border-box',
top: endPixelTop - lineHeight + 'px',
left: 0,
width: endPixelLeft + 'px',
height: lineHeight + 'px'
}
})
);
}
}
return $.div({ className: 'highlight ' + className }, children);
}
}
class OverlayComponent {
constructor(props) {
this.props = props;
this.element = document.createElement('atom-overlay');
if (this.props.className != null)
this.element.classList.add(this.props.className);
this.element.appendChild(this.props.element);
this.element.style.position = 'fixed';
this.element.style.zIndex = 4;
this.element.style.top = (this.props.pixelTop || 0) + 'px';
this.element.style.left = (this.props.pixelLeft || 0) + 'px';
this.currentContentRect = null;
// Synchronous DOM updates in response to resize events might trigger a
// "loop limit exceeded" error. We disconnect the observer before
// potentially mutating the DOM, and then reconnect it on the next tick.
// Note: ResizeObserver calls its callback when .observe is called
this.resizeObserver = new ResizeObserver(entries => {
const { contentRect } = entries[0];
if (
this.currentContentRect &&
(this.currentContentRect.width !== contentRect.width ||
this.currentContentRect.height !== contentRect.height)
) {
this.resizeObserver.disconnect();
this.props.didResize(this);
process.nextTick(() => {
this.resizeObserver.observe(this.props.element);
});
}
this.currentContentRect = contentRect;
});
this.didAttach();
this.props.overlayComponents.add(this);
}
destroy() {
this.props.overlayComponents.delete(this);
this.didDetach();
}
getNextUpdatePromise() {
if (!this.nextUpdatePromise) {
this.nextUpdatePromise = new Promise(resolve => {
this.resolveNextUpdatePromise = () => {
this.nextUpdatePromise = null;
this.resolveNextUpdatePromise = null;
resolve();
};
});
}
return this.nextUpdatePromise;
}
update(newProps) {
const oldProps = this.props;
this.props = Object.assign({}, oldProps, newProps);
if (this.props.pixelTop != null)
this.element.style.top = this.props.pixelTop + 'px';
if (this.props.pixelLeft != null)
this.element.style.left = this.props.pixelLeft + 'px';
if (newProps.className !== oldProps.className) {
if (oldProps.className != null)
this.element.classList.remove(oldProps.className);
if (newProps.className != null)
this.element.classList.add(newProps.className);
}
if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();
}
didAttach() {
this.resizeObserver.observe(this.props.element);
}
didDetach() {
this.resizeObserver.disconnect();
}
}
let rangeForMeasurement;
function clientRectForRange(textNode, startIndex, endIndex) {
if (!rangeForMeasurement) rangeForMeasurement = document.createRange();
rangeForMeasurement.setStart(textNode, startIndex);
rangeForMeasurement.setEnd(textNode, endIndex);
return rangeForMeasurement.getBoundingClientRect();
}
function textDecorationsEqual(oldDecorations, newDecorations) {
if (!oldDecorations && newDecorations) return false;
if (oldDecorations && !newDecorations) return false;
if (oldDecorations && newDecorations) {
if (oldDecorations.length !== newDecorations.length) return false;
for (let j = 0; j < oldDecorations.length; j++) {
if (oldDecorations[j].column !== newDecorations[j].column) return false;
if (oldDecorations[j].className !== newDecorations[j].className)
return false;
if (!objectsEqual(oldDecorations[j].style, newDecorations[j].style))
return false;
}
}
return true;
}
function arraysEqual(a, b) {
if (a.length !== b.length) return false;
for (let i = 0, length = a.length; i < length; i++) {
if (a[i] !== b[i]) return false;
}
return true;
}
function objectsEqual(a, b) {
if (!a && b) return false;
if (a && !b) return false;
if (a && b) {
for (const key in a) {
if (a[key] !== b[key]) return false;
}
for (const key in b) {
if (a[key] !== b[key]) return false;
}
}
return true;
}
function constrainRangeToRows(range, startRow, endRow) {
if (range.start.row < startRow || range.end.row >= endRow) {
range = range.copy();
if (range.start.row < startRow) {
range.start.row = startRow;
range.start.column = 0;
}
if (range.end.row >= endRow) {
range.end.row = endRow;
range.end.column = 0;
}
}
return range;
}
function debounce(fn, wait) {
let timestamp, timeout;
function later() {
const last = Date.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
fn();
}
}
return function() {
timestamp = Date.now();
if (!timeout) timeout = setTimeout(later, wait);
};
}
class NodePool {
constructor() {
this.elementsByType = {};
this.textNodes = [];
}
getElement(type, className, style) {
let element;
const elementsByDepth = this.elementsByType[type];
if (elementsByDepth) {
while (elementsByDepth.length > 0) {
const elements = elementsByDepth[elementsByDepth.length - 1];
if (elements && elements.length > 0) {
element = elements.pop();
if (elements.length === 0) elementsByDepth.pop();
break;
} else {
elementsByDepth.pop();
}
}
}
if (element) {
element.className = className || '';
element.attributeStyleMap.forEach((value, key) => {
if (!style || style[key] == null) element.style[key] = '';
});
if (style) Object.assign(element.style, style);
for (const key in element.dataset) delete element.dataset[key];
while (element.firstChild) element.firstChild.remove();
return element;
} else {
const newElement = document.createElement(type);
if (className) newElement.className = className;
if (style) Object.assign(newElement.style, style);
return newElement;
}
}
getTextNode(text) {
if (this.textNodes.length > 0) {
const node = this.textNodes.pop();
node.textContent = text;
return node;
} else {
return document.createTextNode(text);
}
}
release(node, depth = 0) {
const { nodeName } = node;
if (nodeName === '#text') {
this.textNodes.push(node);
} else {
let elementsByDepth = this.elementsByType[nodeName];
if (!elementsByDepth) {
elementsByDepth = [];
this.elementsByType[nodeName] = elementsByDepth;
}
let elements = elementsByDepth[depth];
if (!elements) {
elements = [];
elementsByDepth[depth] = elements;
}
elements.push(node);
for (let i = 0; i < node.childNodes.length; i++) {
this.release(node.childNodes[i], depth + 1);
}
}
}
}
function roundToPhysicalPixelBoundary(virtualPixelPosition) {
const virtualPixelsPerPhysicalPixel = 1 / window.devicePixelRatio;
return (
Math.round(virtualPixelPosition / virtualPixelsPerPhysicalPixel) *
virtualPixelsPerPhysicalPixel
);
}
function ceilToPhysicalPixelBoundary(virtualPixelPosition) {
const virtualPixelsPerPhysicalPixel = 1 / window.devicePixelRatio;
return (
Math.ceil(virtualPixelPosition / virtualPixelsPerPhysicalPixel) *
virtualPixelsPerPhysicalPixel
);
}