viewImpl.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import * as dom from '../../../base/browser/dom.js';
  6. import * as browser from '../../../base/browser/browser.js';
  7. import { Selection } from '../../common/core/selection.js';
  8. import { createFastDomNode } from '../../../base/browser/fastDomNode.js';
  9. import { onUnexpectedError } from '../../../base/common/errors.js';
  10. import { PointerHandler } from '../controller/pointerHandler.js';
  11. import { TextAreaHandler } from '../controller/textAreaHandler.js';
  12. import { ViewController } from './viewController.js';
  13. import { ViewUserInputEvents } from './viewUserInputEvents.js';
  14. import { ContentViewOverlays, MarginViewOverlays } from './viewOverlays.js';
  15. import { PartFingerprints } from './viewPart.js';
  16. import { ViewContentWidgets } from '../viewParts/contentWidgets/contentWidgets.js';
  17. import { CurrentLineHighlightOverlay, CurrentLineMarginHighlightOverlay } from '../viewParts/currentLineHighlight/currentLineHighlight.js';
  18. import { DecorationsOverlay } from '../viewParts/decorations/decorations.js';
  19. import { EditorScrollbar } from '../viewParts/editorScrollbar/editorScrollbar.js';
  20. import { GlyphMarginOverlay } from '../viewParts/glyphMargin/glyphMargin.js';
  21. import { IndentGuidesOverlay } from '../viewParts/indentGuides/indentGuides.js';
  22. import { LineNumbersOverlay } from '../viewParts/lineNumbers/lineNumbers.js';
  23. import { ViewLines } from '../viewParts/lines/viewLines.js';
  24. import { LinesDecorationsOverlay } from '../viewParts/linesDecorations/linesDecorations.js';
  25. import { Margin } from '../viewParts/margin/margin.js';
  26. import { MarginViewLineDecorationsOverlay } from '../viewParts/marginDecorations/marginDecorations.js';
  27. import { Minimap } from '../viewParts/minimap/minimap.js';
  28. import { ViewOverlayWidgets } from '../viewParts/overlayWidgets/overlayWidgets.js';
  29. import { DecorationsOverviewRuler } from '../viewParts/overviewRuler/decorationsOverviewRuler.js';
  30. import { OverviewRuler } from '../viewParts/overviewRuler/overviewRuler.js';
  31. import { Rulers } from '../viewParts/rulers/rulers.js';
  32. import { ScrollDecorationViewPart } from '../viewParts/scrollDecoration/scrollDecoration.js';
  33. import { SelectionsOverlay } from '../viewParts/selections/selections.js';
  34. import { ViewCursors } from '../viewParts/viewCursors/viewCursors.js';
  35. import { ViewZones } from '../viewParts/viewZones/viewZones.js';
  36. import { Position } from '../../common/core/position.js';
  37. import { Range } from '../../common/core/range.js';
  38. import { RenderingContext } from '../../common/view/renderingContext.js';
  39. import { ViewContext } from '../../common/view/viewContext.js';
  40. import { ViewportData } from '../../common/viewLayout/viewLinesViewportData.js';
  41. import { ViewEventHandler } from '../../common/viewModel/viewEventHandler.js';
  42. import { getThemeTypeSelector } from '../../../platform/theme/common/themeService.js';
  43. import { PointerHandlerLastRenderData } from '../controller/mouseTarget.js';
  44. export class View extends ViewEventHandler {
  45. constructor(commandDelegate, configuration, themeService, model, userInputEvents, overflowWidgetsDomNode) {
  46. super();
  47. this._selections = [new Selection(1, 1, 1, 1)];
  48. this._renderAnimationFrame = null;
  49. const viewController = new ViewController(configuration, model, userInputEvents, commandDelegate);
  50. // The view context is passed on to most classes (basically to reduce param. counts in ctors)
  51. this._context = new ViewContext(configuration, themeService.getColorTheme(), model);
  52. this._configPixelRatio = this._context.configuration.options.get(128 /* pixelRatio */);
  53. // Ensure the view is the first event handler in order to update the layout
  54. this._context.addEventHandler(this);
  55. this._register(themeService.onDidColorThemeChange(theme => {
  56. this._context.theme.update(theme);
  57. this._context.model.onDidColorThemeChange();
  58. this.render(true, false);
  59. }));
  60. this._viewParts = [];
  61. // Keyboard handler
  62. this._textAreaHandler = new TextAreaHandler(this._context, viewController, this._createTextAreaHandlerHelper());
  63. this._viewParts.push(this._textAreaHandler);
  64. // These two dom nodes must be constructed up front, since references are needed in the layout provider (scrolling & co.)
  65. this._linesContent = createFastDomNode(document.createElement('div'));
  66. this._linesContent.setClassName('lines-content' + ' monaco-editor-background');
  67. this._linesContent.setPosition('absolute');
  68. this.domNode = createFastDomNode(document.createElement('div'));
  69. this.domNode.setClassName(this._getEditorClassName());
  70. // Set role 'code' for better screen reader support https://github.com/microsoft/vscode/issues/93438
  71. this.domNode.setAttribute('role', 'code');
  72. this._overflowGuardContainer = createFastDomNode(document.createElement('div'));
  73. PartFingerprints.write(this._overflowGuardContainer, 3 /* OverflowGuard */);
  74. this._overflowGuardContainer.setClassName('overflow-guard');
  75. this._scrollbar = new EditorScrollbar(this._context, this._linesContent, this.domNode, this._overflowGuardContainer);
  76. this._viewParts.push(this._scrollbar);
  77. // View Lines
  78. this._viewLines = new ViewLines(this._context, this._linesContent);
  79. // View Zones
  80. this._viewZones = new ViewZones(this._context);
  81. this._viewParts.push(this._viewZones);
  82. // Decorations overview ruler
  83. const decorationsOverviewRuler = new DecorationsOverviewRuler(this._context);
  84. this._viewParts.push(decorationsOverviewRuler);
  85. const scrollDecoration = new ScrollDecorationViewPart(this._context);
  86. this._viewParts.push(scrollDecoration);
  87. const contentViewOverlays = new ContentViewOverlays(this._context);
  88. this._viewParts.push(contentViewOverlays);
  89. contentViewOverlays.addDynamicOverlay(new CurrentLineHighlightOverlay(this._context));
  90. contentViewOverlays.addDynamicOverlay(new SelectionsOverlay(this._context));
  91. contentViewOverlays.addDynamicOverlay(new IndentGuidesOverlay(this._context));
  92. contentViewOverlays.addDynamicOverlay(new DecorationsOverlay(this._context));
  93. const marginViewOverlays = new MarginViewOverlays(this._context);
  94. this._viewParts.push(marginViewOverlays);
  95. marginViewOverlays.addDynamicOverlay(new CurrentLineMarginHighlightOverlay(this._context));
  96. marginViewOverlays.addDynamicOverlay(new GlyphMarginOverlay(this._context));
  97. marginViewOverlays.addDynamicOverlay(new MarginViewLineDecorationsOverlay(this._context));
  98. marginViewOverlays.addDynamicOverlay(new LinesDecorationsOverlay(this._context));
  99. marginViewOverlays.addDynamicOverlay(new LineNumbersOverlay(this._context));
  100. const margin = new Margin(this._context);
  101. margin.getDomNode().appendChild(this._viewZones.marginDomNode);
  102. margin.getDomNode().appendChild(marginViewOverlays.getDomNode());
  103. this._viewParts.push(margin);
  104. // Content widgets
  105. this._contentWidgets = new ViewContentWidgets(this._context, this.domNode);
  106. this._viewParts.push(this._contentWidgets);
  107. this._viewCursors = new ViewCursors(this._context);
  108. this._viewParts.push(this._viewCursors);
  109. // Overlay widgets
  110. this._overlayWidgets = new ViewOverlayWidgets(this._context);
  111. this._viewParts.push(this._overlayWidgets);
  112. const rulers = new Rulers(this._context);
  113. this._viewParts.push(rulers);
  114. const minimap = new Minimap(this._context);
  115. this._viewParts.push(minimap);
  116. // -------------- Wire dom nodes up
  117. if (decorationsOverviewRuler) {
  118. const overviewRulerData = this._scrollbar.getOverviewRulerLayoutInfo();
  119. overviewRulerData.parent.insertBefore(decorationsOverviewRuler.getDomNode(), overviewRulerData.insertBefore);
  120. }
  121. this._linesContent.appendChild(contentViewOverlays.getDomNode());
  122. this._linesContent.appendChild(rulers.domNode);
  123. this._linesContent.appendChild(this._viewZones.domNode);
  124. this._linesContent.appendChild(this._viewLines.getDomNode());
  125. this._linesContent.appendChild(this._contentWidgets.domNode);
  126. this._linesContent.appendChild(this._viewCursors.getDomNode());
  127. this._overflowGuardContainer.appendChild(margin.getDomNode());
  128. this._overflowGuardContainer.appendChild(this._scrollbar.getDomNode());
  129. this._overflowGuardContainer.appendChild(scrollDecoration.getDomNode());
  130. this._overflowGuardContainer.appendChild(this._textAreaHandler.textArea);
  131. this._overflowGuardContainer.appendChild(this._textAreaHandler.textAreaCover);
  132. this._overflowGuardContainer.appendChild(this._overlayWidgets.getDomNode());
  133. this._overflowGuardContainer.appendChild(minimap.getDomNode());
  134. this.domNode.appendChild(this._overflowGuardContainer);
  135. if (overflowWidgetsDomNode) {
  136. overflowWidgetsDomNode.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode.domNode);
  137. }
  138. else {
  139. this.domNode.appendChild(this._contentWidgets.overflowingContentWidgetsDomNode);
  140. }
  141. this._applyLayout();
  142. // Pointer handler
  143. this._pointerHandler = this._register(new PointerHandler(this._context, viewController, this._createPointerHandlerHelper()));
  144. }
  145. _flushAccumulatedAndRenderNow() {
  146. this._renderNow();
  147. }
  148. _createPointerHandlerHelper() {
  149. return {
  150. viewDomNode: this.domNode.domNode,
  151. linesContentDomNode: this._linesContent.domNode,
  152. focusTextArea: () => {
  153. this.focus();
  154. },
  155. dispatchTextAreaEvent: (event) => {
  156. this._textAreaHandler.textArea.domNode.dispatchEvent(event);
  157. },
  158. getLastRenderData: () => {
  159. const lastViewCursorsRenderData = this._viewCursors.getLastRenderData() || [];
  160. const lastTextareaPosition = this._textAreaHandler.getLastRenderData();
  161. return new PointerHandlerLastRenderData(lastViewCursorsRenderData, lastTextareaPosition);
  162. },
  163. shouldSuppressMouseDownOnViewZone: (viewZoneId) => {
  164. return this._viewZones.shouldSuppressMouseDownOnViewZone(viewZoneId);
  165. },
  166. shouldSuppressMouseDownOnWidget: (widgetId) => {
  167. return this._contentWidgets.shouldSuppressMouseDownOnWidget(widgetId);
  168. },
  169. getPositionFromDOMInfo: (spanNode, offset) => {
  170. this._flushAccumulatedAndRenderNow();
  171. return this._viewLines.getPositionFromDOMInfo(spanNode, offset);
  172. },
  173. visibleRangeForPosition: (lineNumber, column) => {
  174. this._flushAccumulatedAndRenderNow();
  175. return this._viewLines.visibleRangeForPosition(new Position(lineNumber, column));
  176. },
  177. getLineWidth: (lineNumber) => {
  178. this._flushAccumulatedAndRenderNow();
  179. return this._viewLines.getLineWidth(lineNumber);
  180. }
  181. };
  182. }
  183. _createTextAreaHandlerHelper() {
  184. return {
  185. visibleRangeForPositionRelativeToEditor: (lineNumber, column) => {
  186. this._flushAccumulatedAndRenderNow();
  187. return this._viewLines.visibleRangeForPosition(new Position(lineNumber, column));
  188. }
  189. };
  190. }
  191. _applyLayout() {
  192. const options = this._context.configuration.options;
  193. const layoutInfo = options.get(130 /* layoutInfo */);
  194. this.domNode.setWidth(layoutInfo.width);
  195. this.domNode.setHeight(layoutInfo.height);
  196. this._overflowGuardContainer.setWidth(layoutInfo.width);
  197. this._overflowGuardContainer.setHeight(layoutInfo.height);
  198. this._linesContent.setWidth(1000000);
  199. this._linesContent.setHeight(1000000);
  200. }
  201. _getEditorClassName() {
  202. const focused = this._textAreaHandler.isFocused() ? ' focused' : '';
  203. return this._context.configuration.options.get(127 /* editorClassName */) + ' ' + getThemeTypeSelector(this._context.theme.type) + focused;
  204. }
  205. // --- begin event handlers
  206. handleEvents(events) {
  207. super.handleEvents(events);
  208. this._scheduleRender();
  209. }
  210. onConfigurationChanged(e) {
  211. this._configPixelRatio = this._context.configuration.options.get(128 /* pixelRatio */);
  212. this.domNode.setClassName(this._getEditorClassName());
  213. this._applyLayout();
  214. return false;
  215. }
  216. onCursorStateChanged(e) {
  217. this._selections = e.selections;
  218. return false;
  219. }
  220. onFocusChanged(e) {
  221. this.domNode.setClassName(this._getEditorClassName());
  222. return false;
  223. }
  224. onThemeChanged(e) {
  225. this.domNode.setClassName(this._getEditorClassName());
  226. return false;
  227. }
  228. // --- end event handlers
  229. dispose() {
  230. if (this._renderAnimationFrame !== null) {
  231. this._renderAnimationFrame.dispose();
  232. this._renderAnimationFrame = null;
  233. }
  234. this._contentWidgets.overflowingContentWidgetsDomNode.domNode.remove();
  235. this._context.removeEventHandler(this);
  236. this._viewLines.dispose();
  237. // Destroy view parts
  238. for (const viewPart of this._viewParts) {
  239. viewPart.dispose();
  240. }
  241. super.dispose();
  242. }
  243. _scheduleRender() {
  244. if (this._renderAnimationFrame === null) {
  245. this._renderAnimationFrame = dom.runAtThisOrScheduleAtNextAnimationFrame(this._onRenderScheduled.bind(this), 100);
  246. }
  247. }
  248. _onRenderScheduled() {
  249. this._renderAnimationFrame = null;
  250. this._flushAccumulatedAndRenderNow();
  251. }
  252. _renderNow() {
  253. safeInvokeNoArg(() => this._actualRender());
  254. }
  255. _getViewPartsToRender() {
  256. let result = [], resultLen = 0;
  257. for (const viewPart of this._viewParts) {
  258. if (viewPart.shouldRender()) {
  259. result[resultLen++] = viewPart;
  260. }
  261. }
  262. return result;
  263. }
  264. _actualRender() {
  265. if (!dom.isInDOM(this.domNode.domNode)) {
  266. return;
  267. }
  268. let viewPartsToRender = this._getViewPartsToRender();
  269. if (!this._viewLines.shouldRender() && viewPartsToRender.length === 0) {
  270. // Nothing to render
  271. return;
  272. }
  273. const partialViewportData = this._context.viewLayout.getLinesViewportData();
  274. this._context.model.setViewport(partialViewportData.startLineNumber, partialViewportData.endLineNumber, partialViewportData.centeredLineNumber);
  275. const viewportData = new ViewportData(this._selections, partialViewportData, this._context.viewLayout.getWhitespaceViewportData(), this._context.model);
  276. if (this._contentWidgets.shouldRender()) {
  277. // Give the content widgets a chance to set their max width before a possible synchronous layout
  278. this._contentWidgets.onBeforeRender(viewportData);
  279. }
  280. if (this._viewLines.shouldRender()) {
  281. this._viewLines.renderText(viewportData);
  282. this._viewLines.onDidRender();
  283. // Rendering of viewLines might cause scroll events to occur, so collect view parts to render again
  284. viewPartsToRender = this._getViewPartsToRender();
  285. }
  286. const renderingContext = new RenderingContext(this._context.viewLayout, viewportData, this._viewLines);
  287. // Render the rest of the parts
  288. for (const viewPart of viewPartsToRender) {
  289. viewPart.prepareRender(renderingContext);
  290. }
  291. for (const viewPart of viewPartsToRender) {
  292. viewPart.render(renderingContext);
  293. viewPart.onDidRender();
  294. }
  295. // Try to detect browser zooming and paint again if necessary
  296. if (Math.abs(browser.getPixelRatio() - this._configPixelRatio) > 0.001) {
  297. // looks like the pixel ratio has changed
  298. this._context.configuration.updatePixelRatio();
  299. }
  300. }
  301. // --- BEGIN CodeEditor helpers
  302. delegateVerticalScrollbarMouseDown(browserEvent) {
  303. this._scrollbar.delegateVerticalScrollbarMouseDown(browserEvent);
  304. }
  305. restoreState(scrollPosition) {
  306. this._context.model.setScrollPosition({ scrollTop: scrollPosition.scrollTop }, 1 /* Immediate */);
  307. this._context.model.tokenizeViewport();
  308. this._renderNow();
  309. this._viewLines.updateLineWidths();
  310. this._context.model.setScrollPosition({ scrollLeft: scrollPosition.scrollLeft }, 1 /* Immediate */);
  311. }
  312. getOffsetForColumn(modelLineNumber, modelColumn) {
  313. const modelPosition = this._context.model.validateModelPosition({
  314. lineNumber: modelLineNumber,
  315. column: modelColumn
  316. });
  317. const viewPosition = this._context.model.coordinatesConverter.convertModelPositionToViewPosition(modelPosition);
  318. this._flushAccumulatedAndRenderNow();
  319. const visibleRange = this._viewLines.visibleRangeForPosition(new Position(viewPosition.lineNumber, viewPosition.column));
  320. if (!visibleRange) {
  321. return -1;
  322. }
  323. return visibleRange.left;
  324. }
  325. getTargetAtClientPoint(clientX, clientY) {
  326. const mouseTarget = this._pointerHandler.getTargetAtClientPoint(clientX, clientY);
  327. if (!mouseTarget) {
  328. return null;
  329. }
  330. return ViewUserInputEvents.convertViewToModelMouseTarget(mouseTarget, this._context.model.coordinatesConverter);
  331. }
  332. createOverviewRuler(cssClassName) {
  333. return new OverviewRuler(this._context, cssClassName);
  334. }
  335. change(callback) {
  336. this._viewZones.changeViewZones(callback);
  337. this._scheduleRender();
  338. }
  339. render(now, everything) {
  340. if (everything) {
  341. // Force everything to render...
  342. this._viewLines.forceShouldRender();
  343. for (const viewPart of this._viewParts) {
  344. viewPart.forceShouldRender();
  345. }
  346. }
  347. if (now) {
  348. this._flushAccumulatedAndRenderNow();
  349. }
  350. else {
  351. this._scheduleRender();
  352. }
  353. }
  354. focus() {
  355. this._textAreaHandler.focusTextArea();
  356. }
  357. isFocused() {
  358. return this._textAreaHandler.isFocused();
  359. }
  360. setAriaOptions(options) {
  361. this._textAreaHandler.setAriaOptions(options);
  362. }
  363. addContentWidget(widgetData) {
  364. this._contentWidgets.addWidget(widgetData.widget);
  365. this.layoutContentWidget(widgetData);
  366. this._scheduleRender();
  367. }
  368. layoutContentWidget(widgetData) {
  369. let newRange = widgetData.position ? widgetData.position.range || null : null;
  370. if (newRange === null) {
  371. const newPosition = widgetData.position ? widgetData.position.position : null;
  372. if (newPosition !== null) {
  373. newRange = new Range(newPosition.lineNumber, newPosition.column, newPosition.lineNumber, newPosition.column);
  374. }
  375. }
  376. const newPreference = widgetData.position ? widgetData.position.preference : null;
  377. this._contentWidgets.setWidgetPosition(widgetData.widget, newRange, newPreference);
  378. this._scheduleRender();
  379. }
  380. removeContentWidget(widgetData) {
  381. this._contentWidgets.removeWidget(widgetData.widget);
  382. this._scheduleRender();
  383. }
  384. addOverlayWidget(widgetData) {
  385. this._overlayWidgets.addWidget(widgetData.widget);
  386. this.layoutOverlayWidget(widgetData);
  387. this._scheduleRender();
  388. }
  389. layoutOverlayWidget(widgetData) {
  390. const newPreference = widgetData.position ? widgetData.position.preference : null;
  391. const shouldRender = this._overlayWidgets.setWidgetPosition(widgetData.widget, newPreference);
  392. if (shouldRender) {
  393. this._scheduleRender();
  394. }
  395. }
  396. removeOverlayWidget(widgetData) {
  397. this._overlayWidgets.removeWidget(widgetData.widget);
  398. this._scheduleRender();
  399. }
  400. }
  401. function safeInvokeNoArg(func) {
  402. try {
  403. return func();
  404. }
  405. catch (e) {
  406. onUnexpectedError(e);
  407. }
  408. }