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

[frontend] More fixed in drawSlices in a backwards norm

Browse source 
This time it's slicePos that was set incorrectly causing it to be out of whack when it get updated multiple times.
This commit is contained in:
Vavency 2025-06-11 18:03:55 +03:00
parent d2b14753f0
commit e8a09e884b
1 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -328,7 +328,7 @@ function drawSlices(skipOptimizationChecks = false) {
// Debug // Debug
if (rowDif > 1 || rowDif < 0) { if (rowDif > 1 || rowDif < 0) {
debug_playpause(); //debug_playpause();
debug_w('Row diff', rowDif); debug_w('Row diff', rowDif);
} }
@ -336,7 +336,6 @@ function drawSlices(skipOptimizationChecks = false) {
const rowDir = !isRowDirPos as unknown as number; const rowDir = !isRowDirPos as unknown as number;
const norm = 1 - 2 * rowDir; const norm = 1 - 2 * rowDir;
const offByOneFix = -1 * rowDir; const offByOneFix = -1 * rowDir;
let drawnSlices = 0;
interface InteralToDraw { interface InteralToDraw {
p: number, p: number,
@ -344,8 +343,10 @@ function drawSlices(skipOptimizationChecks = false) {
}; };
let toDraw: InteralToDraw[] = []; let toDraw: InteralToDraw[] = [];
let lowestRow = 0xFFFFFFFF; let lowestRow = 0xFFFFFFFF;
let drawnSlices = 0;
let maxToDraw = 0;
debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm); //debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
for (let i = 0; i < canvasSlice.length; i++) { for (let i = 0; i < canvasSlice.length; i++) {
canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif; canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
@ -355,21 +356,19 @@ function drawSlices(skipOptimizationChecks = false) {
const abs_pos = Math.abs(canvasSlice[i].data.slicePos); const abs_pos = Math.abs(canvasSlice[i].data.slicePos);
if (lowestRow > abs_pos) lowestRow = abs_pos; if (lowestRow > abs_pos) lowestRow = abs_pos;
toDraw[abs_pos] = { p: canvasSlice[i].data.slicePos, i: i }; toDraw[abs_pos] = { p: canvasSlice[i].data.slicePos, i: i };
//debug('Added to draw.', abs_pos); maxToDraw++;
//debug_w('Added to draw.', abs_pos);
} }
debug(lowestRow, norm); //debug(lowestRow, norm);
console.table(toDraw); //console.table(toDraw);
toDraw.forEach((v, i) => {
debug('test print:', v, i);
});
for (let i = toDraw.length - 1; i >= lowestRow; i += -1) { for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
//debug('fl:', i, toDraw[i]);
if (!toDraw[i]) continue; if (!toDraw[i]) continue;
canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices; //debug('Before', canvasSlice[toDraw[i].i].data);
canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : maxToDraw + drawnSlices - 1;
canvasSlice[toDraw[i].i].data.position = canvasSlice[toDraw[i].i].data.position + rowBuffer * norm; canvasSlice[toDraw[i].i].data.position = canvasSlice[toDraw[i].i].data.position + rowBuffer * norm;
const curRow = offByOneFix + (row + (drawnSlices - rowDif)) + halfbuf * norm; const curRow = offByOneFix + (row + (drawnSlices - rowDif)) + halfbuf * norm;
@ -378,8 +377,17 @@ function drawSlices(skipOptimizationChecks = false) {
canvasSlice[toDraw[i].i].ref.style.transform = 'translateY(' + (canvasSlice[toDraw[i].i].data.offest + (canvasSlice[toDraw[i].i].data.position) * CHAR_HEIGHT + CHAR_HEIGHT) + 'px)'; canvasSlice[toDraw[i].i].ref.style.transform = 'translateY(' + (canvasSlice[toDraw[i].i].data.offest + (canvasSlice[toDraw[i].i].data.position) * CHAR_HEIGHT + CHAR_HEIGHT) + 'px)';
drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern); drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern);
canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug /*
canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle; debug('fl:', i, toDraw[i], canvasSlice[toDraw[i].i].data, canvasSlice[toDraw[i].i].ctx.canvas,
' ' +
i.toString() + ' ' +
curRow.toString() + ' ' +
canvasSlice[toDraw[i].i].ref.style.transform,
);
*/
//canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
//canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle;
// Debug text // Debug text
/* /*
@ -507,7 +515,7 @@ function display(skipOptimizationChecks = false) {
if (firstFrame) { if (firstFrame) {
// Changing it to false should enable pattern display by default. // Changing it to false should enable pattern display by default.
patternHide.value = true; patternHide.value = false;
handleScrollBarEnable(); handleScrollBarEnable();
firstFrame = false; firstFrame = false;
} }
@ -631,7 +639,7 @@ onDeactivated(() => {
} }
.patternShadowTop { .patternShadowTop {
background: #00000080; background: #00000000;
width: 100%; width: 100%;
height: calc( 50% - 14px ); height: calc( 50% - 14px );
translate: -50% -100%; translate: -50% -100%;
@ -642,7 +650,7 @@ onDeactivated(() => {
} }
.patternShadowBottom { .patternShadowBottom {
background: #00000080; background: #00000000;
width: 100%; width: 100%;
height: calc( 50% - 12px ); height: calc( 50% - 12px );
translate: -50% 0; translate: -50% 0;