codemirror

codemirror

CodeMirror is an amazing utility for presenting code in a browser environment.  Syntax highlighting, widgets, and a number of advanced functions make it a unique, useful tool.  When using CodeMirror inside the Firefox DevTools debugger, I found that adding hundreds of column breakpoint widgets to very long lines of code really killed performance, and I sure as hell can't give you all a horrible experience while you're debugging your JavaScript.

CodeMirror是一个很棒的实用程序，用于在浏览器环境中显示代码。 语法高亮显示，小部件和许多高级功能使其成为一个独特而有用的工具。 在Firefox DevTools调试器中使用CodeMirror时，我发现在很长的代码行中添加数百个列断点窗口小部件确实会降低性能，而且我敢肯定，在调试JavaScript时，这不会给您带来可怕的体验。

I wanted to get fancy to ensure performance was good, so I decided to tinker around with only displaying column breakpoint widgets that appeared in the viewport.   To do that, I needed to calculate the start line, start column, end line, and end column of the CodeMirror editor's contents, some of which didn't appear to be provided within methods of CodeMirror.

我想花一些时间以确保性能良好，所以我决定只显示在视口中出现的列断点小部件。 为此，我需要计算CodeMirror编辑器内容的开始行，开始列，结束行和结束列，其中一些似乎未在CodeMirror方法中提供。

My experimentation led to me to a solution I'm quite happy with; the code is clean, the performance is good, and the method has been incredibly reliable.  Here it is:

我的实验使我找到了一个我很满意的解决方案； 代码干净，性能良好，并且方法非常可靠。 这里是：

function getLocationsInViewport(editor) { const charWidth = editor.defaultCharWidth(); const scrollArea = editor.getScrollInfo(); const { scrollLeft } = editor.doc; const rect = editor.getWrapperElement().getBoundingClientRect(); const topVisibleLine = editor.lineAtHeight(rect.top, "window"); const bottomVisibleLine = editor.lineAtHeight( rect.bottom, "window" ); const leftColumn = Math.floor(scrollLeft > 0 ? scrollLeft / charWidth : 0); const rightPosition = scrollLeft + (scrollArea.clientWidth - 30); const rightColumn = Math.floor(rightPosition / charWidth); return { start: { line: topVisibleLine, column: leftColumn }, end: { line: bottomVisibleLine, column: rightColumn } }; }

CodeMirror does provide easy methods for getting the start and end lines in viewport (lineAtHeight) but there's not a similar functionality for column. I opted to get the scrollLeft position of CodeMirror's scroller, then use the default character width and other dimensions to get the approximate column at that position.  My user testing found this method to be very reliable, either at the exact character or one character off (likely due to subpixel math).

CodeMirror确实提供了用于获取视口中的开始和结束行的简单方法( lineAtHeight )，但是column没有类似的功能。 我选择获取CodeMirror的滚动器的scrollLeft位置，然后使用默认字符宽度和其他尺寸来获取该位置的近似列。 我的用户测试发现，此方法非常可靠，无论是精确的字符还是关闭一个字符(可能是由于亚像素数学)。

I've never proclaimed to be the best developer in the world (I'm far from it) but being clever to find solutions to interesting problems is something that I've always been proud of.

我从来没有宣称自己是世界上最好的开发人员(距离我还很遥远)，但是我一直为能找到有趣的问题的解决方案而感到非常聪明。

翻译自: https://davidwalsh.name/viewport-lines-columns-codemirror

codemirror

相关资源：jdk-8u281-windows-x64.exe