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
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    QuickBoxes for Dojo

    Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...

  • By
    Jack Rugile’s Favorite CodePen Demos

    CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

Discussion

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