diff --git a/app/templates/index.html b/app/templates/index.html
index e9abffb..1e9160b 100644
--- a/app/templates/index.html
+++ b/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}
diff --git a/index.html b/index.html
index e9abffb..1e9160b 100644
--- a/index.html
+++ b/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}