icons that would otherwise be clipped are placed within the canvas bounds

This commit is contained in:
joe 2025-04-26 14:00:45 +01:00
parent 52fcdfa1ba
commit 169da90607
1 changed files with 4 additions and 1 deletions

View File

@ -62,7 +62,7 @@ export class Renderer {
canvas.height = Math.round(displayHeight * dpr); canvas.height = Math.round(displayHeight * dpr);
// Maintain your display size // Maintain your display size
canvas.style.width = `${displayWidth}px`; canvas.style.width = `${displayWidth }px`;
canvas.style.height = `${displayHeight}px`; canvas.style.height = `${displayHeight}px`;
// Scale context to compensate // Scale context to compensate
@ -79,6 +79,7 @@ export class Renderer {
const rect = this.timeIndicator.getBoundingClientRect(); const rect = this.timeIndicator.getBoundingClientRect();
const sheetLeft = this.sheetWindow.getBoundingClientRect().left; const sheetLeft = this.sheetWindow.getBoundingClientRect().left;
const sheetRight = this.sheetWindow.getBoundingClientRect().right;
const xPosition = rect.left + window.scrollX - sheetLeft; const xPosition = rect.left + window.scrollX - sheetLeft;
const canvasEntry = this.canvases[this.currStaveNumber - 1]; const canvasEntry = this.canvases[this.currStaveNumber - 1];
@ -91,6 +92,8 @@ export class Renderer {
const width = instrument.width * this.iconScale; const width = instrument.width * this.iconScale;
const height = instrument.height * this.iconScale; const height = instrument.height * this.iconScale;
if(xPosition + width > sheetRight) xPosition -= width;
ctx.drawImage(instrument.image, xPosition, y, width, height); ctx.drawImage(instrument.image, xPosition, y, width, height);
this.iconCache.push({ this.iconCache.push({