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

fix: force piano roll grid redraw on snap change via renderTick

Browse Source 
snapVal already in useLayoutEffect deps. Added renderTick
counter bumped in onChange to guarantee canvas redraw.
This commit is contained in:
3dtours
2026-07-30 21:32:45 +07:00
parent e76a6df86b
commit ca34a496eb
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+3 -2
View File
@@ -5795,6 +5795,7 @@ Ví dụ: Nhạc phim epic, dàn nhạc giao hưởng, tempo 130 BPM, giọng Cm
const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClose, onUpdateNotes, onSaveNotes, setSubTabs, onPlayPause, onStop, isPlaying, playPreviewNote, showToast, midiDevices, recordingState, recTempMidiNotes, onRecord, selectedMidiInputId, onMidiInputSelect, activeMidiPitches, onInstrumentSelect, onRescheduleMidi, onSeekPlayhead }) => { const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClose, onUpdateNotes, onSaveNotes, setSubTabs, onPlayPause, onStop, isPlaying, playPreviewNote, showToast, midiDevices, recordingState, recTempMidiNotes, onRecord, selectedMidiInputId, onMidiInputSelect, activeMidiPitches, onInstrumentSelect, onRescheduleMidi, onSeekPlayhead }) => {
const [activeRollTool, setActiveRollTool] = React.useState('select'); const [activeRollTool, setActiveRollTool] = React.useState('select');
const [snapVal, setSnapVal] = React.useState('1'); const [snapVal, setSnapVal] = React.useState('1');
const [renderTick, setRenderTick] = React.useState(0);
const [ccMode, setCcMode] = React.useState('velocity'); const [ccMode, setCcMode] = React.useState('velocity');
const [rollZoom, setRollZoom] = React.useState(60); // local horizontal zoom factor const [rollZoom, setRollZoom] = React.useState(60); // local horizontal zoom factor
const [aiBarStart, setAiBarStart] = React.useState(0); const [aiBarStart, setAiBarStart] = React.useState(0);
@@ -6265,7 +6266,7 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
ctx.stroke(); ctx.stroke();
} }
} }
}, [notes, snapVal, rollZoom, selectedNoteIds, selectionMarquee, st.currentTime, bpm, viewWidth, viewBeats, recordingState, recTempMidiNotes, showGhostNotes, sessionSyncMode, ghostLayers, renderBeatOffset]); }, [notes, snapVal, rollZoom, selectedNoteIds, selectionMarquee, st.currentTime, bpm, viewWidth, viewBeats, recordingState, recTempMidiNotes, showGhostNotes, sessionSyncMode, ghostLayers, renderBeatOffset, renderTick]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
const canvas = ccCanvasRef.current; const canvas = ccCanvasRef.current;
@@ -7199,7 +7200,7 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
className: "text-zinc-500 font-semibold" className: "text-zinc-500 font-semibold"
}, "Snap:"), React.createElement("select", { }, "Snap:"), React.createElement("select", {
value: snapVal, value: snapVal,
onChange: e => setSnapVal(e.target.value), onChange: e => { setSnapVal(e.target.value); setRenderTick(t => t + 1); },
className: "bg-zinc-800 border border-zinc-700 text-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-yellow-500" className: "bg-zinc-800 border border-zinc-700 text-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-yellow-500"
}, ['free', '4', '1', '1/2', '1/4', '1/8', '1/16', '1/32'].map(v => React.createElement("option", { }, ['free', '4', '1', '1/2', '1/4', '1/8', '1/16', '1/32'].map(v => React.createElement("option", {
key: v, key: v,
app/static/js/app.precompiled.js
+3 -3
View File
File diff suppressed because one or more lines are too long
app/templates/index.html
+1 -1
View File
@@ -23,7 +23,7 @@
<script src="/static/js/services/midiExtractor.js?v=202607281052"></script> <script src="/static/js/services/midiExtractor.js?v=202607281052"></script>
<script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script> <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
<script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script> <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
<script src="/static/js/app.precompiled.js?v=202607302127" defer></script> <script src="/static/js/app.precompiled.js?v=202607302132" defer></script>
<link rel="stylesheet" href="/static/css/styles.css?v=202607271016"> <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
<style> <style>
:root { :root {