hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: draw playhead only once

Browse source
This commit is contained in:
Felix Roos 2022-07-28 22:26:14 +02:00
parent 71dc108b2d
commit 1ddf968750
1 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/tone/pianoroll.mjs
View file

@ -58,7 +58,6 @@ Pattern.prototype.pianoroll = function ({
flipTime && timeRange.reverse(); flipTime && timeRange.reverse();
flipValues && valueRange.reverse(); flipValues && valueRange.reverse();
const playheadPosition = scale(-from / timeExtent, ...timeRange);
this.draw( this.draw(
(ctx, events, t) => { (ctx, events, t) => {
ctx.fillStyle = background; ctx.fillStyle = background;
@ -71,15 +70,6 @@ Pattern.prototype.pianoroll = function ({
ctx.fillStyle = event.context?.color || inactive; ctx.fillStyle = event.context?.color || inactive;
ctx.strokeStyle = event.context?.color || active; ctx.strokeStyle = event.context?.color || active;
ctx.globalAlpha = event.context.velocity ?? 1; ctx.globalAlpha = event.context.velocity ?? 1;
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange); const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
let durationPx = scale(event.duration / timeExtent, 0, timeAxis); let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
const value = getValue(event); const value = getValue(event);
@ -107,6 +97,18 @@ Pattern.prototype.pianoroll = function ({
} }
isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
}); });
const playheadPosition = scale(-from / timeExtent, ...timeRange);
// draw playhead
ctx.strokeStyle = 'white';
ctx.beginPath();
if (vertical) {
ctx.moveTo(0, playheadPosition);
ctx.lineTo(valueAxis, playheadPosition);
} else {
ctx.moveTo(playheadPosition, 0);
ctx.lineTo(playheadPosition, valueAxis);
}
ctx.stroke();
}, },
{ {
from: from - overscan, from: from - overscan,