maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(lab-graph): введённые функции — редактируемое KaTeX-поле

Browse Source 
Введённая функция показывается отрисованной формулой KaTeX прямо в строке;
клик по формуле → правка текста на месте (raw input + живое превью под полем),
клик мимо/blur → снова формула. Реализовано без MathQuill: .fn-field держит
<input> и .fn-math (KaTeX), класс has-math переключает отображение по фокусу.

- renderFnMath() рисует формулу в строке; _fnDisplay() решает режим (фокус+значение)
- focus/blur/mousedown-обработчики в _initGraphPanel (идемпотентно)
- живое превью .fn-preview теперь видно ТОЛЬКО при правке (:focus-within), цвет функции
- graphInsert/applyPreset/state-apply/clearAll/default-fn0 обновляют math-поле
- _katexInto() — общий безопасный рендер

Только фронт. node --check OK; логика вставки 5/5 (прошлый прогон).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-24 19:02:08 +03:00
parent 000e42f9b3
commit fa29332bcd
3 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/lab.css
+13 -7
View File
@@ -181,22 +181,28 @@
background: var(--fn-color, var(--violet));
box-shadow: 0 0 6px var(--fn-color, var(--violet));
}
.fn-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.fn-input {
flex: 1; border: none; outline: none; background: transparent;
width: 100%; border: none; outline: none; background: transparent;
font-family: 'Manrope', monospace; font-size: 0.88rem; font-weight: 600;
color: var(--text); padding: 0; min-width: 0;
}
.fn-input::placeholder { color: var(--text-3); font-weight: 500; }
/* KaTeX live preview — крупная «отрисованная» формула под вводом */
/* введённая функция как KaTeX прямо в строке; клик — правка текста на месте */
.fn-math { display: none; width: 100%; cursor: text; overflow-x: auto; overflow-y: hidden; min-height: 19px; line-height: 1.3; }
.fn-math .katex { color: var(--fn-color, rgba(255,255,255,.9)); font-size: 1.12em; }
.fn-field.has-math .fn-input { display: none; }
.fn-field.has-math .fn-math { display: block; }
/* живое превью формулы — только пока строка в режиме правки (поле в фокусе) */
.fn-preview {
min-height: 22px; padding: 5px 8px 5px 36px; margin-top: 3px;
font-size: 0.82rem; line-height: 1.5;
min-height: 0; padding: 4px 8px 2px 36px; margin-top: 2px;
font-size: 0.8rem; line-height: 1.4;
overflow-x: auto; overflow-y: hidden; display: none;
}
.fn-preview.has-content { display: block; }
.fn-preview .katex { color: var(--fn-color, rgba(255,255,255,.85)); font-size: 1.18em; }
.fn-preview.is-ph { opacity: .4; } /* плейсхолдер-формула, пока поле пустое */
.fn-row:focus-within + .fn-preview.has-content { display: block; }
.fn-preview .katex { color: var(--fn-color, rgba(255,255,255,.6)); font-size: 1.05em; opacity: .8; }
/* keypad вставки структур (как редактор формул) */
.gp-keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 6px; }