Get Viewport Lines and Columns in CodeMirror

By  on  

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.

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.

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).

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.

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Using MooTools to Instruct Google Analytics to Track Outbound Links

    Google Analytics provides a wealth of information about who's coming to your website. One of the most important statistics the service provides is the referrer statistic -- you've gotta know who's sending people to your website, right? What about where you send others though?

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!