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