721dce0a42acc5e84ab0f0ab673552ff7916980ce519c1bfe327ad3258159172cebabc3d9371e71a1fbddf1813fba3adf2066577a1fde6f8fa1991ecdb70c7 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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 './decorations.css';
  6. import { DynamicViewOverlay } from '../../view/dynamicViewOverlay.js';
  7. import { Range } from '../../../common/core/range.js';
  8. import { HorizontalRange } from '../../view/renderingContext.js';
  9. export class DecorationsOverlay extends DynamicViewOverlay {
  10. constructor(context) {
  11. super();
  12. this._context = context;
  13. const options = this._context.configuration.options;
  14. this._lineHeight = options.get(61 /* EditorOption.lineHeight */);
  15. this._typicalHalfwidthCharacterWidth = options.get(46 /* EditorOption.fontInfo */).typicalHalfwidthCharacterWidth;
  16. this._renderResult = null;
  17. this._context.addEventHandler(this);
  18. }
  19. dispose() {
  20. this._context.removeEventHandler(this);
  21. this._renderResult = null;
  22. super.dispose();
  23. }
  24. // --- begin event handlers
  25. onConfigurationChanged(e) {
  26. const options = this._context.configuration.options;
  27. this._lineHeight = options.get(61 /* EditorOption.lineHeight */);
  28. this._typicalHalfwidthCharacterWidth = options.get(46 /* EditorOption.fontInfo */).typicalHalfwidthCharacterWidth;
  29. return true;
  30. }
  31. onDecorationsChanged(e) {
  32. return true;
  33. }
  34. onFlushed(e) {
  35. return true;
  36. }
  37. onLinesChanged(e) {
  38. return true;
  39. }
  40. onLinesDeleted(e) {
  41. return true;
  42. }
  43. onLinesInserted(e) {
  44. return true;
  45. }
  46. onScrollChanged(e) {
  47. return e.scrollTopChanged || e.scrollWidthChanged;
  48. }
  49. onZonesChanged(e) {
  50. return true;
  51. }
  52. // --- end event handlers
  53. prepareRender(ctx) {
  54. const _decorations = ctx.getDecorationsInViewport();
  55. // Keep only decorations with `className`
  56. let decorations = [];
  57. let decorationsLen = 0;
  58. for (let i = 0, len = _decorations.length; i < len; i++) {
  59. const d = _decorations[i];
  60. if (d.options.className) {
  61. decorations[decorationsLen++] = d;
  62. }
  63. }
  64. // Sort decorations for consistent render output
  65. decorations = decorations.sort((a, b) => {
  66. if (a.options.zIndex < b.options.zIndex) {
  67. return -1;
  68. }
  69. if (a.options.zIndex > b.options.zIndex) {
  70. return 1;
  71. }
  72. const aClassName = a.options.className;
  73. const bClassName = b.options.className;
  74. if (aClassName < bClassName) {
  75. return -1;
  76. }
  77. if (aClassName > bClassName) {
  78. return 1;
  79. }
  80. return Range.compareRangesUsingStarts(a.range, b.range);
  81. });
  82. const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
  83. const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
  84. const output = [];
  85. for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
  86. const lineIndex = lineNumber - visibleStartLineNumber;
  87. output[lineIndex] = '';
  88. }
  89. // Render first whole line decorations and then regular decorations
  90. this._renderWholeLineDecorations(ctx, decorations, output);
  91. this._renderNormalDecorations(ctx, decorations, output);
  92. this._renderResult = output;
  93. }
  94. _renderWholeLineDecorations(ctx, decorations, output) {
  95. const lineHeight = String(this._lineHeight);
  96. const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
  97. const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
  98. for (let i = 0, lenI = decorations.length; i < lenI; i++) {
  99. const d = decorations[i];
  100. if (!d.options.isWholeLine) {
  101. continue;
  102. }
  103. const decorationOutput = ('<div class="cdr '
  104. + d.options.className
  105. + '" style="left:0;width:100%;height:'
  106. + lineHeight
  107. + 'px;"></div>');
  108. const startLineNumber = Math.max(d.range.startLineNumber, visibleStartLineNumber);
  109. const endLineNumber = Math.min(d.range.endLineNumber, visibleEndLineNumber);
  110. for (let j = startLineNumber; j <= endLineNumber; j++) {
  111. const lineIndex = j - visibleStartLineNumber;
  112. output[lineIndex] += decorationOutput;
  113. }
  114. }
  115. }
  116. _renderNormalDecorations(ctx, decorations, output) {
  117. const lineHeight = String(this._lineHeight);
  118. const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
  119. let prevClassName = null;
  120. let prevShowIfCollapsed = false;
  121. let prevRange = null;
  122. for (let i = 0, lenI = decorations.length; i < lenI; i++) {
  123. const d = decorations[i];
  124. if (d.options.isWholeLine) {
  125. continue;
  126. }
  127. const className = d.options.className;
  128. const showIfCollapsed = Boolean(d.options.showIfCollapsed);
  129. let range = d.range;
  130. if (showIfCollapsed && range.endColumn === 1 && range.endLineNumber !== range.startLineNumber) {
  131. range = new Range(range.startLineNumber, range.startColumn, range.endLineNumber - 1, this._context.viewModel.getLineMaxColumn(range.endLineNumber - 1));
  132. }
  133. if (prevClassName === className && prevShowIfCollapsed === showIfCollapsed && Range.areIntersectingOrTouching(prevRange, range)) {
  134. // merge into previous decoration
  135. prevRange = Range.plusRange(prevRange, range);
  136. continue;
  137. }
  138. // flush previous decoration
  139. if (prevClassName !== null) {
  140. this._renderNormalDecoration(ctx, prevRange, prevClassName, prevShowIfCollapsed, lineHeight, visibleStartLineNumber, output);
  141. }
  142. prevClassName = className;
  143. prevShowIfCollapsed = showIfCollapsed;
  144. prevRange = range;
  145. }
  146. if (prevClassName !== null) {
  147. this._renderNormalDecoration(ctx, prevRange, prevClassName, prevShowIfCollapsed, lineHeight, visibleStartLineNumber, output);
  148. }
  149. }
  150. _renderNormalDecoration(ctx, range, className, showIfCollapsed, lineHeight, visibleStartLineNumber, output) {
  151. const linesVisibleRanges = ctx.linesVisibleRangesForRange(range, /*TODO@Alex*/ className === 'findMatch');
  152. if (!linesVisibleRanges) {
  153. return;
  154. }
  155. for (let j = 0, lenJ = linesVisibleRanges.length; j < lenJ; j++) {
  156. const lineVisibleRanges = linesVisibleRanges[j];
  157. if (lineVisibleRanges.outsideRenderedLine) {
  158. continue;
  159. }
  160. const lineIndex = lineVisibleRanges.lineNumber - visibleStartLineNumber;
  161. if (showIfCollapsed && lineVisibleRanges.ranges.length === 1) {
  162. const singleVisibleRange = lineVisibleRanges.ranges[0];
  163. if (singleVisibleRange.width < this._typicalHalfwidthCharacterWidth) {
  164. // collapsed/very small range case => make the decoration visible by expanding its width
  165. // expand its size on both sides (both to the left and to the right, keeping it centered)
  166. const center = Math.round(singleVisibleRange.left + singleVisibleRange.width / 2);
  167. const left = Math.max(0, Math.round(center - this._typicalHalfwidthCharacterWidth / 2));
  168. lineVisibleRanges.ranges[0] = new HorizontalRange(left, this._typicalHalfwidthCharacterWidth);
  169. }
  170. }
  171. for (let k = 0, lenK = lineVisibleRanges.ranges.length; k < lenK; k++) {
  172. const visibleRange = lineVisibleRanges.ranges[k];
  173. const decorationOutput = ('<div class="cdr '
  174. + className
  175. + '" style="left:'
  176. + String(visibleRange.left)
  177. + 'px;width:'
  178. + String(visibleRange.width)
  179. + 'px;height:'
  180. + lineHeight
  181. + 'px;"></div>');
  182. output[lineIndex] += decorationOutput;
  183. }
  184. }
  185. }
  186. render(startLineNumber, lineNumber) {
  187. if (!this._renderResult) {
  188. return '';
  189. }
  190. const lineIndex = lineNumber - startLineNumber;
  191. if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
  192. return '';
  193. }
  194. return this._renderResult[lineIndex];
  195. }
  196. }