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

[frontend] Fix off by one error in number row,, rename some constants.

Browse source
This commit is contained in:
Vavency 2025-06-30 13:47:21 +03:00
parent 61f0133918
commit e28131cbc4
1 changed files with 23 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,9 +58,9 @@ import { isTouchUsing } from '@/utility/touch.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
const colours = { const colours = {
background: '#ffffff', background: '#000000',
foreground: { foreground: {
default: '#000000', default: '#ffffff',
quarter: '#ffff00', quarter: '#ffff00',
instr: '#80e0ff', instr: '#80e0ff',
volume: '#80ff80', volume: '#80ff80',
@ -74,6 +74,11 @@ const CHAR_HEIGHT = 12;
const ROW_OFFSET_Y = 10; const ROW_OFFSET_Y = 10;
const MAX_TIME_SPENT = 50; const MAX_TIME_SPENT = 50;
const MAX_TIME_PER_ROW = 15; const MAX_TIME_PER_ROW = 15;
const MAX_ROW_NUMBERS = 0xFF + 1;
const ROW_BUFFER = 26;
// It would be a great option for users to set themselves.
const MAX_CHANNEL_LIMIT = 0xFF;
const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
const props = defineProps<{ const props = defineProps<{
module: Misskey.entities.DriveFile module: Misskey.entities.DriveFile
@ -110,17 +115,12 @@ let patternScrollSliderShow = ref(false);
let patternScrollSliderPos = ref(0); let patternScrollSliderPos = ref(0);
const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig())); const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
const maxRowNumbers = 0xFF;
const rowBuffer = 26;
// It would be a great option for users to set themselves.
const maxChannelLimit = 0xFF;
const halfbuf = Math.floor(rowBuffer / 2);
let buffer = null; let buffer = null;
let isSeeking = false; let isSeeking = false;
let firstFrame = true; let firstFrame = true;
let lastPattern = -1; let lastPattern = -1;
let lastDrawnRow = -1; let lastDrawnRow = -1;
let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1); let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, MAX_ROW_NUMBERS * CHAR_HEIGHT + 1);
let alreadyHiddenOnce = false; let alreadyHiddenOnce = false;
let slices: CanvasDisplay[] = []; let slices: CanvasDisplay[] = [];
@ -156,7 +156,7 @@ function bakeNumberRow() {
ctx.fillStyle = colours.background; ctx.fillStyle = colours.background;
ctx.fillRect( 0, 0, numberRowCanvas.width, numberRowCanvas.height ); ctx.fillRect( 0, 0, numberRowCanvas.width, numberRowCanvas.height );
for (let i = 0; i < maxRowNumbers; i++) { for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
let rowText = i.toString(16); let rowText = i.toString(16);
if (rowText.length === 1) rowText = '0' + rowText; if (rowText.length === 1) rowText = '0' + rowText;
@ -191,10 +191,10 @@ function setupCanvas() {
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; nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
} }
sliceWidth = 12 + 84 * nbChannels + 2; sliceWidth = numberRowCanvas.width + (14 * CHAR_WIDTH) * nbChannels + 2;
sliceHeight = halfbuf * CHAR_HEIGHT; sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
setupSlice(sliceCanvas1, nbChannels); setupSlice(sliceCanvas1, nbChannels);
setupSlice(sliceCanvas2, nbChannels); setupSlice(sliceCanvas2, nbChannels);
setupSlice(sliceCanvas3, nbChannels); setupSlice(sliceCanvas3, nbChannels);
@ -306,7 +306,7 @@ function togglePattern() {
} }
function drawSlices(skipOptimizationChecks = false) { function drawSlices(skipOptimizationChecks = false) {
if (rowBuffer <= 0) { if (ROW_BUFFER <= 0) {
lastDrawnRow = player.value.getPattern(); lastDrawnRow = player.value.getPattern();
lastPattern = player.value.getRow(); lastPattern = player.value.getRow();
return; return;
@ -314,10 +314,10 @@ function drawSlices(skipOptimizationChecks = false) {
const pattern = player.value.getPattern(); const pattern = player.value.getPattern();
const row = player.value.getRow(); const row = player.value.getRow();
const lower = row + halfbuf; const lower = row + HALF_BUFFER;
const upper = row - halfbuf; const upper = row - HALF_BUFFER;
const newDisplayTanslalation = -row * CHAR_HEIGHT; const newDisplayTanslalation = -row * CHAR_HEIGHT;
let curRow = row - halfbuf; let curRow = row - HALF_BUFFER;
if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) { if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
const rowDif = row - lastDrawnRow; const rowDif = row - lastDrawnRow;
@ -325,7 +325,7 @@ function drawSlices(skipOptimizationChecks = false) {
const rowDir = !isRowDirPos as unknown as number; const rowDir = !isRowDirPos as unknown as number;
const rowDirInv = 1 - 1 * rowDir; const rowDirInv = 1 - 1 * rowDir;
const norm = 1 - 2 * rowDir; const norm = 1 - 2 * rowDir;
const oneAndHalfBuf = halfbuf * 3; const oneAndHalfBuf = HALF_BUFFER * 3;
//debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos); //debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
@ -349,7 +349,7 @@ function drawSlices(skipOptimizationChecks = false) {
//debug(sli); //debug(sli);
} }
for (let i = 0; i < halfbuf; i++) { for (let i = 0; i < HALF_BUFFER; i++) {
const newRow = sli.drawStart + i; const newRow = sli.drawStart + i;
if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) continue; if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) continue;
@ -363,7 +363,7 @@ function drawSlices(skipOptimizationChecks = false) {
} else { } else {
slices.forEach((sli, i) => { slices.forEach((sli, i) => {
sli.drawStart = curRow; sli.drawStart = curRow;
sli.vPos = halfbuf * (i + 1); sli.vPos = HALF_BUFFER * (i + 1);
sli.transform.y = -newDisplayTanslalation; sli.transform.y = -newDisplayTanslalation;
sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)'; sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
sli.drawn = { sli.drawn = {
@ -377,7 +377,7 @@ function drawSlices(skipOptimizationChecks = false) {
sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight); sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * curRow); sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * curRow);
for (let itter = 0; itter < halfbuf; itter++) { for (let itter = 0; itter < HALF_BUFFER; itter++) {
if (sli.drawn.top > curRow) sli.drawn.top = curRow; if (sli.drawn.top > curRow) sli.drawn.top = curRow;
if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow; if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
drawRow(sli, curRow, pattern, (2 * CHAR_WIDTH), itter * CHAR_HEIGHT + ROW_OFFSET_Y); drawRow(sli, curRow, pattern, (2 * CHAR_WIDTH), itter * CHAR_HEIGHT + ROW_OFFSET_Y);
@ -406,6 +406,7 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
let fx = ''; let fx = '';
let op = ''; let op = '';
for (let channel = 0; channel < slice.channels; channel++) { for (let channel = 0; channel < slice.channels; channel++) {
if (channel > 9) 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 );
@ -489,13 +490,8 @@ function handleScrollBarEnable() {
patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing); patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
if (patternScrollSliderShow.value !== true) return; if (patternScrollSliderShow.value !== true) return;
if (!sliceDisplay.value) return; if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
if (!sliceDisplay.value.parentElement) return; patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
if (firstFrame) {
patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > sliceDisplay.value.parentElement.offsetWidth);
} else {
patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
}
} }
watch(patternScrollSliderPos, () => { watch(patternScrollSliderPos, () => {