misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

[frontend] Fix backwards and forward jump within the same pattern.

Browse source 
Hopefully fixes H0ffman's modules.
This commit is contained in:
Vavency 2025-04-17 18:14:56 +03:00
parent 26f77dfe3a
commit 09516d09c0
1 changed files with 25 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

43
packages/frontend/src/components/SkModPlayer.vue
View file

@ -118,7 +118,8 @@ let patternScrollSliderPos = ref(0);
const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
const maxRowNumbers = 0xFF;
const rowBuffer = 26;
const overdraw = 0;
const rowBuffer = 26 + overdraw;
const maxChannelLimit = 9;
let buffer = null;
let isSeeking = false;
@ -311,28 +312,31 @@ function drawSlices(skipOptimizationChecks = false) {
let rowDif = 0;
let nbChannels = 0;
if (player.value.currentPlayingNode) {
nbChannels = player.value.currentPlayingNode.nbChannels;
}
if (player.value.currentPlayingNode) nbChannels = player.value.currentPlayingNode.nbChannels;
if (pattern === lastPattern && !skipOptimizationChecks) {
rowDif = row - lastDrawnRow;
if (rowDif !== 0 && rowDif !== 1) console.log(rowDif);
// Debug
if (rowDif > 1 || rowDif < -1) console.log(rowDif);
let curtime = performance.now();
const isRowBufPos = rowDif > 0;
let s = 0;
const isRowDirPos = rowDif > 0;
let drawnSlices = 0;
for (let i = 0; i < canvasSlice.length; i++) {
//if (buf === 0) break; // I don't want it to do random things.
//if (canvasSlice[i].data.pattern === pattern) {
let offest = 0;
if (rowDif > 1 || rowDif < -1) offest = isRowDirPos ? drawnSlices - rowDif + 1 : drawnSlices + rowDif - 2; // Don't question magic numbers.
canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer + 1) continue;
canvasSlice[i].data.slicePos = isRowBufPos ? rowBuffer - 1 : s;
canvasSlice[i].data.position = isRowBufPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
canvasSlice[i].data.slicePos = isRowDirPos ? rowBuffer - 1 : drawnSlices;
canvasSlice[i].data.position = isRowDirPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
let curRow = row + halfbuf - 1;
let curRow = row + (isRowDirPos ? halfbuf : -halfbuf) - 1 + offest;
canvasSlice[i].ctx.fillStyle = colours.background;
canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
@ -341,25 +345,26 @@ function drawSlices(skipOptimizationChecks = false) {
//alreadyDrawn[curRow] = true;
canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant; // Debug
canvasSlice[i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
canvasSlice[i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[i].ctx.fillStyle;
// Debug text
canvasSlice[i].ctx.fillText(
' ' +
//i.toString() + ' ' +
i.toString() + ' ' +
curRow.toString() + ' ' +
//canvasSlice[i].data.slicePos + ' ' +
//canvasSlice[i].data.position + ' ' +
canvasSlice[i].data.slicePos + ' ' +
canvasSlice[i].data.position + ' ' +
Math.trunc(curtime) + 'ms ' +
//canvasSlice[i].data.offest + 'px ' +
canvasSlice[i].data.offest + 'px ' +
canvasSlice[i].ref.style.top
, 0, ROW_OFFSET_Y);
if (!isRowBufPos) playPause(); // Debug pause
if (!isRowDirPos || rowDif > 1) playPause(); // Debug pause
//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf;
//canvasSlice[i].ref.style.top = buf > 0 ? (canvasSlice[i].data.slicePos * CHAR_HEIGHT) + 'px' : (buf + row) * CHAR_HEIGHT + 'px';
//buf = (buf > 0) ? buf - 1 : buf + 1;
s++;
drawnSlices++;
}
} else {
if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
@ -396,10 +401,12 @@ function drawSlices(skipOptimizationChecks = false) {
canvasSlice[i].data.pattern = pattern;
canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
/*
// Debug Text
canvasSlice[i].ctx.fillStyle = colours.foreground.default;
canvasSlice[i].ctx.fillText(
' ' +
i.toString() + ' ' +
curRow.toString() + ' ' +
canvasSlice[i].data.slicePos + ' ' +
@ -436,7 +443,7 @@ function drawSlices(skipOptimizationChecks = false) {
function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
if (!player.value.currentPlayingNode) return false;
if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
//if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
//if (alreadyDrawn[row]) return true;
const spacer = 11;
const space = ' ';