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

refactor: переработана панель стереометрии — иконки, toggle-ряды, stepper для n

Browse Source
This commit is contained in:
Maxim Dolgolyov
2026-04-14 14:14:37 +03:00
parent d822b705c4
commit e4f7c167eb
1 changed files with 351 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lab.html
+351 -118
View File
@@ -247,8 +247,102 @@
.stereo-fig-btn.active, .stereo-toggle.active, .stereo-sect-btn.active, .stereo-sect-type.active {
border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
}
#stereo-unfold-btn.active, #stereo-measure-btn.active, #stereo-inscribed-btn.active, #stereo-circumscribed-btn.active {
border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
/* stereo panel redesign */
.stereo-panel {
width: 230px; flex-shrink: 0;
background: var(--surface);
border-right: 1.5px solid var(--border);
display: flex; flex-direction: column;
overflow-y: auto; padding: 10px 10px;
}
.stereo-fig-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
margin-bottom: 4px;
}
.st-fig-btn {
display: flex; align-items: center; gap: 5px;
padding: 6px 8px; border-radius: 9px;
border: 1.5px solid var(--border);
background: transparent; color: var(--text-2);
font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden;
}
.st-fig-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; }
.st-fig-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); }
.st-fig-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
.st-fig-btn-wide { grid-column: span 2; }
.st-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 4px; }
.st-tool-btn {
display: flex; align-items: center; gap: 5px;
padding: 6px 8px; border-radius: 9px;
border: 1.5px solid var(--border);
background: transparent; color: var(--text-2);
font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
cursor: pointer; transition: all .13s; white-space: nowrap; overflow: hidden;
}
.st-tool-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; fill: none; }
.st-tool-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); background: rgba(155,93,229,.06); }
.st-tool-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
.st-tool-btn-wide { grid-column: span 2; }
.st-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 2px; }
.st-action-btn {
padding: 5px 6px; border-radius: 8px;
border: 1px solid var(--border);
background: transparent; color: rgba(255,255,255,.45);
font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 600;
cursor: pointer; transition: all .13s; text-align: center;
}
.st-action-btn:hover { border-color: rgba(239,71,111,.4); color: #ef476f; background: rgba(239,71,111,.06); }
.st-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 2px; cursor: pointer; transition: background .13s; border-radius: 7px;
}
.st-toggle-row:hover { background: rgba(255,255,255,.03); }
.st-toggle-label {
font-size: 0.7rem; font-weight: 600; color: var(--text-2);
display: flex; align-items: center; gap: 5px;
}
.st-toggle-label svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; opacity: .6; fill: none; }
.st-toggle {
width: 26px; height: 14px; border-radius: 7px;
background: rgba(255,255,255,.1); border: 1.5px solid var(--border-h);
position: relative; transition: background .15s; flex-shrink: 0; cursor: pointer;
}
.st-toggle::after {
content: ''; position: absolute; left: 2px; top: 50%;
transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,.4); transition: all .15s;
}
.st-toggle.on { background: var(--violet); border-color: var(--violet); }
.st-toggle.on::after { left: calc(100% - 10px); background: #fff; }
.st-n-ctrl {
display: flex; align-items: center; gap: 5px;
border: 1.5px solid var(--border); border-radius: 9px;
padding: 4px 6px;
}
.st-n-btn {
width: 20px; height: 20px; border-radius: 5px;
border: 1px solid var(--border-h);
background: transparent; color: var(--text-2);
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .12s;
}
.st-n-btn svg { width: 11px; height: 11px; stroke: currentColor; }
.st-n-btn:hover { background: rgba(155,93,229,.1); }
.st-n-val { font-size: 0.75rem; font-weight: 700; color: var(--text); min-width: 14px; text-align: center; }
.st-n-label { font-size: 0.68rem; color: var(--text-3); flex: 1; }
#stereo-unfold-btn.active, #stereo-measure-btn.active,
#stereo-point-btn.active, #stereo-connect-btn.active,
#stereo-mark-tick-btn.active, #stereo-mark-par-btn.active,
#stereo-derive-mid-btn.active, #stereo-derive-fc-btn.active, #stereo-derive-alt-btn.active, #stereo-derive-cen-btn.active,
#stereo-angle-edge-btn.active, #stereo-angle-lp-btn.active, #stereo-angle-dih-btn.active, #stereo-angle-pp-btn.active, #stereo-angle-skew-btn.active {
border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.12) !important;
}
.gp-preset-group { margin-bottom: 8px; }
@@ -3546,77 +3640,174 @@
<!-- ── STEREO sim body ── -->
<div id="sim-stereo" class="sim-body-wrap" style="display:none">
<div class="graph-panel" style="overflow-y:auto;max-height:100%">
<div class="stereo-panel">
<div class="gp-section-title">Фигура</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
<button class="gp-btn stereo-fig-btn active" onclick="setStereoFigure('cube',this)">Куб</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('parallelepiped',this)">Параллелепипед</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('pyramid',this)">Пирамида</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('tetrahedron',this)">Тетраэдр</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cylinder',this)">Цилиндр</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cone',this)">Конус</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('trunccone',this)">Усечённый конус</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('sphere',this)">Сфера</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('prism',this)">Призма</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('truncpyramid',this)">Усеч. пирамида</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('octahedron',this)">Октаэдр</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('icosahedron',this)">Икосаэдр</button>
<button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('dodecahedron',this)">Додекаэдр</button>
<!-- ── Фигуры ── -->
<div class="gp-section-title" style="margin-bottom:6px">Многогранники</div>
<div class="stereo-fig-grid">
<button class="st-fig-btn stereo-fig-btn active" onclick="setStereoFigure('cube',this)" title="Куб">
<svg viewBox="0 0 24 24"><rect x="3" y="7" width="12" height="12"/><path d="M3 7l4-4h12v12l-4 4"/><path d="M15 3v12M3 19l4-4"/></svg>Куб
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('parallelepiped',this)" title="Прямоугольный параллелепипед">
<svg viewBox="0 0 24 24"><rect x="2" y="8" width="13" height="11"/><path d="M2 8l4-5h13v11l-4 5"/><path d="M15 3v11M2 19l4-5"/></svg>Параллел.
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('prism',this)" title="Правильная призма">
<svg viewBox="0 0 24 24"><polygon points="12,3 3,8 3,19 12,21 21,19 21,8"/><line x1="12" y1="3" x2="12" y2="21"/></svg>Призма
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('pyramid',this)" title="Правильная пирамида">
<svg viewBox="0 0 24 24"><polygon points="12,2 22,20 2,20"/><line x1="12" y1="2" x2="12" y2="20"/></svg>Пирамида
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('truncpyramid',this)" title="Усечённая пирамида">
<svg viewBox="0 0 24 24"><polygon points="6,6 18,6 22,20 2,20"/><line x1="9" y1="6" x2="4" y2="20"/><line x1="15" y1="6" x2="20" y2="20"/></svg>Усеч. пир.
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('tetrahedron',this)" title="Правильный тетраэдр">
<svg viewBox="0 0 24 24"><polygon points="12,2 22,20 2,20"/><line x1="12" y1="2" x2="12" y2="20"/><line x1="2" y1="20" x2="12" y2="14"/><line x1="22" y1="20" x2="12" y2="14"/></svg>Тетраэдр
</button>
</div>
<div class="gp-section-title">Параметры</div>
<div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Правильные многогранники</div>
<div class="stereo-fig-grid">
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('octahedron',this)" title="Правильный октаэдр">
<svg viewBox="0 0 24 24"><polygon points="12,2 22,12 12,22 2,12"/><line x1="12" y1="2" x2="2" y2="12"/><line x1="12" y1="2" x2="22" y2="12"/><line x1="2" y1="12" x2="12" y2="22"/><line x1="22" y1="12" x2="12" y2="22"/></svg>Октаэдр
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('icosahedron',this)" title="Правильный икосаэдр">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><polygon points="12,3 20,8 18,17 6,17 4,8"/><line x1="12" y1="3" x2="12" y2="21"/></svg>Икосаэдр
</button>
<button class="st-fig-btn stereo-fig-btn st-fig-btn-wide" onclick="setStereoFigure('dodecahedron',this)" title="Правильный додекаэдр">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-dasharray="4,2"/><polygon points="12,2 20,8 17,17 7,17 4,8"/></svg>Додекаэдр
</button>
</div>
<div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Тела вращения</div>
<div class="stereo-fig-grid">
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('cylinder',this)" title="Цилиндр">
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><ellipse cx="12" cy="19" rx="9" ry="3"/><line x1="3" y1="5" x2="3" y2="19"/><line x1="21" y1="5" x2="21" y2="19"/></svg>Цилиндр
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('cone',this)" title="Конус">
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="19" rx="9" ry="3"/><line x1="3" y1="19" x2="12" y2="4"/><line x1="21" y1="19" x2="12" y2="4"/></svg>Конус
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('trunccone',this)" title="Усечённый конус">
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="18" rx="9" ry="3"/><ellipse cx="12" cy="7" rx="5" ry="2"/><line x1="3" y1="18" x2="7" y2="7"/><line x1="21" y1="18" x2="17" y2="7"/></svg>Усеч. конус
</button>
<button class="st-fig-btn stereo-fig-btn" onclick="setStereoFigure('sphere',this)" title="Шар">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="9" ry="3"/></svg>Шар
</button>
</div>
<!-- ── Параметры ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Параметры</div>
<div id="stereo-params">
<div class="stereo-sl-row" id="sp-a-row">
<label>a <span id="sp-a-val">4</span></label>
<label>Сторона <b>a</b> <span id="sp-a-val">4</span></label>
<input type="range" id="sl-sp-a" min="1" max="10" step="0.5" value="4" oninput="stereoParamChange('a',this.value)">
</div>
<div class="stereo-sl-row" id="sp-b-row" style="display:none">
<label>b <span id="sp-b-val">3</span></label>
<label>Сторона <b>b</b> <span id="sp-b-val">3</span></label>
<input type="range" id="sl-sp-b" min="1" max="10" step="0.5" value="3" oninput="stereoParamChange('b',this.value)">
</div>
<div class="stereo-sl-row" id="sp-c-row" style="display:none">
<label>c <span id="sp-c-val">5</span></label>
<label>Сторона <b>c</b> <span id="sp-c-val">5</span></label>
<input type="range" id="sl-sp-c" min="1" max="10" step="0.5" value="5" oninput="stereoParamChange('c',this.value)">
</div>
<div class="stereo-sl-row" id="sp-h-row" style="display:none">
<label>h <span id="sp-h-val">5</span></label>
<label>Высота <b>h</b> <span id="sp-h-val">5</span></label>
<input type="range" id="sl-sp-h" min="1" max="12" step="0.5" value="5" oninput="stereoParamChange('h',this.value)">
</div>
<div class="stereo-sl-row" id="sp-r-row" style="display:none">
<label>r <span id="sp-r-val">2</span></label>
<label>Радиус <b>r</b> <span id="sp-r-val">2</span></label>
<input type="range" id="sl-sp-r" min="0.5" max="8" step="0.5" value="2" oninput="stereoParamChange('r',this.value)">
</div>
<div class="stereo-sl-row" id="sp-R-row" style="display:none">
<label>R <span id="sp-R-val">3</span></label>
<label>Радиус осн. <b>R</b> <span id="sp-R-val">3</span></label>
<input type="range" id="sl-sp-R" min="0.5" max="8" step="0.5" value="3" oninput="stereoParamChange('R',this.value)">
</div>
<div class="stereo-sl-row" id="sp-n-row" style="display:none">
<label>n <span id="sp-n-val">4</span></label>
<input type="range" id="sl-sp-n" min="3" max="12" step="1" value="4" oninput="stereoParamChange('n',this.value)">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<span style="font-size:0.72rem;color:var(--text-2)">Граней основания <b>n</b></span>
<div class="st-n-ctrl">
<button class="st-n-btn" onclick="stereoNChange(-1)"><svg viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round"/></svg></button>
<span class="st-n-val" id="sp-n-val">4</span>
<button class="st-n-btn" onclick="stereoNChange(+1)"><svg viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round"/></svg></button>
</div>
</div>
</div>
</div>
<div class="stereo-sl-row" style="margin-top:6px">
<div class="stereo-sl-row" style="margin-top:2px">
<label>Прозрачность <span id="sp-opacity-val">0.3</span></label>
<input type="range" id="sl-sp-opacity" min="0" max="1" step="0.05" value="0.3" oninput="stereoOpacityChange(this.value)">
</div>
<div class="gp-section-title" style="margin-top:10px">Отображение</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px">
<button class="gp-btn stereo-toggle active" data-layer="edges" onclick="stereoToggle('edges',this)">Рёбра</button>
<button class="gp-btn stereo-toggle active" data-layer="vertices" onclick="stereoToggle('vertices',this)">Вершины</button>
<button class="gp-btn stereo-toggle active" data-layer="labels" onclick="stereoToggle('labels',this)">Метки</button>
<button class="gp-btn stereo-toggle active" data-layer="axes" onclick="stereoToggle('axes',this)">Оси</button>
<button class="gp-btn stereo-toggle active" data-layer="grid" onclick="stereoToggle('grid',this)">Сетка</button>
<!-- ── Отображение ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Отображение</div>
<div onclick="stereoToggleSt('edges',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/></svg>Рёбра</span>
<div class="st-toggle on" id="stg-edges"></div>
</div>
<div onclick="stereoToggleSt('vertices',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>Вершины</span>
<div class="st-toggle on" id="stg-vertices"></div>
</div>
<div onclick="stereoToggleSt('labels',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h10M4 17h7"/></svg>Подписи</span>
<div class="st-toggle on" id="stg-labels"></div>
</div>
<div onclick="stereoToggleSt('axes',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>Оси</span>
<div class="st-toggle on" id="stg-axes"></div>
</div>
<div onclick="stereoToggleSt('grid',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>Сетка</span>
<div class="st-toggle on" id="stg-grid"></div>
</div>
<div class="gp-section-title" style="margin-top:8px">Сечение</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn stereo-sect-btn" id="sect-toggle" onclick="stereoSectionToggle(this)">Показать</button>
<button class="gp-btn stereo-sect-type" data-type="horizontal" onclick="stereoSectionType('horizontal',this)">Горизонт.</button>
<button class="gp-btn stereo-sect-type" data-type="diagonal" onclick="stereoSectionType('diagonal',this)">Диагональ</button>
<button class="gp-btn stereo-sect-type" data-type="custom" onclick="stereoSectionType('custom',this)">По точкам</button>
<!-- ── Элементы фигуры ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Элементы</div>
<div onclick="stereoToggleElem('height',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="4,2"/><line x1="9" y1="21" x2="15" y2="21"/></svg>Высота</span>
<div class="st-toggle" id="stg-height"></div>
</div>
<div onclick="stereoToggleElem('apothem',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="6" y1="19" x2="18" y2="19"/></svg>Апофема</span>
<div class="st-toggle" id="stg-apothem"></div>
</div>
<div onclick="stereoToggleElem('diagonals',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="3" x2="21" y2="21" stroke-dasharray="4,2"/><line x1="21" y1="3" x2="3" y2="21" stroke-dasharray="4,2"/></svg>Диагонали</span>
<div class="st-toggle" id="stg-diagonals"></div>
</div>
<div onclick="stereoToggleElem('midpoints',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>Середины рёбер</span>
<div class="st-toggle" id="stg-midpoints"></div>
</div>
<div onclick="stereoToggleElem('inscribed',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" stroke-dasharray="3,2"/><rect x="3" y="3" width="18" height="18"/></svg>Вписанная сфера</span>
<div class="st-toggle" id="stg-inscribed"></div>
</div>
<div onclick="stereoToggleElem('circumscribed',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-dasharray="4,2"/><polygon points="6,18 18,18 12,6"/></svg>Описанная сфера</span>
<div class="st-toggle" id="stg-circumscribed"></div>
</div>
<div onclick="stereoToggleElem('edgelengths',this.querySelector('.st-toggle'))" class="st-toggle-row">
<span class="st-toggle-label"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="9" x2="4" y2="15"/><line x1="20" y1="9" x2="20" y2="15"/></svg>Длины рёбер</span>
<div class="st-toggle" id="stg-edgelengths"></div>
</div>
<div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
<div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
<!-- ── Сечение ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Сечение</div>
<div class="st-tool-grid" style="margin-bottom:4px">
<button class="st-tool-btn stereo-sect-btn st-tool-btn-wide" id="sect-toggle" onclick="stereoSectionToggle(this)">
<svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18" stroke-dasharray="4,2"/></svg>Показать сечение
</button>
<button class="st-tool-btn stereo-sect-type active" data-type="horizontal" onclick="stereoSectionType('horizontal',this)">
<svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/></svg>Горизонт.
</button>
<button class="st-tool-btn stereo-sect-type" data-type="diagonal" onclick="stereoSectionType('diagonal',this)">
<svg viewBox="0 0 24 24"><line x1="4" y1="18" x2="20" y2="6"/></svg>Диагональ
</button>
<button class="st-tool-btn stereo-sect-type st-tool-btn-wide" data-type="custom" onclick="stereoSectionType('custom',this)">
<svg viewBox="0 0 24 24"><circle cx="5" cy="19" r="2" fill="currentColor"/><circle cx="12" cy="5" r="2" fill="currentColor"/><circle cx="19" cy="15" r="2" fill="currentColor"/><polyline points="5,19 12,5 19,15 5,19"/></svg>По 3+ точкам
</button>
</div>
<div class="stereo-sl-row">
<label>Высота <span id="sp-sect-val">50%</span></label>
@@ -3626,86 +3817,94 @@
<label>Наклон <span id="sp-angle-val">50%</span></label>
<input type="range" id="sl-sp-angle" min="0" max="100" step="1" value="50" oninput="stereoSectionAngle(this.value)">
</div>
<div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
<div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
<div class="gp-section-title" style="margin-top:8px">Точки и линии</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-point-btn" onclick="stereoPointMode(this)">Поставить точку</button>
<button class="gp-btn" id="stereo-connect-btn" onclick="stereoConnectMode(this)">Соединить</button>
<button class="gp-btn" id="stereo-undo-pt-btn" onclick="stereoUndoPoint()">Отменить</button>
<button class="gp-btn" id="stereo-clear-pts-btn" onclick="stereoClearPoints()">Очистить</button>
<!-- ── Инструменты ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Инструменты</div>
<div class="st-tool-grid">
<button class="st-tool-btn" id="stereo-point-btn" onclick="stereoPointMode(this)" title="Поставить точку на ребро">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/><line x1="3" y1="12" x2="21" y2="12"/></svg>Точка
</button>
<button class="st-tool-btn" id="stereo-connect-btn" onclick="stereoConnectMode(this)" title="Соединить две точки отрезком">
<svg viewBox="0 0 24 24"><circle cx="5" cy="19" r="2.5" fill="currentColor"/><circle cx="19" cy="5" r="2.5" fill="currentColor"/><line x1="5" y1="19" x2="19" y2="5" stroke-dasharray="4,2"/></svg>Соединить
</button>
<button class="st-tool-btn" id="stereo-measure-btn" onclick="stereoMeasure(this)" title="Измерить расстояние между двумя точками">
<svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="9" x2="4" y2="15"/><line x1="20" y1="9" x2="20" y2="15"/></svg>Измерение
</button>
<button class="st-tool-btn" id="stereo-unfold-btn" onclick="stereoUnfold(this)" title="Развернуть в сетку">
<svg viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="11"/><path d="M8 10V6a4 4 0 0 1 8 0v4"/></svg>Развёртка
</button>
</div>
<div id="points-info" style="font-size:0.68rem;color:rgba(255,255,255,0.5);margin-bottom:4px"></div>
<div class="st-action-grid" style="margin-top:3px">
<button class="st-action-btn" onclick="stereoUndoPoint()">Удалить точку</button>
<button class="st-action-btn" onclick="stereoClearPoints()">Очист. точки</button>
<button class="st-action-btn" onclick="stereoMeasureUndo()">Удалить изм.</button>
<button class="st-action-btn" onclick="stereoMeasureClear()">Очист. изм.</button>
</div>
<div id="points-info" style="font-size:0.65rem;color:rgba(255,255,255,0.4);margin-top:2px"></div>
<div class="gp-section-title" style="margin-top:8px">Элементы фигуры</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-height-btn" onclick="stereoToggleHeight(this)">Высота</button>
<button class="gp-btn" id="stereo-apothem-btn" onclick="stereoToggleApothem(this)">Апофема</button>
<button class="gp-btn" id="stereo-diag-btn" onclick="stereoToggleDiag(this)">Диагонали</button>
<button class="gp-btn" id="stereo-mid-btn" onclick="stereoToggleMid(this)">Середины</button>
<button class="gp-btn" id="stereo-inscribed-btn" onclick="stereoInscribed(this)">Вписанная</button>
<button class="gp-btn" id="stereo-circumscribed-btn" onclick="stereoCircumscribed(this)">Описанная</button>
<!-- ── Метки рёбер ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Метки рёбер</div>
<div class="st-tool-grid">
<button class="st-tool-btn" id="stereo-mark-tick-btn" onclick="stereoMarkMode('ticks',this)" title="Засечки равных рёбер — кликните ребро (до 3 штрихов)">
<svg viewBox="0 0 24 24"><line x1="5" y1="19" x2="19" y2="5"/><line x1="9" y1="9" x2="11" y2="11"/><line x1="13" y1="13" x2="15" y2="15"/></svg>Засечки =
</button>
<button class="st-tool-btn" id="stereo-mark-par-btn" onclick="stereoMarkMode('parallel',this)" title="Метки параллельных рёбер — кликните ребро">
<svg viewBox="0 0 24 24"><line x1="3" y1="8" x2="21" y2="8"/><line x1="3" y1="16" x2="21" y2="16"/><polyline points="15 5 18 8 15 11"/><polyline points="15 13 18 16 15 19"/></svg>Паралл. →
</button>
</div>
<div class="st-action-grid" style="margin-top:3px">
<button class="st-action-btn st-tool-btn-wide" onclick="stereoMarkClear()" style="grid-column:span 2">Очистить метки</button>
</div>
<div class="gp-section-title" style="margin-top:8px">Метки рёбер</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-mark-tick-btn" onclick="stereoMarkMode('ticks',this)" title="Засечки равных рёбер — кликните на ребро (до 3 штрихов)">Засечки</button>
<button class="gp-btn" id="stereo-mark-par-btn" onclick="stereoMarkMode('parallel',this)" title="Метки параллельных рёбер — кликните на ребро (до 3 стрелок)">Параллельные</button>
<button class="gp-btn" id="stereo-edge-len-btn" onclick="stereoToggleEdgeLengths(this)" title="Показать длины всех рёбер">Длины рёбер</button>
<button class="gp-btn" onclick="stereoMarkClear()">Очистить</button>
<!-- ── Производные точки ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Производные точки</div>
<div class="st-tool-grid">
<button class="st-tool-btn" id="stereo-derive-mid-btn" onclick="stereoDerive('midpoint',this)" title="Середина ребра — кликните ребро">
<svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><circle cx="12" cy="12" r="3.5" fill="currentColor"/></svg>Сер. ребра
</button>
<button class="st-tool-btn" id="stereo-derive-fc-btn" onclick="stereoDerive('face_centroid',this)" title="Центр грани — кликните грань">
<svg viewBox="0 0 24 24"><polygon points="12,3 21,21 3,21"/><circle cx="12" cy="15" r="2.5" fill="currentColor"/></svg>Центр грани
</button>
<button class="st-tool-btn" id="stereo-derive-alt-btn" onclick="stereoDerive('alt_foot',this)" title="Основание высоты: вершина → ребро">
<svg viewBox="0 0 24 24"><line x1="3" y1="20" x2="21" y2="20"/><line x1="10" y1="4" x2="10" y2="20" stroke-dasharray="4,2"/><path d="M10 20 L13 20 L13 17" fill="none"/></svg>Осн. высоты
</button>
<button class="st-tool-btn" id="stereo-derive-cen-btn" onclick="stereoDerive('solid_centroid',this)" title="Центроид тела — точка G">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18"/><circle cx="12" cy="12" r="3" fill="currentColor"/><line x1="3" y1="3" x2="21" y2="21" stroke-dasharray="4,2" opacity=".4"/><line x1="21" y1="3" x2="3" y2="21" stroke-dasharray="4,2" opacity=".4"/></svg>Центроид G
</button>
</div>
<div class="st-action-grid" style="margin-top:3px">
<button class="st-action-btn" onclick="stereoDeriveUndo()">Удалить послед.</button>
<button class="st-action-btn" onclick="stereoDeriveClear()">Очистить</button>
</div>
<div class="gp-section-title" style="margin-top:8px">Производные точки</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-derive-mid-btn" onclick="stereoDerive('midpoint',this)" title="Середина ребра — кликните на ребро">Середина ребра</button>
<button class="gp-btn" id="stereo-derive-fc-btn" onclick="stereoDerive('face_centroid',this)" title="Центр грани — кликните на грань">Центр грани</button>
<button class="gp-btn" id="stereo-derive-alt-btn" onclick="stereoDerive('alt_foot',this)" title="Основание высоты — кликните вершину, затем точку ребра">Осн. высоты</button>
<button class="gp-btn" id="stereo-derive-cen-btn" onclick="stereoDerive('solid_centroid',this)" title="Центроид тела — вставляется автоматически">Центроид тела</button>
<button class="gp-btn" onclick="stereoDeriveUndo()">Удалить послед.</button>
<button class="gp-btn" onclick="stereoDeriveClear()">Очистить</button>
<!-- ── Углы и расстояния ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:6px">Углы и расстояния</div>
<div class="st-tool-grid">
<button class="st-tool-btn" id="stereo-angle-edge-btn" onclick="stereoAngleMode('edge',this)" title="Угол между рёбрами: 3 точки A-B-C">
<svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="4" y2="5"/><line x1="12" y1="19" x2="20" y2="6"/><path d="M7 16 Q12 13 17 15" fill="none" stroke-dasharray="3,2"/></svg>∠ рёбер
</button>
<button class="st-tool-btn" id="stereo-angle-lp-btn" onclick="stereoAngleMode('linePlane',this)" title="Угол прямой к плоскости: 2 точки → грань">
<svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/><ellipse cx="12" cy="18" rx="9" ry="3" fill="none" opacity=".6"/></svg>∠ пр.–пл.
</button>
<button class="st-tool-btn" id="stereo-angle-dih-btn" onclick="stereoAngleMode('dihedral',this)" title="Двугранный угол: 2 точки общего ребра">
<svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="21"/><line x1="3" y1="12" x2="12" y2="21"/><line x1="21" y1="7" x2="12" y2="21"/></svg>∠ двугр.
</button>
<button class="st-tool-btn" id="stereo-angle-pp-btn" onclick="stereoAngleMode('pointPlane',this)" title="Расстояние точка–плоскость">
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="18" rx="9" ry="3" fill="none"/><line x1="12" y1="5" x2="12" y2="18" stroke-dasharray="3,2"/><circle cx="12" cy="5" r="2.5" fill="currentColor"/></svg>d(т→пл)
</button>
<button class="st-tool-btn st-tool-btn-wide" id="stereo-angle-skew-btn" onclick="stereoAngleMode('skewLines',this)" title="Угол и расстояние скрещивающихся прямых: P1,P2→P3,P4">
<svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="12" opacity=".5"/><circle cx="12" cy="9" r="2" fill="currentColor"/></svg>∠ скрещивающихся прямых
</button>
</div>
<div class="gp-section-title" style="margin-top:8px">Инструменты</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-unfold-btn" onclick="stereoUnfold(this)">Развёртка</button>
<button class="gp-btn" id="stereo-measure-btn" onclick="stereoMeasure(this)">Измерение</button>
<button class="gp-btn" onclick="stereoMeasureUndo()">Удалить посл.</button>
<button class="gp-btn" onclick="stereoMeasureClear()">Очистить</button>
<div class="st-action-grid" style="margin-top:3px">
<button class="st-action-btn" style="grid-column:span 2" onclick="stereoAngleClear()">Очистить углы</button>
</div>
<div id="angle-hint" style="font-size:0.63rem;color:rgba(255,255,255,0.38);margin-top:3px;line-height:1.4"></div>
<div class="gp-section-title" style="margin-top:8px">Углы и расстояния</div>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
<button class="gp-btn" id="stereo-angle-edge-btn" onclick="stereoAngleMode('edge', this)">∠ рёбер</button>
<button class="gp-btn" id="stereo-angle-lp-btn" onclick="stereoAngleMode('linePlane', this)">∠ прям.–пл.</button>
<button class="gp-btn" id="stereo-angle-dih-btn" onclick="stereoAngleMode('dihedral', this)">∠ двугранный</button>
<button class="gp-btn" id="stereo-angle-pp-btn" onclick="stereoAngleMode('pointPlane', this)">d(т<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>пл)</button>
<button class="gp-btn" id="stereo-angle-skew-btn" onclick="stereoAngleMode('skewLines', this)">∠ скрещ. прям.</button>
<button class="gp-btn" id="stereo-angle-clear-btn" onclick="stereoAngleClear()">Очистить</button>
</div>
<div id="angle-hint" style="font-size:0.65rem;color:rgba(255,255,255,0.4);margin-bottom:4px"></div>
<!-- ── Формулы ── -->
<div class="gp-section-title" style="margin-top:8px;margin-bottom:4px">Формулы</div>
<div id="stereo-formulas" style="font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:6px"></div>
<div class="gp-section-title" style="margin-top:10px">Формулы</div>
<div id="stereo-formulas" style="font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.5"></div>
<div class="gp-section-title" style="margin-top:10px">Управление</div>
<div class="tp-text" style="font-size:0.72rem">
Вращение: зажмите и тяните<br>
Зум: колёсико мыши<br>
Точка: включите режим, кликните на ребро<br>
Соединить: кликните 2 точки/вершины<br>
По точкам: поставьте 3+ точки <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> сечение<br>
∠ рёбер: 3 точки (A-B-C), угол в вершине B<br>
∠ прям.–пл.: 2 точки (прямая), затем грань<br>
∠ двугранный: 2 точки общего ребра<br>
d(т<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>пл): точка, затем грань — перпендикуляр<br>
∠ скрещ.: 4 точки — P1,P2 (пр.1), P3,P4 (пр.2)<br>
Засечки/Парал.: кликайте рёбра (0→1→2→3→0)<br>
Середина ребра: клик на ребро<br>
Центр грани: клик на грань<br>
Осн. высоты: вершина → точка/ребро<br>
Координаты: наведите на вершину
</div>
</div>
<div class="graph-canvas-outer">
<div class="graph-canvas-wrap" id="stereo-container"></div>
@@ -8121,16 +8320,14 @@
stereoSim.setFigure(type);
_stereoShowParams(type);
_stereoUpdateFormulas();
// reset section/unfold/sphere buttons
// reset toggles and tool buttons
document.getElementById('sect-toggle').classList.remove('active');
document.getElementById('stereo-unfold-btn').classList.remove('active');
document.getElementById('stereo-measure-btn').classList.remove('active');
document.getElementById('stereo-inscribed-btn').classList.remove('active');
document.getElementById('stereo-circumscribed-btn').classList.remove('active');
document.getElementById('stereo-height-btn').classList.remove('active');
document.getElementById('stereo-apothem-btn').classList.remove('active');
document.getElementById('stereo-diag-btn').classList.remove('active');
document.getElementById('stereo-mid-btn').classList.remove('active');
// reset element toggles
['stg-height','stg-apothem','stg-diagonals','stg-midpoints','stg-inscribed','stg-circumscribed','stg-edgelengths'].forEach(id => {
document.getElementById(id)?.classList.remove('on');
});
_stereoDeactivateTools();
}
}
@@ -8158,6 +8355,7 @@
if (stereoSim) stereoSim.setOpacity(val);
}
// legacy (used nowhere now but kept for safety)
function stereoToggle(layer, btn) {
const on = !btn.classList.contains('active');
btn.classList.toggle('active', on);
@@ -8169,6 +8367,41 @@
if (layer === 'grid') stereoSim.toggleGrid(on);
}
// new toggle-row style
function stereoToggleSt(layer, toggle) {
const on = !toggle.classList.contains('on');
toggle.classList.toggle('on', on);
if (!stereoSim) return;
if (layer === 'edges') stereoSim.toggleEdges(on);
if (layer === 'vertices') stereoSim.toggleVertices(on);
if (layer === 'labels') stereoSim.toggleLabels(on);
if (layer === 'axes') stereoSim.toggleAxes(on);
if (layer === 'grid') stereoSim.toggleGrid(on);
}
function stereoToggleElem(layer, toggle) {
const on = !toggle.classList.contains('on');
toggle.classList.toggle('on', on);
if (!stereoSim) return;
if (layer === 'height') stereoSim.toggleHeight(on);
if (layer === 'apothem') stereoSim.toggleApothem(on);
if (layer === 'diagonals') stereoSim.toggleDiagonals(on);
if (layer === 'midpoints') stereoSim.toggleMidpoints(on);
if (layer === 'inscribed') stereoSim.toggleInscribed(on);
if (layer === 'circumscribed') stereoSim.toggleCircumscribed(on);
if (layer === 'edgelengths') stereoSim.toggleEdgeLengths(on);
}
// n-stepper for prism/pyramid
function stereoNChange(delta) {
if (!stereoSim) return;
const cur = stereoSim.params.n || 4;
const nv = Math.max(3, Math.min(12, cur + delta));
document.getElementById('sp-n-val').textContent = nv;
stereoSim.setParam('n', nv);
_stereoUpdateFormulas();
}
function stereoSectionToggle(btn) {
const on = !btn.classList.contains('active');
btn.classList.toggle('active', on);