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

feat(trigcircle): рендер формул через KaTeX

Browse Source 
Блок «Точные значения · приведение» теперь рендерится KaTeX (katex.renderToString,
как в graph.js/_sim_engine), с фолбэком на сырой LaTeX если katex ещё не загрузился.
Добавлен _latexVal (точное значение → LaTeX: \tfrac{1}{2}, \tfrac{\sqrt{3}}{2}, …),
функции \sin/\cos/\operatorname{tg}/\operatorname{ctg}, цвет наследуется от CSS-цвета
контейнера (без \textcolor). Формула приведения и значения — те же (проверено).

Verified: node --check; headless-смоук LaTeX-вывода (дамп + проверки) — 150°=180°−30°
sin=½ cos=−√3/2 tg=−√3/3; 45° без приведения √2/2; 90° tg «не опр.»; 210°=180°+30°;
300°=360°−60°; 137° нетабличный. Эмодзи нет.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-24 10:35:25 +03:00
parent 5eed248702
commit cefb5e0836
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/labs/trigcircle.js
+27 -8
View File
@@ -1106,18 +1106,23 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
fEl.innerHTML = '<span style="color:var(--text-3);font-size:0.72rem;line-height:1.5">Нетабличный угол — точных значений нет, см. приближённые выше.</span>';
} else {
const reduce = (s.quadrant !== 1) && (beta === 30 || beta === 45 || beta === 60);
let head = '';
const K = window.katex;
const tex = latex => (K ? K.renderToString(latex, { throwOnError: false, strict: false, displayMode: false }) : latex);
const FN = { sin: '\\sin', cos: '\\cos', tg: '\\operatorname{tg}', ctg: '\\operatorname{ctg}' };
let html = '';
if (reduce) {
const wrap = s.quadrant === 2 ? `180° − ${beta}°` : s.quadrant === 3 ? `180° + ${beta}°` : `360° − ${beta}°`;
head = `<div style="font-weight:700;color:var(--violet);margin-bottom:5px">${degR}° = ${wrap} → приведение к ${beta}°</div>`;
const wrap = s.quadrant === 2 ? `180^\\circ - ${beta}^\\circ`
: s.quadrant === 3 ? `180^\\circ + ${beta}^\\circ`
: `360^\\circ - ${beta}^\\circ`;
html += `<div style="color:var(--violet);margin-bottom:6px">${tex(`${degR}^\\circ = ${wrap}`)}</div>`;
}
const sgStr = v => (v !== undefined && v < -1e-9) ? '−' : '';
const line = (nm, color, val) => {
const mid = reduce ? ` = ${sgStr(val)}${nm} ${beta}°` : '';
return `<div style="display:flex;justify-content:space-between;gap:8px;line-height:1.7">` +
`<span><b style="color:${color}">${nm} ${degR}°</b>${mid}</span><b>${_f(val)}</b></div>`;
const sgn = (val !== undefined && val < -1e-9) ? '-' : '';
const mid = reduce ? ` = ${sgn}${FN[nm]}\\,${beta}^\\circ` : '';
// KaTeX наследует CSS-цвет родителя → красим div, формулу не трогаем.
return `<div style="color:${color};line-height:1.95">${tex(`${FN[nm]}\\,${degR}^\\circ${mid} = ${_latexVal(val)}`)}</div>`;
};
fEl.innerHTML = head + line('sin', '#EF476F', s.sin) + line('cos', '#06D6E0', s.cos) +
fEl.innerHTML = html + line('sin', '#EF476F', s.sin) + line('cos', '#06D6E0', s.cos) +
line('tg', '#FFD166', s.tan) + line('ctg', '#7BF5A4', s.cot);
}
}
@@ -1131,6 +1136,20 @@ if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
document.getElementById('trigbar-quad').textContent = ['I', 'II', 'III', 'IV'][s.quadrant - 1];
}
/* Точное значение → LaTeX (зеркалит _f, но для KaTeX). undefined → «—». */
function _latexVal(v) {
if (v === undefined) return '\\text{не опр.}';
const a = Math.abs(v), sg = v < -1e-9 ? '-' : '';
if (a < 5e-4) return '0';
if (Math.abs(a - 0.5) < 1e-3) return sg + '\\tfrac{1}{2}';
if (Math.abs(a - Math.SQRT2 / 2) < 1e-3) return sg + '\\tfrac{\\sqrt{2}}{2}';
if (Math.abs(a - Math.sqrt(3) / 2) < 1e-3) return sg + '\\tfrac{\\sqrt{3}}{2}';
if (Math.abs(a - Math.sqrt(3) / 3) < 1e-3) return sg + '\\tfrac{\\sqrt{3}}{3}';
if (Math.abs(a - 1) < 1e-3) return sg + '1';
if (Math.abs(a - Math.sqrt(3)) < 1e-3) return sg + '\\sqrt{3}';
return v.toFixed(3);
}
/* ── 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 */