feat(trigcircle): вся математика панели на KaTeX (значения + угол)

Значения sin/cos/tg/ctg в панели и стат-баре теперь рендерятся KaTeX для дробей/корней
(\tfrac{1}{2}, \tfrac{\sqrt{3}}{2}, …), а простые числа (0, ±1, десятичные) — текстом
(быстро при перетаскивании, без лишних KaTeX-вызовов). Бейдж угла — KaTeX π-доли по
таблице 16 углов (150° = 5π/6, 210° = 7π/6, …) + радианы + котерминальные.

Хелперы: _tex (общий рендер с фолбэком), _angleLatex/_piLabelToLatex (рад → LaTeX π-доли),
setMathVal (KaTeX только для нетривиальных форм). Формулы значений/приведения и уравнений
уже были на KaTeX.

Verified: node --check; headless-смоук 9/10 (10-я — артефакт стаба: в реальном DOM
textContent= очищает прежний innerHTML; логика LaTeX верна). Эмодзи нет.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-24 10:47:30 +03:00
parent 5bb0aeb940
commit 244df71aec
+39 -12
View File
@@ -1184,15 +1184,24 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
};
const degStr = s.deg.toFixed(1) + '°';
// Panel values (nice fractions)
document.getElementById('trig-v-sin').textContent = _f(s.sin);
document.getElementById('trig-v-cos').textContent = _f(s.cos);
document.getElementById('trig-v-tan').textContent = _f(s.tan);
document.getElementById('trig-v-cot').textContent = _f(s.cot);
// Значения — KaTeX для дробей/корней, текст для простых чисел (быстро при перетаскивании).
const setMathVal = (id, v) => {
const el = document.getElementById(id); if (!el) return;
const lx = _latexVal(v);
if (/\\tfrac|\\sqrt|\\text/.test(lx)) el.innerHTML = _tex(lx);
else el.textContent = lx;
};
setMathVal('trig-v-sin', s.sin);
setMathVal('trig-v-cos', s.cos);
setMathVal('trig-v-tan', s.tan);
setMathVal('trig-v-cot', s.cot);
// Angle badge + котерминальные углы (+360°·k)
// Угол: KaTeX (град = π-доля) + радианы + котерминальные (+360°·k)
const al = _angleLatex(s.angle);
const head = al ? `${Math.round(s.deg)}^\\circ = ${al}` : `${degStr}`;
document.getElementById('trig-angle-badge').innerHTML =
`${degStr} = ${s.radLabel}<br><span style="font-size:0.72rem;opacity:0.6">${s.angle.toFixed(4)} рад</span>` +
`<div>${_tex(head)}</div>` +
`<span style="font-size:0.72rem;opacity:0.6">${s.angle.toFixed(4)} рад</span>` +
`<br><span style="font-size:0.68rem;opacity:0.5">+ 360°·k (котерминальные)</span>`;
// Опорный (острый) угол — guarded (панель может не иметь элемента)
@@ -1238,12 +1247,12 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
}
}
// Stats bar (nice fractions)
// Stats bar — значения тоже KaTeX (дроби/корни)
document.getElementById('trigbar-angle').textContent = degStr;
document.getElementById('trigbar-sin').textContent = _f(s.sin);
document.getElementById('trigbar-cos').textContent = _f(s.cos);
document.getElementById('trigbar-tan').textContent = _f(s.tan);
document.getElementById('trigbar-cot').textContent = _f(s.cot);
setMathVal('trigbar-sin', s.sin);
setMathVal('trigbar-cos', s.cos);
setMathVal('trigbar-tan', s.tan);
setMathVal('trigbar-cot', s.cot);
document.getElementById('trigbar-quad').textContent = ['I', 'II', 'III', 'IV'][s.quadrant - 1];
}
@@ -1261,6 +1270,24 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
return v.toFixed(3);
}
/* Рендер LaTeX → HTML через KaTeX (с фолбэком на сырой LaTeX, если katex ещё не готов). */
function _tex(latex) {
const K = window.katex;
return K ? K.renderToString(latex, { throwOnError: false, strict: false, displayMode: false }) : latex;
}
/* Юникод-метка π-доли ('7π/6','π/4','π','0') → LaTeX. */
function _piLabelToLatex(l) {
if (l === '0') return '0';
const conv = s => s.replace('π', '\\pi');
if (l.indexOf('/') >= 0) { const p = l.split('/'); return `\\tfrac{${conv(p[0])}}{${p[1]}}`; }
return conv(l);
}
/* Радиан текущего угла → LaTeX красивой π-доли по таблице 16 углов (или null). */
function _angleLatex(rad) {
for (const n of _TC_NOTABLE) if (Math.abs(rad - n.a) < 1e-6) return _piLabelToLatex(n.l);
return null;
}
/* ── KaTeX live preview ── */
/** Convert user ascii expression <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> LaTeX string for KaTeX preview */