view.js 20 KB

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