feat: Phase 4 планиметрии — симметрия (reflect) + правильный n-угольник (ngon)

- GeoEngine: _dependsOn/recompute для constr='reflect' и 'ngon_vertex'
- reflect: производная точка-отражение (P'=2·foot-P), зависит от axis+srcPt
- ngon: правильный n-угольник по центру и вершине; вершины v1..vn-1 = derived
  points (constr='ngon_vertex', хранят srcCenter/srcVertex/k/n); при движении
  центра/вершины все вершины автоматически пересчитываются
- GeoSim: _ngonSides=6, setNgonSides(n), инструменты 'reflect'/'ngon' в _handleToolClick
- lab.html: кнопки Симметрия и n-угольник, +/- контроллер сторон, хинты Phase 2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/js/labs/geometry.js

@@ -170,12 +170,13 @@ class GeoEngine {
         if (!obj.derived) return false;
         if (obj.constr === 'midpoint')  return obj.srcA === id || obj.srcB === id;
         if (obj.constr === 'intersect') return obj.src1 === id || obj.src2 === id;
-        if (obj.constr === 'foot') {
+        if (obj.constr === 'foot' || obj.constr === 'reflect') {
           if (obj.srcPt === id || obj.srcLine === id) return true;
           // Если srcLine — обычная прямая, зависим и от её точек
           const sl = this._objects.get(obj.srcLine);
           return !!(sl && (sl.p1Id === id || sl.p2Id === id));
         }
+        if (obj.constr === 'ngon_vertex') return obj.srcCenter === id || obj.srcVertex === id;
         return false;
       case 'derived_line':
         switch (obj.constr) {
@@ -208,7 +209,7 @@ class GeoEngine {
           if (pt) { obj.x = pt.x; obj.y = pt.y; obj.valid = true; }
           else obj.valid = false;
         }
-      } else if (obj.constr === 'foot') {
+      } else if (obj.constr === 'foot' || obj.constr === 'reflect') {
         const srcPt = _g(obj.srcPt);
         const sl    = _g(obj.srcLine);
         if (!srcPt || !sl) return;
@@ -221,8 +222,22 @@ class GeoEngine {
         }
         if (L1 && L2) {
           const f = gFoot({ x: srcPt.x, y: srcPt.y }, L1, L2);
-          obj.x = f.x; obj.y = f.y;
+          if (obj.constr === 'foot') {
+            obj.x = f.x; obj.y = f.y;
+          } else {
+            // reflect: P' = 2*foot - P
+            obj.x = 2*f.x - srcPt.x;
+            obj.y = 2*f.y - srcPt.y;
+          }
         }
+      } else if (obj.constr === 'ngon_vertex') {
+        const center = _g(obj.srcCenter), v0 = _g(obj.srcVertex);
+        if (!center || !v0) return;
+        const angle = 2 * Math.PI * obj.k / obj.n;
+        const dx = v0.x - center.x, dy = v0.y - center.y;
+        const cos_a = Math.cos(angle), sin_a = Math.sin(angle);
+        obj.x = center.x + dx*cos_a - dy*sin_a;
+        obj.y = center.y + dx*sin_a + dy*cos_a;
       }
     } else if (obj.type === 'circle' && obj.derived) {
       const pA = _g(obj.ptA), pB = _g(obj.ptB), pC = _g(obj.ptC);
@@ -370,9 +385,14 @@ class GeoSim {
     this.onHintChange  = null; // cb(tool, phase) — уведомить UI о смене подсказки
 
     this._labelCounter = 0;
+    this._ngonSides    = 6;  // для инструмента правильного многоугольника
     this._bindEvents();
   }
 
+  setNgonSides(n) {
+    this._ngonSides = Math.max(3, Math.min(20, n));
+  }
+
   /* ── Инициализация ─────────────────────────────────────────── */
   fit() {
     const c = this.canvas;
@@ -1499,6 +1519,80 @@ class GeoSim {
         }
         break;
       }
+
+      /* ══ Phase 4: reflect, ngon ══ */
+
+      case 'reflect': {
+        if (!this._pendingLineRef) {
+          // Первый клик: выбрать ось симметрии (прямую/отрезок)
+          const hit = this._hitTestLine(px, py);
+          if (hit) {
+            this._pendingLineRef = hit;
+            if (this.onHintChange) this.onHintChange('reflect', 2);
+          }
+        } else {
+          // Второй клик: точка, которую отражаем
+          this._pushUndo();
+          const srcPt = this._ensurePoint(snapped);
+          const sl = this._pendingLineRef;
+          let L1, L2;
+          if (sl.type === 'derived_line') {
+            L1 = { x: sl.ptX, y: sl.ptY };
+            L2 = { x: sl.ptX + sl.dirX, y: sl.ptY + sl.dirY };
+          } else {
+            L1 = this._mpt(sl.p1Id); L2 = this._mpt(sl.p2Id);
+          }
+          if (L1 && L2) {
+            const f   = gFoot({ x: srcPt.x, y: srcPt.y }, L1, L2);
+            const lbl = this._nextLabel();
+            this.eng.add({
+              type: 'point', derived: true, constr: 'reflect',
+              srcLine: sl.id, srcPt: srcPt.id,
+              x: 2*f.x - srcPt.x,
+              y: 2*f.y - srcPt.y,
+              label: lbl, style: { color: '#F472B6', size: 4 }
+            });
+          }
+          this._pendingLineRef = null; this._pending = []; this._preview = null;
+          if (this.onUpdate) this.onUpdate(this.getStats());
+        }
+        break;
+      }
+
+      case 'ngon': {
+        this._pending.push(snapped);
+        if (this._pending.length === 2) {
+          this._pushUndo();
+          const n      = this._ngonSides;
+          const center = this._ensurePoint(this._pending[0]);
+          const v0     = this._ensurePoint(this._pending[1]);
+          const col    = '#D4B96B';
+          const ptIds  = [v0.id];
+
+          for (let k = 1; k < n; k++) {
+            const angle = 2 * Math.PI * k / n;
+            const dx = v0.x - center.x, dy = v0.y - center.y;
+            const cos_a = Math.cos(angle), sin_a = Math.sin(angle);
+            const vk = this.eng.add({
+              type: 'point', derived: true, constr: 'ngon_vertex',
+              srcCenter: center.id, srcVertex: v0.id, k, n,
+              x: center.x + dx*cos_a - dy*sin_a,
+              y: center.y + dx*sin_a + dy*cos_a,
+              label: '', style: { color: col, size: 4 }
+            });
+            ptIds.push(vk.id);
+          }
+
+          this.eng.add({
+            type: 'polygon', pointIds: ptIds,
+            style: { color: col, fillColor: 'rgba(212,185,107,0.08)' }
+          });
+
+          this._pending = []; this._preview = null;
+          if (this.onUpdate) this.onUpdate(this.getStats());
+        }
+        break;
+      }
     }
     this.render();
   }

frontend/lab.html

@@ -672,6 +672,25 @@
     grid-column: span 2;
   }
 
