From f1231998556a562a2438b8eece87bcc535b33dc3 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Mon, 20 Jul 2026 20:00:58 +0700
Subject: [PATCH] fix: double click to edit crash

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

diff --git a/app/storage/sonicforge.db b/app/storage/sonicforge.db
index 0abd537f880f7af2601fbb67e39d0931eae57d74..ac70a80be8db01c10c95c58c2458501d0e26d129 100644
GIT binary patch
delta 1630
zcmb_cO-tNh5Z;d#t0KGhBE=#S3l-d?dGqxq7Fvt7AoxM6dniTLH_4mb)NB&6Sub{p
zUZh_7frtKp-bz8*wYMIG{sDU{J$Wy95_;_<aZ#{^1$)`-%seyi%rg(Od6e5c%DoxR
z7T?~S&K5td`XjdpC8}v?GAj|Rv67`*td1;+r83biN(3yK{O-w!8?_I=?rjZa`^rOi
zw+4o;_4FEssjHHruvp+t$V3{etD?aQ64eZ%Vj@zJn04Dtex@3pYa5mqR4La8o2Km{
z8Br{2k|nDO=5<6xO;mN!5(H5*F;A(c@Rp$nnt?1+pFqgc4O8TKRiG-5CCy6eKKS`=
zyKU_M>dRy@xx!wiuvhre9^~H_9*^hC*>0xG-OiW08s;<q@y=>D6|*PBiR_hfF53-7
z<C&=oy|4WD-UniO`geey{+;$<vDN?d<yfw_QojF+^yYd(TK6m6G}{ek_b?hBwoPV|
zNy_?x_naCbQ(|0Fr{IP7jR?#zAjVpQnS8dvBxrO7nI=K#dG6>m@oCT)o%1}OtNS7V
z8X<(1?YIzMVrtZ`)<R|y32KR1_nc;(KGc(lPu%2NZ-x|Fv53>4knK5MVnnfJfE7SP
zW4whGg+lc@3D)32=xGJOG+3v>Bio^~P{D0F4y4qG>r!XdwV=*M$Ako-#Mq6ckOmY2
zVbFx~4$-Lt<(HOcp3E#VtybxDP=P5$9WuI_6ser7X(CpzfMp)@$|WXG2ahf{c}zwt
zrl_ee6aCx{!4VR@g0L#dvLGU);dpBuDrQVOti&Tn>2@KMs30bo0a_TtvHiq||C}o$
zsB%SAFd)te;4idL*G$DBNt_^Qsw}ITgs_N3$n<F}1yo`z5}9<?oujEn;E>S8X4o;S
z0r6||o(U35m!1l10X*rXVJbfkc5Z^&SR`_Cyxi0;b8_nE&wNPY;Mo|AQfQQ7;|VT+
z1(|~d$6zt$7?kYVZng6~c>XCuc;ifjr;_hbKfkyTYjCBN{{ScR>h|w%_g?JoMf1h>
gcl;$iKnIz^ap3@t=YD}>^ObDZS0UFvetmuP4-ZV~FaQ7m

delta 551
zcmb`Dy-or_0EBN36HgLcp}9gsEKDFFtGnFZ?rm%^wo+JJWyAg&3c-lhKw~S0!Ur&R
zBt)rw4`U;RH5Ct_(Ar#KGv&-T-(c<!=Kg3G1dn^CAb4$Emk&fjV`3tV9H9hJT9-&L
zMv&1FR&k<qg2{MU?(|D%?~`E&@@aTHEQG=4Rz$hA+zAv3XAotMA*qQ)+G6FDGYQpP
znyYqa9gSYM)7Gwgb7>EIw|A!9)q*H0B;%4g$0cz>h&Z8=DMJkwb*_Yzk<b`Zp>&NV
z%+-k%He$r7SX;90J^6gPFMb6)?|GgNryl%((^(Ne!}Dq`1zFztm0X(X%p0B@wX!sV
z<xUN3q&~=^sOmNTuwVQ;d*N3PSm{~Gd4c0;zqws%^2%x&z=a1Fv*PF*&K3`){T~ZA
BmxllV

diff --git a/app/templates/index.html b/app/templates/index.html
index 63d98af..46e4033 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1166,7 +1166,7 @@
 
                 // Draw waveform inside clip (speed-adjusted) with fade envelope applied
                 const drawXStart = Math.max(0, Math.floor(xStart));
-                const drawXEnd = Math.min(w, Math.ceil(xEnd));
+                const drawXEnd = Math.min(drawWidth, Math.ceil(xEnd));
                 const samplesPerPixel = (buffer.sampleRate / zoom) * speed;
                 const bufDur = buffer.duration;
                 const mid = h / 2;
@@ -1419,7 +1419,7 @@
                 }
 
                 // Draw right-edge stretch handle indicator
-                if (wClip > 0 && wClip < w) {
+                if (wClip > 0 && wClip < drawWidth) {
                     ctx.strokeStyle = clipColor;
                     ctx.lineWidth = 1.5;
                     ctx.setLineDash([3, 3]);
@@ -2037,22 +2037,22 @@
                 ctx.strokeStyle = '#2a2a4e';
                 ctx.lineWidth = 0.5;
                 for (let t = 0; t <= buffer.duration; t += 0.5) {
-                    const x = (t / buffer.duration) * w;
+                    const x = (t / buffer.duration) * drawWidth;
                     ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
                 }
                 for (let i = 0; i <= 10; i++) {
                     const y = (i / 10) * h;
-                    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+                    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(drawWidth, y); ctx.stroke();
                 }
 
                 if (fadeInLen > 0) {
-                    const fadeX = (fadeInLen / buffer.duration) * w;
+                    const fadeX = (fadeInLen / buffer.duration) * drawWidth;
                     ctx.fillStyle = 'rgba(16, 185, 129, 0.12)';
                     ctx.fillRect(0, 0, fadeX, h);
                 }
                 if (fadeOutLen > 0) {
-                    const fadeX = ((buffer.duration - fadeOutLen) / buffer.duration) * w;
-                    const fadeW = (fadeOutLen / buffer.duration) * w;
+                    const fadeX = ((buffer.duration - fadeOutLen) / buffer.duration) * drawWidth;
+                    const fadeW = (fadeOutLen / buffer.duration) * drawWidth;
                     ctx.fillStyle = 'rgba(239, 68, 68, 0.12)';
                     ctx.fillRect(fadeX, 0, fadeW, h);
                 }
@@ -2063,13 +2063,13 @@
                     ctx.lineWidth = 2;
                     ctx.beginPath();
                     nodes.forEach((n, i) => {
-                        const x = (n.time / buffer.duration) * w;
+                        const x = (n.time / buffer.duration) * drawWidth;
                         const y = nodeY(n, h);
                         if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
                     });
                     ctx.stroke();
                     nodes.forEach((n, i) => {
-                        const x = (n.time / buffer.duration) * w;
+                        const x = (n.time / buffer.duration) * drawWidth;
                         const y = nodeY(n, h);
                         ctx.fillStyle = graphMode === 'pan' ? '#a855f7' : '#06b6d4';
                         ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill();
@@ -2081,7 +2081,7 @@
                     ctx.fillStyle = '#52525b';
                     ctx.font = '11px sans-serif';
                     ctx.textAlign = 'center';
-                    ctx.fillText(graphMode === 'pan' ? 'Click to add Pan points' : 'Click to add Volume points', w / 2, h / 2);
+                    ctx.fillText(graphMode === 'pan' ? 'Click to add Pan points' : 'Click to add Volume points', drawWidth / 2, h / 2);
                     ctx.textAlign = 'start';
                 }
 
@@ -2089,7 +2089,7 @@
                 ctx.strokeStyle = graphMode === 'pan' ? '#a855f744' : '#06b6d444';
                 ctx.lineWidth = 1;
                 ctx.setLineDash([4, 4]);
-                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(w, zeroY); ctx.stroke();
+                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(drawWidth, zeroY); ctx.stroke();
                 ctx.setLineDash([]);
 
             }, [buffer, zoom, timelineWidth, volumeNodes, panningNodes, fadeInLen, fadeOutLen, graphMode]);