在CodeMirror中获取视口行和列

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

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

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

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

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