feat(lab-graph): KaTeX-формулы + панель ввода как редактор формул
«График функции»: - примеры (чипы) и живой предпросмотр каждой функции рендерятся в KaTeX (data-tex на чипах, _initGraphPanel рендерит при открытии) - предпросмотр теперь всегда виден, крупный и в цвет функции; пустое поле показывает плейсхолдер-формулу приглушённо - НОВОЕ: keypad вставки структур (x², xⁿ, √, a/b, |x|, π, sin/cos/tg/ln/eˣ, ()) — клик вставляет в активное поле по каретке (как редактор формул в PowerPoint) - graphInsert(token) с маркером каретки |; активное поле отслеживается по focus Только фронт. Проверено: node --check, логика вставки 5/5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+19
-5
@@ -188,15 +188,29 @@
|
||||
}
|
||||
.fn-input::placeholder { color: var(--text-3); font-weight: 500; }
|
||||
|
||||
/* KaTeX live preview */
|
||||
/* KaTeX live preview — крупная «отрисованная» формула под вводом */
|
||||
.fn-preview {
|
||||
min-height: 20px; padding: 3px 4px 3px 36px;
|
||||
min-height: 22px; padding: 5px 8px 5px 36px; margin-top: 3px;
|
||||
font-size: 0.82rem; line-height: 1.5;
|
||||
color: rgba(255,255,255,.65);
|
||||
overflow: hidden; display: none;
|
||||
overflow-x: auto; overflow-y: hidden; display: none;
|
||||
}
|
||||
.fn-preview.has-content { display: block; }
|
||||
.fn-preview .katex { color: rgba(255,255,255,.8); font-size: 1em; }
|
||||
.fn-preview .katex { color: var(--fn-color, rgba(255,255,255,.85)); font-size: 1.18em; }
|
||||
.fn-preview.is-ph { opacity: .4; } /* плейсхолдер-формула, пока поле пустое */
|
||||
|
||||
/* keypad вставки структур (как редактор формул) */
|
||||
.gp-keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 6px; }
|
||||
.kp-btn {
|
||||
display: flex; align-items: center; justify-content: center; min-height: 32px;
|
||||
padding: 5px 2px; border-radius: 9px; border: 1.5px solid var(--border-h);
|
||||
background: rgba(255,255,255,.02); color: var(--text-2);
|
||||
font-family: 'Manrope', monospace; font-size: 0.78rem; font-weight: 700;
|
||||
cursor: pointer; transition: all .14s;
|
||||
}
|
||||
.kp-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.08); transform: translateY(-1px); }
|
||||
.kp-btn:active { transform: translateY(0); }
|
||||
.kp-btn .katex { font-size: 1em; }
|
||||
.preset-btn .katex { font-size: 0.96em; }
|
||||
.fn-err {
|
||||
font-size: 0.68rem; color: var(--pink); font-weight: 600;
|
||||
padding: 2px 0 0 22px; display: none;
|
||||
|
||||
@@ -507,6 +507,7 @@ class GraphSim {
|
||||
document.getElementById('sim-topbar-title').textContent = 'График функции';
|
||||
_simShow('sim-graph');
|
||||
_simShow('ctrl-graph');
|
||||
_initGraphPanel();
|
||||
|
||||
_registerSimState('graph',
|
||||
() => ({
|
||||
@@ -524,6 +525,7 @@ class GraphSim {
|
||||
if (_embedMode) _startStateEmit('graph');
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
_initGraphPanel(); // KaTeX к этому моменту точно загружен
|
||||
if (!gSim) {
|
||||
gSim = new GraphSim(document.getElementById('graph-canvas'));
|
||||
gSim.onHover = updateInfoBar;
|
||||
@@ -575,16 +577,52 @@ class GraphSim {
|
||||
function renderPreview(idx) {
|
||||
const inp = document.getElementById('fn' + idx);
|
||||
const prev = document.getElementById('fn' + idx + '-prev');
|
||||
if (!prev) return;
|
||||
const raw = inp?.value?.trim() || '';
|
||||
if (!raw || typeof katex === 'undefined') {
|
||||
prev.innerHTML = ''; prev.classList.remove('has-content'); return;
|
||||
const src = raw || (inp?.getAttribute('placeholder') || ''); // пусто → показываем плейсхолдер-формулу
|
||||
if (!src || typeof katex === 'undefined') {
|
||||
prev.innerHTML = ''; prev.classList.remove('has-content', 'is-ph'); return;
|
||||
}
|
||||
try {
|
||||
prev.innerHTML = katex.renderToString(toLatex(raw), {
|
||||
prev.innerHTML = katex.renderToString(toLatex(src), {
|
||||
throwOnError: false, strict: false, displayMode: false,
|
||||
});
|
||||
prev.classList.add('has-content');
|
||||
} catch { prev.innerHTML = ''; prev.classList.remove('has-content'); }
|
||||
prev.classList.toggle('is-ph', !raw); // плейсхолдер — приглушённо
|
||||
} catch { prev.innerHTML = ''; prev.classList.remove('has-content', 'is-ph'); }
|
||||
}
|
||||
|
||||
/* Вставка структуры формулы в активное поле (как редактор формул).
|
||||
В токене символ | помечает позицию каретки, напр. 'sin(|)'. */
|
||||
let _activeFnIdx = 0, _graphPanelInit = false;
|
||||
function graphInsert(token) {
|
||||
const el = document.getElementById('fn' + _activeFnIdx) || document.getElementById('fn0');
|
||||
if (!el) return;
|
||||
el.focus();
|
||||
let ins = String(token || ''); let caretInTok = -1;
|
||||
const bar = ins.indexOf('|');
|
||||
if (bar >= 0) { caretInTok = bar; ins = ins.slice(0, bar) + ins.slice(bar + 1); }
|
||||
const s = (el.selectionStart != null) ? el.selectionStart : el.value.length;
|
||||
const e = (el.selectionEnd != null) ? el.selectionEnd : el.value.length;
|
||||
el.value = el.value.slice(0, s) + ins + el.value.slice(e);
|
||||
const pos = s + (caretInTok >= 0 ? caretInTok : ins.length);
|
||||
try { el.setSelectionRange(pos, pos); } catch (_) {}
|
||||
updateFn(_activeFnIdx);
|
||||
}
|
||||
|
||||
/* Отрисовать KaTeX на чипах/клавиатуре + следить за активным полем (идемпотентно). */
|
||||
function _initGraphPanel() {
|
||||
const root = document.getElementById('sim-graph');
|
||||
if (!root || typeof katex === 'undefined') return;
|
||||
root.querySelectorAll('.preset-btn[data-tex], .kp-btn[data-tex]').forEach(b => {
|
||||
if (b.dataset.rendered) return;
|
||||
try { b.innerHTML = katex.renderToString(b.dataset.tex, { throwOnError: false, strict: false, displayMode: false }); b.dataset.rendered = '1'; } catch (_) {}
|
||||
});
|
||||
if (!_graphPanelInit) {
|
||||
_graphPanelInit = true;
|
||||
[0, 1, 2].forEach(i => { const el = document.getElementById('fn' + i); if (el) el.addEventListener('focus', () => { _activeFnIdx = i; }); });
|
||||
}
|
||||
[0, 1, 2].forEach(renderPreview);
|
||||
}
|
||||
|
||||
/* debounced formula update */
|
||||
|
||||
+36
-20
@@ -39,49 +39,65 @@
|
||||
</div>
|
||||
|
||||
<div style="margin-top:8px"></div>
|
||||
<div class="gp-section-title">Вставить</div>
|
||||
<div class="gp-keypad">
|
||||
<button class="kp-btn" data-ins="^2" data-tex="x^2" onclick="graphInsert(this.dataset.ins)">x²</button>
|
||||
<button class="kp-btn" data-ins="^" data-tex="x^n" onclick="graphInsert(this.dataset.ins)">xⁿ</button>
|
||||
<button class="kp-btn" data-ins="sqrt(|)" data-tex="\sqrt{x}" onclick="graphInsert(this.dataset.ins)">√</button>
|
||||
<button class="kp-btn" data-ins="/" data-tex="\tfrac{a}{b}" onclick="graphInsert(this.dataset.ins)">a/b</button>
|
||||
<button class="kp-btn" data-ins="abs(|)" data-tex="|x|" onclick="graphInsert(this.dataset.ins)">|x|</button>
|
||||
<button class="kp-btn" data-ins="pi" data-tex="\pi" onclick="graphInsert(this.dataset.ins)">π</button>
|
||||
<button class="kp-btn" data-ins="sin(|)" data-tex="\sin" onclick="graphInsert(this.dataset.ins)">sin</button>
|
||||
<button class="kp-btn" data-ins="cos(|)" data-tex="\cos" onclick="graphInsert(this.dataset.ins)">cos</button>
|
||||
<button class="kp-btn" data-ins="tg(|)" data-tex="\operatorname{tg}" onclick="graphInsert(this.dataset.ins)">tg</button>
|
||||
<button class="kp-btn" data-ins="ln(|)" data-tex="\ln" onclick="graphInsert(this.dataset.ins)">ln</button>
|
||||
<button class="kp-btn" data-ins="exp(|)" data-tex="e^x" onclick="graphInsert(this.dataset.ins)">eˣ</button>
|
||||
<button class="kp-btn" data-ins="(|)" data-tex="(\;)" onclick="graphInsert(this.dataset.ins)">( )</button>
|
||||
</div>
|
||||
|
||||
<div class="gp-section-title">Примеры</div>
|
||||
|
||||
<div class="gp-preset-group">
|
||||
<div class="gp-preset-label">Линейные / степенные</div>
|
||||
<div class="presets-wrap">
|
||||
<button class="preset-btn" onclick="applyPreset('2x-1')">2x−1</button>
|
||||
<button class="preset-btn" onclick="applyPreset('x^2')">x²</button>
|
||||
<button class="preset-btn" onclick="applyPreset('x^2-4')">x²−4</button>
|
||||
<button class="preset-btn" onclick="applyPreset('x^3-3x')">x³−3x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('x^4-4x^2+3')">x⁴−4x²+3</button>
|
||||
<button class="preset-btn" data-tex="2x-1" onclick="applyPreset('2x-1')">2x−1</button>
|
||||
<button class="preset-btn" data-tex="x^2" onclick="applyPreset('x^2')">x²</button>
|
||||
<button class="preset-btn" data-tex="x^2-4" onclick="applyPreset('x^2-4')">x²−4</button>
|
||||
<button class="preset-btn" data-tex="x^3-3x" onclick="applyPreset('x^3-3x')">x³−3x</button>
|
||||
<button class="preset-btn" data-tex="x^4-4x^2+3" onclick="applyPreset('x^4-4x^2+3')">x⁴−4x²+3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gp-preset-group">
|
||||
<div class="gp-preset-label">Тригонометрия</div>
|
||||
<div class="presets-wrap">
|
||||
<button class="preset-btn" onclick="applyPreset('sin(x)')">sin x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('cos(x)')">cos x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('tg(x)')">tg x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('sin(2x)')">sin 2x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('x*sin(x)')">x·sin x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('sin(x)/x')">sin(x)/x</button>
|
||||
<button class="preset-btn" data-tex="\sin x" onclick="applyPreset('sin(x)')">sin x</button>
|
||||
<button class="preset-btn" data-tex="\cos x" onclick="applyPreset('cos(x)')">cos x</button>
|
||||
<button class="preset-btn" data-tex="\operatorname{tg} x" onclick="applyPreset('tg(x)')">tg x</button>
|
||||
<button class="preset-btn" data-tex="\sin 2x" onclick="applyPreset('sin(2x)')">sin 2x</button>
|
||||
<button class="preset-btn" data-tex="x\,\sin x" onclick="applyPreset('x*sin(x)')">x·sin x</button>
|
||||
<button class="preset-btn" data-tex="\tfrac{\sin x}{x}" onclick="applyPreset('sin(x)/x')">sin(x)/x</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gp-preset-group">
|
||||
<div class="gp-preset-label">Показательные / логарифмы</div>
|
||||
<div class="presets-wrap">
|
||||
<button class="preset-btn" onclick="applyPreset('exp(x)')">eˣ</button>
|
||||
<button class="preset-btn" onclick="applyPreset('2^x')">2ˣ</button>
|
||||
<button class="preset-btn" onclick="applyPreset('ln(x)')">ln x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('log(x)')">log x</button>
|
||||
<button class="preset-btn" data-tex="e^x" onclick="applyPreset('exp(x)')">eˣ</button>
|
||||
<button class="preset-btn" data-tex="2^x" onclick="applyPreset('2^x')">2ˣ</button>
|
||||
<button class="preset-btn" data-tex="\ln x" onclick="applyPreset('ln(x)')">ln x</button>
|
||||
<button class="preset-btn" data-tex="\log x" onclick="applyPreset('log(x)')">log x</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gp-preset-group">
|
||||
<div class="gp-preset-label">Прочие</div>
|
||||
<div class="presets-wrap">
|
||||
<button class="preset-btn" onclick="applyPreset('sqrt(x)')">√x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('1/x')">1/x</button>
|
||||
<button class="preset-btn" onclick="applyPreset('abs(x)')">|x|</button>
|
||||
<button class="preset-btn" onclick="applyPreset('floor(x)')">⌊x⌋</button>
|
||||
<button class="preset-btn" onclick="applyPreset('1/(1+exp(-x))')">σ(x)</button>
|
||||
<button class="preset-btn" data-tex="\sqrt{x}" onclick="applyPreset('sqrt(x)')">√x</button>
|
||||
<button class="preset-btn" data-tex="\tfrac{1}{x}" onclick="applyPreset('1/x')">1/x</button>
|
||||
<button class="preset-btn" data-tex="|x|" onclick="applyPreset('abs(x)')">|x|</button>
|
||||
<button class="preset-btn" data-tex="\lfloor x \rfloor" onclick="applyPreset('floor(x)')">⌊x⌋</button>
|
||||
<button class="preset-btn" data-tex="\sigma(x)" onclick="applyPreset('1/(1+exp(-x))')">σ(x)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user