From f616e1fd70e74dae1d2a7a74c5b9074caa2520bc Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Mon, 20 Jul 2026 19:45:48 +0700
Subject: [PATCH] fix: time selection click and shiftclick

---
 app/storage/sonicforge.db | Bin 45056 -> 45056 bytes
 app/templates/index.html  |  18 +++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/storage/sonicforge.db b/app/storage/sonicforge.db
index 1259142694cbda42b9087ef7dff45ca958a31a48..0abd537f880f7af2601fbb67e39d0931eae57d74 100644
GIT binary patch
delta 519
zcma)&y-or_7)5th6IT*4LPMb;6egIM(HVAjX1~~AY@w6bI=_YjFrqck(2Ak(3G7IS
zZ0(EKNMTLI0~mRNZEkaulXLHQ9gf%G>=;FFCpReiynn2oLdp|nV@f>ZjBwsi1cYG3
znwaV&)h4BEzOD8~({k%;F{z+Jr*btZR-%K$m`mrR2NHv~gbOc-GRzU<sP@|1lpCpR
zuiM{6b2#XCjUPNcxQpTQi|q~!FwH>;skrx2F%JMq%9YTTTM7-SL8%xFr5tq4@KpE)
zbKqjZyiSZ`JMQ)O`?T~E$yF`G?L2G3`d%lO`-(0uZ}Sk*_UIh#cS4lsk+Y!ruX>jU
poLjXR1OdX!057u={lN3(sD-EHwyYO+#U{X;tTg+@+2*xe`vX%=l5YS2

delta 1488
zcmbtUOKa3n6rM?i+85Kh8KhE%C@45H<|a4EO+~EK3WYwv&Mb=5@g}*MiOnP-lc`7<
z(k`kiQR%`zArw3QfUaGsOIKaHD2S!F^d!@vT_^;)NpfCa&iT%F@75u=b;!M&%#Oal
zHk%#&^vs{SK@3^YsftQS!lZ;%8J9E#3ngq3ghVW3QKP%ZQ_X1S`%~`Ac0M~?&EMS~
z%U>QGk_a^{S+`1pELkOt8I&5PRFVk829`CVNtBvR+f5!bEzh+L%M0qP+zQ*K?I9U4
zRo1X26Gatt#3W53x@3u>q?xL~n5GDpp@^D+EVG~^Wa$7e2t;H=P_bquxDS4O*!lL0
z|Fd7{<`&aT!`&RHrs{oP_;{z11~Gd)emi@q%4O3qaw{_vx4N1JICZOInM{ToImzVq
zMozjD<3C4MUn|^Dt$P2>;1D+$vZh~4(_5OH-LKK)q;2xkd;;qS-g9Pze35r)lYtlF
zS0gaPfEw#9e)`EKpJb!6lvx^tp63>3sn3E|VZrnKa?_U}p%p@?V#h#2k#8`&-U#_=
zB$6V(;W_Old#EQ7pSsDr*$x@BVo|5XpxSf1#E4?c04soot_zl`C=Ae>G+2ipLQiXu
z%z_OTJhB}&4+w7CaiF9@U6(oYt_3)oeG>}AB5$`=LKZLxgh3nN9jY@2;8!YhkLQ;8
zPN#S}sK^(iJ{hSdMPeB#nkdT{shS{Y+65->4IW)=@|cWHOi^2}Q2pEv!4XouhE#%O
z8A(J_i3+^-shBhEuojOT^|lM4L<KRyJkY`$j_oH#{BZ_D2-0dqfrNAW{|76~HGA5S
zl(L8=QNl7bqQG{c(r2*}P?3jgA!76H0_#ZxOt#z(`({0$eq+%yL1Dd}_jI)co>O6f
zwp`n-pY!}z7Vx(-S)7V6CL<pUV{v&Ymc?3U;2zvjuegohFLw8$g$cMwUp9v01DiX@
a<PLI2-3j4yu3Q?ZWm6wiu6y+MO5rbgzq&pE

diff --git a/app/templates/index.html b/app/templates/index.html
index 77c8239..63d98af 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -436,7 +436,9 @@
                                 
                                 ctx.beginPath();
                                 let first = true;
-                                for (let i = startSample; i < endSample; i++) {
+                                const maxSamples = 50000;
+                                const vectorStep = Math.max(1, Math.floor((endSample - startSample) / maxSamples));
+                                for (let i = startSample; i < endSample; i += vectorStep) {
                                     const sampleTime = (i / sampleRate) / clipSpeed;
                                     const pxLocal = xStartLocal + sampleTime * zoom;
                                     const y = mid - data[i] * peakRatio;
@@ -449,16 +451,18 @@
                                 }
                                 ctx.stroke();
 
-                                // Draw granular sample nodes (#6ee7b7 Green Emerald, radius r = 2px) when samplesPerPixel < 1.5
-                                if (samplesPerPixel < 1.5) {
+                                // Draw granular sample nodes only at extreme zoom (samplesPerPixel < 0.3)
+                                if (samplesPerPixel < 0.3) {
+                                    const maxNodes = 5000;
+                                    const step = Math.max(1, Math.floor((endSample - startSample) / maxNodes));
                                     ctx.fillStyle = '#6ee7b7';
-                                    for (let i = startSample; i < endSample; i++) {
+                                    let drawn = 0;
+                                    for (let i = startSample; i < endSample && drawn < maxNodes; i += step) {
                                         const sampleTime = (i / sampleRate) / clipSpeed;
                                         const pxLocal = xStartLocal + sampleTime * zoom;
                                         const y = mid - data[i] * peakRatio;
-                                        ctx.beginPath();
-                                        ctx.arc(pxLocal, y, 2, 0, Math.PI * 2);
-                                        ctx.fill();
+                                        ctx.fillRect(pxLocal - 1, y - 1, 2, 2);
+                                        drawn++;
                                     }
                                 }
                             } else {