fix&feat: hiển thị tools chỉnh sửa audioclip

app/templates/index.html

@@ -668,7 +668,7 @@
         };
 
         // ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2 & SUB_EDITOR.md) ──
-        const SubTabWaveform = ({ buffer, subTabId, activeTab, currentTime, selectionStart, selectionEnd, onSelectRange, onPlayheadSet, onContextMenu }) => {
+        const SubTabWaveform = ({ buffer, subTabId, activeTab, currentTime, selectionStart, selectionEnd, onSelectRange, onPlayheadSet, onContextMenu, activeTool }) => {
             const canvasRef = useRef(null);
             useEffect(() => {
                 const canvas = canvasRef.current;
@@ -742,6 +742,59 @@
                 const duration = buffer.duration;
                 const startTime = (startX / rect.width) * duration;
 
+                // Tool-specific behavior
+                if (activeTool === 'grab') {
+                    // Grab tool: move playhead on click/drag
+                    onPlayheadSet(startTime);
+                    
+                    const handleMouseMove = (moveEvent) => {
+                        const currentX = moveEvent.clientX - rect.left;
+                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
+                        onPlayheadSet(currentTime);
+                    };
+                    
+                    const handleMouseUp = () => {
+                        document.removeEventListener('mousemove', handleMouseMove);
+                        document.removeEventListener('mouseup', handleMouseUp);
+                    };
+                    
+                    document.addEventListener('mousemove', handleMouseMove);
+                    document.addEventListener('mouseup', handleMouseUp);
+                    return;
+                }
+
+                if (activeTool === 'razor') {
+                    // Razor tool: add a cut marker at click position
+                    // For sub-tab, we can store cut points in the subTab state
+                    onPlayheadSet(startTime);
+                    showToast(`Cut point at ${formatTime(startTime)}`, 'info');
+                    return;
+                }
+
+                if (activeTool === 'pen') {
+                    // Pen tool: for volume automation drawing
+                    // For now, just move playhead and show indicator
+                    onPlayheadSet(startTime);
+                    canvasRef.current.style.cursor = 'crosshair';
+                    
+                    const handleMouseMove = (moveEvent) => {
+                        const currentX = moveEvent.clientX - rect.left;
+                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
+                        onPlayheadSet(currentTime);
+                    };
+                    
+                    const handleMouseUp = () => {
+                        document.removeEventListener('mousemove', handleMouseMove);
+                        document.removeEventListener('mouseup', handleMouseUp);
+                        canvasRef.current.style.cursor = 'crosshair';
+                    };
+                    
+                    document.addEventListener('mousemove', handleMouseMove);
+                    document.addEventListener('mouseup', handleMouseUp);
+                    return;
+                }
+
+                // Select tool (default): drag to select range
                 onSelectRange(startTime, startTime);
                 onPlayheadSet(startTime);
 
@@ -4439,6 +4492,7 @@
                                         buffer={st.buffer}
                                         subTabId={st.id}
                                         activeTab={activeTab}
+                                        activeTool={activeTool}
                                         currentTime={st.currentTime}
                                         selectionStart={st.selectionStart}
                                         selectionEnd={st.selectionEnd}

index.html

@@ -668,7 +668,7 @@
         };
 
         // ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2 & SUB_EDITOR.md) ──
-        const SubTabWaveform = ({ buffer, subTabId, activeTab, currentTime, selectionStart, selectionEnd, onSelectRange, onPlayheadSet, onContextMenu }) => {
+        const SubTabWaveform = ({ buffer, subTabId, activeTab, currentTime, selectionStart, selectionEnd, onSelectRange, onPlayheadSet, onContextMenu, activeTool }) => {
             const canvasRef = useRef(null);
             useEffect(() => {
                 const canvas = canvasRef.current;
@@ -742,6 +742,59 @@
                 const duration = buffer.duration;
                 const startTime = (startX / rect.width) * duration;
 
+                // Tool-specific behavior
+                if (activeTool === 'grab') {
+                    // Grab tool: move playhead on click/drag
+                    onPlayheadSet(startTime);
+                    
+                    const handleMouseMove = (moveEvent) => {
+                        const currentX = moveEvent.clientX - rect.left;
+                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
+                        onPlayheadSet(currentTime);
+                    };
+                    
+                    const handleMouseUp = () => {
+                        document.removeEventListener('mousemove', handleMouseMove);
+                        document.removeEventListener('mouseup', handleMouseUp);
+                    };
+                    
+                    document.addEventListener('mousemove', handleMouseMove);
+                    document.addEventListener('mouseup', handleMouseUp);
+                    return;
+                }
+
+                if (activeTool === 'razor') {
+                    // Razor tool: add a cut marker at click position
+                    // For sub-tab, we can store cut points in the subTab state
+                    onPlayheadSet(startTime);
+                    showToast(`Cut point at ${formatTime(startTime)}`, 'info');
+                    return;
+                }
+
+                if (activeTool === 'pen') {
+                    // Pen tool: for volume automation drawing
+                    // For now, just move playhead and show indicator
+                    onPlayheadSet(startTime);
+                    canvasRef.current.style.cursor = 'crosshair';
+                    
+                    const handleMouseMove = (moveEvent) => {
+                        const currentX = moveEvent.clientX - rect.left;
+                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
+                        onPlayheadSet(currentTime);
+                    };
+                    
+                    const handleMouseUp = () => {
+                        document.removeEventListener('mousemove', handleMouseMove);
+                        document.removeEventListener('mouseup', handleMouseUp);
+                        canvasRef.current.style.cursor = 'crosshair';
+                    };
+                    
+                    document.addEventListener('mousemove', handleMouseMove);
+                    document.addEventListener('mouseup', handleMouseUp);
+                    return;
+                }
+
+                // Select tool (default): drag to select range
                 onSelectRange(startTime, startTime);
                 onPlayheadSet(startTime);
 
@@ -4439,6 +4492,7 @@
                                         buffer={st.buffer}
                                         subTabId={st.id}
                                         activeTab={activeTab}
+                                        activeTool={activeTool}
                                         currentTime={st.currentTime}
                                         selectionStart={st.selectionStart}
                                         selectionEnd={st.selectionEnd}