fix: auto-follow 80px both sides for tempo lane bar visibility + 200px buffer
This commit is contained in:
+20
-8
@@ -1226,7 +1226,7 @@ const TempoTrackLane = ({
|
|||||||
const beatNum = Math.floor(t / beatDuration) + 1;
|
const beatNum = Math.floor(t / beatDuration) + 1;
|
||||||
const isBar = beatNum % 4 === 1;
|
const isBar = beatNum % 4 === 1;
|
||||||
const localX = (t - tStart) * zoom;
|
const localX = (t - tStart) * zoom;
|
||||||
if (localX < 0 || localX > drawWidth) continue;
|
if (localX < -200 || localX > drawWidth + 200) continue;
|
||||||
if (isBar) {
|
if (isBar) {
|
||||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
||||||
ctx.lineWidth = 1.5;
|
ctx.lineWidth = 1.5;
|
||||||
@@ -10192,7 +10192,7 @@ const App = () => {
|
|||||||
const wrapper = timelineWrapperRef.current;
|
const wrapper = timelineWrapperRef.current;
|
||||||
if (!wrapper) return;
|
if (!wrapper) return;
|
||||||
const wr = wrapper.getBoundingClientRect();
|
const wr = wrapper.getBoundingClientRect();
|
||||||
const margin = 80;
|
const margin = 200;
|
||||||
if (clientX > wr.right - margin) {
|
if (clientX > wr.right - margin) {
|
||||||
const depth = (clientX - (wr.right - margin)) / margin;
|
const depth = (clientX - (wr.right - margin)) / margin;
|
||||||
const speed = Math.round(5 + depth * depth * 40);
|
const speed = Math.round(5 + depth * depth * 40);
|
||||||
@@ -10226,8 +10226,12 @@ const App = () => {
|
|||||||
const clampedStart = Math.min(rawStart, marginBar);
|
const clampedStart = Math.min(rawStart, marginBar);
|
||||||
const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
|
const newStart = snapTime(clampedStart, snapValueRef.current, bpmRef.current);
|
||||||
const itemPx = newStart * zoom;
|
const itemPx = newStart * zoom;
|
||||||
if (itemPx < scrollLeft + 60) {
|
const keepMargin = 80;
|
||||||
wrapper.scrollLeft = Math.max(0, itemPx - 60);
|
if (itemPx > scrollLeft + rect.width - keepMargin) {
|
||||||
|
wrapper.scrollLeft = itemPx - rect.width + keepMargin;
|
||||||
|
setCanvasRedrawCount(n => n + 1);
|
||||||
|
} else if (itemPx < scrollLeft + keepMargin) {
|
||||||
|
wrapper.scrollLeft = Math.max(0, itemPx - keepMargin);
|
||||||
setCanvasRedrawCount(n => n + 1);
|
setCanvasRedrawCount(n => n + 1);
|
||||||
}
|
}
|
||||||
const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
|
const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
|
||||||
@@ -10389,8 +10393,12 @@ const App = () => {
|
|||||||
const rawStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar));
|
const rawStart = Math.max(beatSec, Math.min(time - drag.clickOffset, marginBar));
|
||||||
const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
|
const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
|
||||||
const itemPx = newStart * zoom;
|
const itemPx = newStart * zoom;
|
||||||
if (itemPx < scrollLeft + 60) {
|
const keepMargin = 80;
|
||||||
wrapper.scrollLeft = Math.max(0, itemPx - 60);
|
if (itemPx > scrollLeft + rect.width - keepMargin) {
|
||||||
|
wrapper.scrollLeft = itemPx - rect.width + keepMargin;
|
||||||
|
setCanvasRedrawCount(n => n + 1);
|
||||||
|
} else if (itemPx < scrollLeft + keepMargin) {
|
||||||
|
wrapper.scrollLeft = Math.max(0, itemPx - keepMargin);
|
||||||
setCanvasRedrawCount(n => n + 1);
|
setCanvasRedrawCount(n => n + 1);
|
||||||
}
|
}
|
||||||
const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
|
const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
|
||||||
@@ -10482,8 +10490,12 @@ const App = () => {
|
|||||||
: { ...t, midiItems: items };
|
: { ...t, midiItems: items };
|
||||||
}));
|
}));
|
||||||
const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
|
const edgePx = (resize.side === 'left' ? Math.max(0, time) : time) * zoom;
|
||||||
if (edgePx < scrollLeft + 60) {
|
const keepMargin = 80;
|
||||||
wrapper.scrollLeft = Math.max(0, edgePx - 60);
|
if (edgePx > scrollLeft + rect.width - keepMargin) {
|
||||||
|
wrapper.scrollLeft = edgePx - rect.width + keepMargin;
|
||||||
|
setCanvasRedrawCount(n => n + 1);
|
||||||
|
} else if (edgePx < scrollLeft + keepMargin) {
|
||||||
|
wrapper.scrollLeft = Math.max(0, edgePx - keepMargin);
|
||||||
setCanvasRedrawCount(n => n + 1);
|
setCanvasRedrawCount(n => n + 1);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user