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

[frontend] Fix somewhat sane module drawing.

Browse source 
Final boss: H0ffman.
This commit is contained in:
Vavency 2025-04-16 17:53:32 +03:00
parent c8321a784b
commit 26f77dfe3a
1 changed files with 26 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -119,6 +119,7 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
const maxRowNumbers = 0xFF; const maxRowNumbers = 0xFF;
const rowBuffer = 26; const rowBuffer = 26;
const maxChannelLimit = 9;
let buffer = null; let buffer = null;
let isSeeking = false; let isSeeking = false;
let firstFrame = true; let firstFrame = true;
@ -154,6 +155,7 @@ function populateCanvasSlices () {
let nbChannels = 0; let nbChannels = 0;
if (player.value.currentPlayingNode) { if (player.value.currentPlayingNode) {
nbChannels = player.value.currentPlayingNode.nbChannels; nbChannels = player.value.currentPlayingNode.nbChannels;
//nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
} }
sliceWidth = 12 + 84 * nbChannels + 2; sliceWidth = 12 + 84 * nbChannels + 2;
@ -320,9 +322,8 @@ function drawSlices(skipOptimizationChecks = false) {
const isRowBufPos = rowDif > 0; const isRowBufPos = rowDif > 0;
let s = 0; let s = 0;
//if (!isRowBufPos) playPause(); // Debug pause
for (let i = 0; i < canvasSlice.length; i++) { for (let i = 0; i < canvasSlice.length; i++) {
let curRow = row - halfbuf + i;
//if (buf === 0) break; // I don't want it to do random things. //if (buf === 0) break; // I don't want it to do random things.
//if (canvasSlice[i].data.pattern === pattern) { //if (canvasSlice[i].data.pattern === pattern) {
canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif; canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
@ -331,23 +332,30 @@ function drawSlices(skipOptimizationChecks = false) {
canvasSlice[i].data.slicePos = isRowBufPos ? rowBuffer - 1 : s; 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.position = isRowBufPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
canvasSlice[i].ctx.fillStyle = '#000000'; let curRow = row + halfbuf - 1;
canvasSlice[i].ctx.fillStyle = colours.background;
canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height); canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
alreadyDrawn[curRow] = true;
canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant;
canvasSlice[i].ref.style.top = (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT) + 'px'; canvasSlice[i].ref.style.top = (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT) + 'px';
drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
//alreadyDrawn[curRow] = true;
canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant; // Debug
// Debug text // Debug text
canvasSlice[i].ctx.fillText( canvasSlice[i].ctx.fillText(
i.toString() + ' ' + ' ' +
//i.toString() + ' ' +
curRow.toString() + ' ' + curRow.toString() + ' ' +
canvasSlice[i].data.slicePos + ' ' + //canvasSlice[i].data.slicePos + ' ' +
canvasSlice[i].data.position + ' ' + //canvasSlice[i].data.position + ' ' +
Math.trunc(curtime) + 'ms ' + Math.trunc(curtime) + 'ms ' +
canvasSlice[i].data.offest + 'px ' + //canvasSlice[i].data.offest + 'px ' +
canvasSlice[i].ref.style.top canvasSlice[i].ref.style.top
, 0, ROW_OFFSET_Y); , 0, ROW_OFFSET_Y);
if (!isRowBufPos) playPause(); // Debug pause
//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf; //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'; //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; //buf = (buf > 0) ? buf - 1 : buf + 1;
@ -377,7 +385,7 @@ function drawSlices(skipOptimizationChecks = false) {
for (let i = 0; i < canvasSlice.length; i++) { for (let i = 0; i < canvasSlice.length; i++) {
let curRow = row - halfbuf + i; let curRow = row - halfbuf + i;
// just paint which slice, row and pushed row it is. // just paint which slice, row and pushed row it is.
canvasSlice[i].ctx.fillStyle = '#000000'; canvasSlice[i].ctx.fillStyle = colours.background;
canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height); canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern); drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
//alreadyDrawn[curRow] = true; //alreadyDrawn[curRow] = true;
@ -389,6 +397,7 @@ function drawSlices(skipOptimizationChecks = false) {
canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px'; canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT; canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
/* /*
// Debug Text
canvasSlice[i].ctx.fillStyle = colours.foreground.default; canvasSlice[i].ctx.fillStyle = colours.foreground.default;
canvasSlice[i].ctx.fillText( canvasSlice[i].ctx.fillText(
i.toString() + ' ' + i.toString() + ' ' +
@ -427,7 +436,7 @@ function drawSlices(skipOptimizationChecks = false) {
function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) { 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 (!player.value.currentPlayingNode) return false;
if (row < 0 || row > player.value.getPatternNumRows()) return false; if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
//if (alreadyDrawn[row]) return true; //if (alreadyDrawn[row]) return true;
const spacer = 11; const spacer = 11;
const space = ' '; const space = ' ';
@ -438,6 +447,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
let fx = ''; let fx = '';
let op = ''; let op = '';
for (let channel = 0; channel < channels; channel++) { for (let channel = 0; channel < channels; channel++) {
//if (channel > maxChannelLimit) break;
const part = player.value.getPatternRowChannel(pattern, row, channel); const part = player.value.getPatternRowChannel(pattern, row, channel);
seperators += '|' + space.repeat( spacer + 2 ); seperators += '|' + space.repeat( spacer + 2 );
@ -448,7 +458,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
op += part.substring(11, 13) + space.repeat( spacer + 1 ); op += part.substring(11, 13) + space.repeat( spacer + 1 );
} }
//console.log( 'seperators: ' + seperators + '\nnote: '+ note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op); //console.log( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
ctx.fillStyle = colours.foreground.default; ctx.fillStyle = colours.foreground.default;
ctx.fillText(seperators, drawX, drawY); ctx.fillText(seperators, drawX, drawY);
@ -468,6 +478,8 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
ctx.fillStyle = colours.foreground.operant; ctx.fillStyle = colours.foreground.operant;
ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY); ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
return true; return true;
} }
@ -604,6 +616,7 @@ onDeactivated(() => {
position: relative; position: relative;
background-color: white; background-color: white;
image-rendering: pixelated; image-rendering: pixelated;
/*transform: translateY(-24px);*/
/*pointer-events: none;*/ /*pointer-events: none;*/
z-index: 0; z-index: 0;