fix: zoom in

This commit is contained in:
2026-07-21 11:36:41 +07:00
parent 2d9744c13a
commit 184a63b331
3 changed files with 52 additions and 65 deletions
+12 -9
View File
@@ -216,8 +216,8 @@ const WaveformLane = ({
// Grid lines based on Snap value
ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
ctx.lineWidth = 1;
const tStart = scrollLeftVal / zoom;
const tEnd = (scrollLeftVal + drawWidth) / zoom;
const tStart = scrollLeft / zoom;
const tEnd = (scrollLeft + drawWidth) / zoom;
let gridSpacing = 1.0;
if (snapValue && snapValue !== 'free') {
const beatDuration = 60 / parseFloat(bpm || 120);
@@ -702,7 +702,7 @@ const WaveformLane = ({
const time = Math.max(0, x / zoom);
if (onContextMenu) onContextMenu(e, track.id, time);
}
})));
}));
};
const TempoTrackLane = ({
bpm,
@@ -733,8 +733,8 @@ const TempoTrackLane = ({
ctx.fillRect(0, 0, drawWidth, height);
const beatDuration = 60 / bpm;
const barDuration = beatDuration * 4;
const tStart = scrollLeftVal / zoom;
const tEnd = (scrollLeftVal + drawWidth) / zoom;
const tStart = scrollLeft / zoom;
const tEnd = (scrollLeft + drawWidth) / zoom;
const firstBeat = Math.floor(tStart / beatDuration) * beatDuration;
for (let t = firstBeat; t <= tEnd; t += beatDuration) {
const beatNum = Math.floor(t / beatDuration) + 1;
@@ -816,7 +816,7 @@ const TempoTrackLane = ({
onPlayheadSet(time, e.shiftKey);
}
}
})));
}));
};
// ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2 & SUB_EDITOR.md) ──
@@ -8357,7 +8357,8 @@ const App = () => {
viewportWidth: viewportWidth,
onPlayheadSet: handlePlayheadSet,
snapValue: snapValue,
onRulerMouseDown: handleRulerMouseDown
onRulerMouseDown: handleRulerMouseDown,
scrollLeft: scrollLeft
}))), /*#__PURE__*/React.createElement("div", {
className: "flex-1 flex flex-col divide-y divide-[#141414] relative bg-[#111111] min-h-full"
}, tracks.map((track, idx) => {
@@ -8367,7 +8368,7 @@ const App = () => {
style: {
height: `${track.height || 96}px`
},
className: `shrink-0 relative overflow-hidden border-b border-[#141414] hover:bg-zinc-850/5 transition-colors ${isSelected ? 'bg-zinc-800/10' : ''}`,
className: `shrink-0 relative border-b border-[#141414] hover:bg-zinc-850/5 transition-colors ${isSelected ? 'bg-zinc-800/10' : ''}`,
onDragOver: e => e.preventDefault(),
onDrop: e => {
e.preventDefault();
@@ -8378,6 +8379,7 @@ const App = () => {
track: track,
zoom: zoom,
timelineWidth: timelineWidth,
viewportWidth: viewportWidth,
onSelectRange: handleSelectRange,
onPlayheadSet: handlePlayheadSet,
isSelected: isSelected,
@@ -8409,7 +8411,8 @@ const App = () => {
onSetLocalSelectionStart: setLocalSelectionStart,
onSetLocalSelectionEnd: setLocalSelectionEnd,
localSelLeft: localSelectionStart !== null && localSelectionEnd !== null ? Math.min(localSelectionStart, localSelectionEnd) : null,
localSelRight: localSelectionStart !== null && localSelectionEnd !== null ? Math.max(localSelectionStart, localSelectionEnd) : null
localSelRight: localSelectionStart !== null && localSelectionEnd !== null ? Math.max(localSelectionStart, localSelectionEnd) : null,
scrollLeft: scrollLeft
}), selectionMode === 'local' && localSelectionTrackId === track.id && localSelectionStart !== null && localSelectionEnd !== null && Math.abs(localSelectionEnd - localSelectionStart) > 0 && /*#__PURE__*/React.createElement("div", {
className: "absolute top-0 bottom-0 border-l border-r border-amber-400 bg-amber-500/20 z-20 pointer-events-none",
style: {