diff --git a/web/src/components/Minimap.tsx b/web/src/components/Minimap.tsx index c7cfa4e..5803edb 100644 --- a/web/src/components/Minimap.tsx +++ b/web/src/components/Minimap.tsx @@ -105,8 +105,25 @@ const BAR_PX = 1 /** Ширина колонки позначок по всьому документу (режим прокрутки). */ const GUTTER_W = 6 -/** Скільки символів рядка вміщається в ширину смужки. Далі — обрізаємо. */ -const MAX_COLS = 280 +/** + * Скільки символів рядка вміщається в ширину смужки. Далі — обрізаємо. + * + * Було 280, і саме це робило мінікарту мазаниною. Порахуймо: 280 + * символів у 180 пікселів — це 0.64 пікселя на символ. Слово з чотирьох + * літер займає два з половиною пікселі, проміжок між словами — менше + * одного, тобто зникає при округленні. Рядки перетворювались на суцільні + * риси, і мінікарта показувала не форму конфігу, а сіру штриховку. + * + * 120 дає 1.4 пікселя на символ: проміжок між словами тримається цілим + * пікселем і не губиться. Слова знову видно окремо — а саме за ними + * людина й упізнає, де вона в конфізі. + * + * Втрата: хвости довгих рядків за 120-м символом на карту не потрапляють. + * Для мережевих конфігів це майже нічого не коштує — відступ і ключове + * слово, тобто вся структура, стоять на початку рядка. Хвіст із адресами + * й масками однаково не читався б і при 280. + */ +const MAX_COLS = 120 /** * Скільки слів у рядку малюємо окремо. @@ -191,10 +208,22 @@ export const KIND_COMMENT = 3 /** Колір знайденого рядка. Той самий бурштин, що й у підсвітці тексту. */ const HIT_COLOR = '#fbbf24' +/* + * Палітра на крок тьмяніша, ніж була (#e2e8f0 / #94a3b8 / #64748b). + * + * На майже чорному тлі світло-сірий штрих читається як ЖИРНИЙ, навіть + * коли він в один піксель: око бачить не товщину, а контраст. Саме + * тому зменшення висоти штриха мазанини не прибрало — вона була не в + * товщині. + * + * Різниця між видами рядків при цьому зберігається: три кольори так + * само розрізняються між собою, просто вся мініатюра стала спокійнішою + * і перестала перетягувати увагу з тексту, який поруч. + */ export const KIND_COLOR: Record = { - [KIND_TOP]: '#e2e8f0', - [KIND_BODY]: '#94a3b8', - [KIND_COMMENT]: '#64748b', + [KIND_TOP]: '#94a3b8', + [KIND_BODY]: '#64748b', + [KIND_COMMENT]: '#475569', } /**