Získejte čáry a sloupce výřezu v CodeMirror

CodeMirror je úžasný nástroj pro prezentaci kódu v prostředí prohlížeče. Zvýrazňování syntaxe, widgety a řada pokročilých funkcí z něj činí jedinečný a užitečný nástroj. Při použití CodeMirror v ladicím programu Firefox DevTools jsem zjistil, že přidání stovek widgetů pro zarážky sloupců do velmi dlouhých řádků kódu skutečně zabilo výkon a jsem si jistý, že vám všem při ladění JavaScriptu nemůže poskytnout hrozný zážitek.

Chtěl jsem mít chuť zajistit si dobrý výkon, a tak jsem se rozhodl pohrát si se zobrazením pouze widgetů pro zarážky sloupců, které se objevily ve výřezu. Abych to udělal, potřeboval jsem vypočítat počáteční řádek, počáteční sloupec, koncový řádek a koncový sloupec obsahu editoru CodeMirror, z nichž některé zřejmě nebyly poskytovány v metodách CodeMirror.

Moje experimentování mě vedlo k řešení, se kterým jsem docela spokojený; kód je čistý, výkon je dobrý a metoda je neuvěřitelně spolehlivá. Tady to je:

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 poskytuje snadné metody pro získání počátečního a koncového řádku ve výřezu (lineAtHeight ), ale pro sloupec neexistuje podobná funkce. Rozhodl jsem se získat scrollLeft pozici posuvníku CodeMirror, pak použijte výchozí šířku znaku a další rozměry, abyste získali přibližný sloupec na této pozici. Moje uživatelské testování zjistilo, že tato metoda je velmi spolehlivá, ať už jde o přesný znak, nebo o jeden znak mimo (pravděpodobně kvůli subpixelové matematice).

Nikdy jsem neprohlašoval, že jsem nejlepší vývojář na světě (mám k tomu daleko), ale být chytrý při hledání řešení zajímavých problémů je něco, na co jsem byl vždy hrdý.