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

fix:lỗi drag ở vị trí con trỏ

Browse Source
This commit is contained in:
3dtours
2026-07-18 21:58:46 +07:00
parent 1364cbc34b
commit 8363a46499
1 changed files with 51 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+47 -49
View File
@@ -1613,38 +1613,36 @@
setLocalSelectionEnd(null); setLocalSelectionEnd(null);
}; };
const handleRulerMouseDown = (e) => { const handleRulerMouseDown = (e) => {
const ruler = rulerRef.current; const wrapper = timelineWrapperRef.current;
if (!ruler) return; if (!wrapper) return;
const rect = ruler.getBoundingClientRect(); const rect = wrapper.getBoundingClientRect();
const wrapper = timelineWrapperRef.current; const scrollLeft = wrapper.scrollLeft;
const scrollLeft = wrapper ? wrapper.scrollLeft : 0; const mouseX = e.clientX - rect.left + scrollLeft - 300;
const mouseX = e.clientX - rect.left + scrollLeft; const time = mouseX / zoom;
const time = mouseX / zoom;
clearLocalSelection(); clearLocalSelection();
setSelectionMode('global'); setSelectionMode('global');
rulerDragStartRef.current = time; rulerDragStartRef.current = time;
isDraggingRulerRef.current = true; isDraggingRulerRef.current = true;
setSelectionStart(time); setSelectionStart(time);
setSelectionEnd(time); setSelectionEnd(time);
setCurrentTime(time); setCurrentTime(time);
}; };
// Global Ruler mousemove is tracked via document listener set up in useEffect // Global Ruler mousemove is tracked via document listener set up in useEffect
useEffect(() => { useEffect(() => {
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
if (!isDraggingRulerRef.current) return; if (!isDraggingRulerRef.current) return;
const ruler = rulerRef.current; const wrapper = timelineWrapperRef.current;
const wrapper = timelineWrapperRef.current; if (!wrapper) return;
if (!ruler || !wrapper) return; const rect = wrapper.getBoundingClientRect();
const rect = ruler.getBoundingClientRect(); const scrollLeft = wrapper.scrollLeft;
const scrollLeft = wrapper.scrollLeft; const mouseX = e.clientX - rect.left + scrollLeft - 300;
const mouseX = e.clientX - rect.left + scrollLeft; const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
setSelectionEnd(time); setSelectionEnd(time);
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (isDraggingRulerRef.current) { if (isDraggingRulerRef.current) {
isDraggingRulerRef.current = false; isDraggingRulerRef.current = false;
@@ -1678,16 +1676,16 @@
// Document-level mousemove/mouseup for local selection drag // Document-level mousemove/mouseup for local selection drag
useEffect(() => { useEffect(() => {
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
if (!localDragInProgressRef.current) return; if (!localDragInProgressRef.current) return;
const wrapper = timelineWrapperRef.current; const wrapper = timelineWrapperRef.current;
if (!wrapper) return; if (!wrapper) return;
const rect = wrapper.getBoundingClientRect(); const rect = wrapper.getBoundingClientRect();
const scrollLeft = wrapper.scrollLeft; const scrollLeft = wrapper.scrollLeft;
const mouseX = e.clientX - rect.left + scrollLeft; const mouseX = e.clientX - rect.left + scrollLeft - 300;
const time = Math.max(0, Math.min(maxDuration, mouseX / zoom)); const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
setLocalSelectionEnd(time); setLocalSelectionEnd(time);
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (localDragInProgressRef.current) { if (localDragInProgressRef.current) {
localDragInProgressRef.current = false; localDragInProgressRef.current = false;
@@ -1776,18 +1774,18 @@
}; };
useEffect(() => { useEffect(() => {
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
const drag = draggedClipRef.current; const drag = draggedClipRef.current;
if (!drag) return; if (!drag) return;
const wrapper = timelineWrapperRef.current; const wrapper = timelineWrapperRef.current;
if (!wrapper) return; if (!wrapper) return;
const rect = wrapper.getBoundingClientRect(); const rect = wrapper.getBoundingClientRect();
const scrollLeft = wrapper.scrollLeft; const scrollLeft = wrapper.scrollLeft;
const mouseX = e.clientX - rect.left + scrollLeft; const mouseX = e.clientX - rect.left + scrollLeft - 300;
const time = mouseX / zoom; const time = mouseX / zoom;
const rawStart = Math.max(0, time - drag.clickOffset); const rawStart = Math.max(0, time - drag.clickOffset);
const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current); const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
const targetTrackId = hoveredTrackIdRef.current || drag.trackId; const targetTrackId = hoveredTrackIdRef.current || drag.trackId;