+  .geo-ngon-ctrl {
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    border: 1.5px solid var(--border); border-radius: 10px;
+    padding: 4px 6px;
+  }
+  .geo-ngon-btn {
+    width: 22px; height: 22px; border-radius: 6px;
+    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;
+  }
+  .geo-ngon-btn svg { width: 12px; height: 12px; stroke: currentColor; }
+  .geo-ngon-btn:hover { background: rgba(155,93,229,.1); }
+  #geo-ngon-n {
+    font-size: 0.78rem; font-weight: 700; color: var(--text);
+    min-width: 18px; text-align: center;
+  }
+
   .geo-toggle-row {
     display: flex; align-items: center; justify-content: space-between;
     padding: 5px 4px; border-radius: 8px; cursor: pointer;
@@ -3840,6 +3859,31 @@
               </button>
             </div>
 
+            <div class="gp-section-title" style="margin-top:4px">Преобразования</div>
+            <div class="geo-tool-grid">
+              <button id="geo-btn-reflect" class="geo-tool-btn geo-tool-wide" onclick="geoSetTool('reflect',this)" title="Симметрия точки относительно прямой — клик на ось, затем на точку">
+                <svg viewBox="0 0 24 24" fill="none"><line x1="12" y1="2" x2="12" y2="22" stroke-width="1.5" stroke-dasharray="3,2"/><circle cx="6" cy="12" r="3" stroke-width="1.5"/><circle cx="18" cy="12" r="2.5" stroke-width="1.5" opacity=".5"/><line x1="9" y1="12" x2="15" y2="12" stroke-width="1" opacity=".6"/></svg>
+                Симметрия
+              </button>
+            </div>
+
+            <div class="gp-section-title" style="margin-top:4px">Правильный многоугольник</div>
+            <div class="geo-tool-grid">
+              <button id="geo-btn-ngon" class="geo-tool-btn" onclick="geoSetTool('ngon',this)" title="Правильный n-угольник — клик центр, клик вершина">
+                <svg viewBox="0 0 24 24" fill="none"><polygon points="12,3 20.2,8.5 17.3,18 6.7,18 3.8,8.5" stroke-width="1.5" fill="none"/></svg>
+                n-угольник
+              </button>
+              <div class="geo-ngon-ctrl" id="geo-ngon-ctrl">
+                <button class="geo-ngon-btn" onclick="geoNgonN(-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 id="geo-ngon-n">6</span>
+                <button class="geo-ngon-btn" onclick="geoNgonN(+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>
+
             <!-- Display options -->
             <div class="gp-section-title" style="margin-top:6px">Параметры</div>
             <label class="geo-toggle-row" onclick="geoToggle('showGrid',this)">
@@ -5328,6 +5372,8 @@
     foot:         'Сначала кликни на прямую/отрезок',
     circumcircle: 'Кликни 3 точки треугольника — получи описанную окружность',
     incircle:     'Кликни 3 точки треугольника — получи вписанную окружность',
+    reflect:      'Сначала кликни на ось симметрии (прямую/отрезок)',
+    ngon:         'Клик — центр правильного многоугольника; второй клик — вершина',
   };
 
   function geoSetTool(name, btnEl) {
@@ -5347,11 +5393,22 @@
         perpendicular: 'Теперь кликни на точку — через неё проведём перпендикуляр',
         intersect:     'Теперь кликни на вторую прямую',
         foot:          'Теперь кликни на точку — найдём основание перпендикуляра',
+        reflect:       'Теперь кликни на точку — получишь её симметричное отражение',
       };
       hint.textContent = phase2hints[name] || _GEO_HINTS[name] || '';
     } else {
       hint.textContent = _GEO_HINTS[name] || '';
     }
+    // Показываем/скрываем n-selector только для ngon
+    const ngonCtrl = document.getElementById('geo-ngon-ctrl');
+    // ngon-ctrl всегда виден — расположен рядом с кнопкой в grid
+  }
+
+  function geoNgonN(delta) {
+    if (!geomSim) return;
+    geomSim.setNgonSides(geomSim._ngonSides + delta);
+    const el = document.getElementById('geo-ngon-n');
+    if (el) el.textContent = geomSim._ngonSides;
   }
 
   function geoToggle(prop, rowEl) {