3dtours/SonicForgeStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: zoom in with playhead on center screen

Browse Source
This commit is contained in:
3dtours
2026-07-21 11:42:03 +07:00
parent 184a63b331
commit 20bf2bd5d8
3 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+7 -7
View File
@@ -3318,6 +3318,8 @@ const App = () => {
const rulerAnchorRef = useRef(null); const rulerAnchorRef = useRef(null);
const isDraggingRulerRef = useRef(false); const isDraggingRulerRef = useRef(false);
const handlePlayPauseRef = useRef(null); const handlePlayPauseRef = useRef(null);
const currentTimeRef = useRef(currentTime);
currentTimeRef.current = currentTime;
// ── Keyboard Shortcuts ── // ── Keyboard Shortcuts ──
const handleUndoRef = useRef(handleUndo); const handleUndoRef = useRef(handleUndo);
@@ -4881,18 +4883,16 @@ const App = () => {
const handleWheel = e => { const handleWheel = e => {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
e.preventDefault(); e.preventDefault();
const rect = timeline.getBoundingClientRect();
const mouseXInViewport = e.clientX - rect.left;
const mouseXInCanvas = mouseXInViewport + timeline.scrollLeft;
const anchorTime = mouseXInCanvas / zoom;
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
setZoom(prevZoom => { setZoom(prevZoom => {
let newZoom = prevZoom * zoomFactor; let newZoom = prevZoom * zoomFactor;
if (newZoom < minZoom) newZoom = minZoom; if (newZoom < minZoom) newZoom = minZoom;
if (newZoom > 50000) newZoom = 50000; if (newZoom > 50000) newZoom = 50000;
const newMouseXInCanvas = anchorTime * newZoom;
requestAnimationFrame(() => { requestAnimationFrame(() => {
timeline.scrollLeft = newMouseXInCanvas - mouseXInViewport; const centerTime = currentTimeRef.current;
const newCenterX = centerTime * newZoom;
const viewportWidth = timeline.clientWidth;
timeline.scrollLeft = newCenterX - viewportWidth / 2;
}); });
return newZoom; return newZoom;
}); });
@@ -4905,7 +4905,7 @@ const App = () => {
passive: false passive: false
}); });
return () => timeline.removeEventListener('wheel', handleWheel); return () => timeline.removeEventListener('wheel', handleWheel);
}, [zoom, minZoom, maxDuration, activeTab]); }, [minZoom]);
// ── Update Playhead ── // ── Update Playhead ──
const startSubTabPlayback = (st, offsetWallTime) => { const startSubTabPlayback = (st, offsetWallTime) => {
app/static/js/app.precompiled.js
+7 -7
View File
@@ -3318,6 +3318,8 @@ const App = () => {
const rulerAnchorRef = useRef(null); const rulerAnchorRef = useRef(null);
const isDraggingRulerRef = useRef(false); const isDraggingRulerRef = useRef(false);
const handlePlayPauseRef = useRef(null); const handlePlayPauseRef = useRef(null);
const currentTimeRef = useRef(currentTime);
currentTimeRef.current = currentTime;
// ── Keyboard Shortcuts ── // ── Keyboard Shortcuts ──
const handleUndoRef = useRef(handleUndo); const handleUndoRef = useRef(handleUndo);
@@ -4881,18 +4883,16 @@ const App = () => {
const handleWheel = e => { const handleWheel = e => {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
e.preventDefault(); e.preventDefault();
const rect = timeline.getBoundingClientRect();
const mouseXInViewport = e.clientX - rect.left;
const mouseXInCanvas = mouseXInViewport + timeline.scrollLeft;
const anchorTime = mouseXInCanvas / zoom;
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
setZoom(prevZoom => { setZoom(prevZoom => {
let newZoom = prevZoom * zoomFactor; let newZoom = prevZoom * zoomFactor;
if (newZoom < minZoom) newZoom = minZoom; if (newZoom < minZoom) newZoom = minZoom;
if (newZoom > 50000) newZoom = 50000; if (newZoom > 50000) newZoom = 50000;
const newMouseXInCanvas = anchorTime * newZoom;
requestAnimationFrame(() => { requestAnimationFrame(() => {
timeline.scrollLeft = newMouseXInCanvas - mouseXInViewport; const centerTime = currentTimeRef.current;
const newCenterX = centerTime * newZoom;
const viewportWidth = timeline.clientWidth;
timeline.scrollLeft = newCenterX - viewportWidth / 2;
}); });
return newZoom; return newZoom;
}); });
@@ -4905,7 +4905,7 @@ const App = () => {
passive: false passive: false
}); });
return () => timeline.removeEventListener('wheel', handleWheel); return () => timeline.removeEventListener('wheel', handleWheel);
}, [zoom, minZoom, maxDuration, activeTab]); }, [minZoom]);
// ── Update Playhead ── // ── Update Playhead ──
const startSubTabPlayback = (st, offsetWallTime) => { const startSubTabPlayback = (st, offsetWallTime) => {
app/storage/sonicforge.db
BIN
View File
Binary file not shown.