From 640ca245ee68d131bfa8e67c038e18b3bf6d4f17 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 28 May 2026 08:53:57 +0300 Subject: [PATCH] =?UTF-8?q?fix(geom8):=20drag-=D0=B8=D0=BD=D1=82=D0=B5?= =?UTF-8?q?=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=B2=D1=8B=20=E2=80=94=20pointe?= =?UTF-8?q?rmove/up=20=D0=BD=D0=B0=20window=20+=20=C2=A77=20=D0=B8=D0=BD?= =?UTF-8?q?=D0=B4=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80=20=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B5=D0=BD=D1=81=D1=82=D0=B2=D0=B0=20=D0=B4=D0=B8=D0=B0=D0=B3?= =?UTF-8?q?=D0=BE=D0=BD=D0=B0=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drag (12 SVG-интерактивов): pointermove/pointerup/pointercancel слушались на самом vertex-элементе. При выходе курсора за пределы маленького круга drag обрывался — отсюда эффект 'нажал, чуть-чуть потянулось, и всё'. Перенесены на window — теперь работают как нативный drag. §7 (Прямоугольник): info-карточка показывала 'AC = BD' с одним значением. Теперь две отдельные карточки AC и BD + индикатор равенства (зелёная плашка 'Диагонали равны' / красная 'Не равны' с Δ). Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/textbooks/geometry_8_ch1.html | 63 ++++++++++++++------------ 1 file changed, 33 insertions(+), 30 deletions(-) diff --git a/frontend/textbooks/geometry_8_ch1.html b/frontend/textbooks/geometry_8_ch1.html index 3a0f8f9..d2b085f 100644 --- a/frontend/textbooks/geometry_8_ch1.html +++ b/frontend/textbooks/geometry_8_ch1.html @@ -959,10 +959,10 @@ function buildP1(){ verts[idx]={x:nx,y:ny}; redraw(); updateInfo(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp);el.style.cursor='grab'; } - el.addEventListener('pointermove',onMove); - el.addEventListener('pointerup',onUp); - el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp);el.style.cursor='grab'; } + window.addEventListener('pointermove',onMove); + window.addEventListener('pointerup',onUp); + window.addEventListener('pointercancel',onUp); }); }); const statusEl=document.getElementById('p1-poly-status'); @@ -1746,10 +1746,10 @@ function buildP4(){ else if(vname==='D') D={x:nx,y:ny}; redraw(); updateInfo(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); - el.addEventListener('pointerup',onUp); - el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); + window.addEventListener('pointerup',onUp); + window.addEventListener('pointercancel',onUp); }); }); updateInfo(); @@ -2033,8 +2033,8 @@ function buildP5(){ const vname=el.dataset.v; try{el.setPointerCapture(ev.pointerId);}catch(e){} function onMove(e){ const rect=svgEl.getBoundingClientRect(); const sx=W/rect.width,sy=H/rect.height; const nx=Math.max(10,Math.min(W-10,(e.clientX-rect.left)*sx)); const ny=Math.max(10,Math.min(H-10,(e.clientY-rect.top)*sy)); if(vname==='B') B={x:nx,y:ny}; else if(vname==='D') D={x:nx,y:ny}; redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const C2=getC(); const O2=intersect(A,C2,B,D); @@ -2512,16 +2512,19 @@ function buildP7(){ if(ev.button!==undefined&&ev.button!==0)return; try{el.setPointerCapture(ev.pointerId);}catch(e){} function onMove(e){ const rect=svgEl.getBoundingClientRect(); const sx=W/rect.width,sy=H/rect.height; B={x:Math.max(A.x+30,Math.min(W-10,(e.clientX-rect.left)*sx)),y:Math.max(30,Math.min(H-10,(e.clientY-rect.top)*sy))}; redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const rr=getRect(); const ab=dist(rr.A,rr.B), bc=dist(rr.B,rr.C), ac=dist(rr.A,rr.C), bd=dist(rr.B,rr.D); + const eq=Math.abs(ac-bd)<0.05; document.getElementById('p7-rect-info').innerHTML=`
AB
${ab.toFixed(1)}
BC
${bc.toFixed(1)}
-
AC = BD
${ac.toFixed(1)}
-
Все углы
90°
`; +
AC (диагональ)
${ac.toFixed(2)}
+
BD (диагональ)
${bd.toFixed(2)}
+
${eq?'AC = BD':'AC ≠ BD'}
${eq?'Диагонали равны':'Не равны (Δ='+Math.abs(ac-bd).toFixed(2)+')'}
+
Все углы
90°
`; } redraw(); })(); @@ -2739,8 +2742,8 @@ function buildP8(){ if(ev.button!==undefined&&ev.button!==0)return; try{el.setPointerCapture(ev.pointerId);}catch(e){} function onMove(e){ const rect=svgEl.getBoundingClientRect(); const sx=W/rect.width,sy=H/rect.height; D={x:Math.max(10,Math.min(W-10,(e.clientX-rect.left)*sx)),y:Math.max(10,Math.min(H-10,(e.clientY-rect.top)*sy))}; redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const okCol=eq?'#10b981':'#94a3b8'; @@ -2984,8 +2987,8 @@ function buildP9(){ const vname=el.dataset.v; try{el.setPointerCapture(ev.pointerId);}catch(e){} function onMove(e){ const rect=svgEl.getBoundingClientRect(); const sx=W/rect.width,sy=H/rect.height; const nx=(e.clientX-rect.left)*sx; const ny=(e.clientY-rect.top)*sy; if(vname==='B'){ half2=Math.max(20,Math.min(H/2-10,cy-ny)); } else if(vname==='D'){ half2=Math.max(20,Math.min(H/2-10,ny-cy)); } else if(vname==='A'){ half1=Math.max(20,Math.min(W/2-10,cx-nx)); } else if(vname==='C'){ half1=Math.max(20,Math.min(W/2-10,nx-cx)); } redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove);el.removeEventListener('pointerup',onUp);el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove);window.removeEventListener('pointerup',onUp);window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const {A:A2,B:B2}=getVerts(half1,half2); const side2=dist(A2,B2); @@ -3545,8 +3548,8 @@ function buildP11(){ else if(vname==='A1'){ A1x=Math.max(10,Math.min(W-10,nx)); A1y=Math.max(10,Math.min(H-10,ny)); } drawThales(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); @@ -3839,8 +3842,8 @@ function buildP12(){ else C={x:nx,y:ny}; redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); @@ -4093,8 +4096,8 @@ function buildP13(){ else C={x:nx,y:ny}; redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const bc=dist(B,C), ac=dist(A,C), ab=dist(A,B); @@ -4406,8 +4409,8 @@ function buildP14(){ else if(vname==='D'){ D={x:nx,y:ny}; C.y=ny; } redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const S=(a+b)/2*h; @@ -4739,8 +4742,8 @@ function buildP15(){ else if(vname==='D'){ halfTop=Math.max(10, cx-nx); topY=ny; } redraw(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const eq=(Math.abs(diag-dist(B,D))<0.5)?'Равны!':'не равны'; @@ -5057,8 +5060,8 @@ function buildP16(){ else if(vname==='D'){ D={x:nx,y:ny}; C.y=ny; } redraw2(); } - function onUp(){ el.removeEventListener('pointermove',onMove); el.removeEventListener('pointerup',onUp); el.removeEventListener('pointercancel',onUp); } - el.addEventListener('pointermove',onMove); el.addEventListener('pointerup',onUp); el.addEventListener('pointercancel',onUp); + function onUp(){ window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp); window.removeEventListener('pointercancel',onUp); } + window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp); window.addEventListener('pointercancel',onUp); }); }); const ind=document.getElementById('p16-sign2-ind');