elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 13:48:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: animation frame cleanup

Browse Source
This commit is contained in:
Felix Roos 2024-03-16 02:42:26 +01:00
parent ef284e9d13
commit dd78dc9606
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/draw/draw.mjs
View File

@ -30,13 +30,20 @@ export const getDrawContext = (id = 'test-canvas', options) => {
};
let animationFrames = {};
function stopAnimationFrame(id) {
if (animationFrames[id] !== undefined) {
cancelAnimationFrame(animationFrames[id]);
delete animationFrames[id];
}
}
function stopAllAnimations() {
Object.keys(animationFrames).forEach((id) => stopAnimationFrame(id));
}
Pattern.prototype.draw = function (callback, { id = 'std', from, to, onQuery, ctx } = {}) {
if (typeof window === 'undefined') {
return this;
}
if (animationFrames[id]) {
cancelAnimationFrame(animationFrames[id]);
}
stopAnimationFrame(id);
ctx = ctx || getDrawContext();
let cycle,
events = [];
@ -69,9 +76,7 @@ Pattern.prototype.onFrame = function (id, fn, offset = 0) {
if (typeof window === 'undefined') {
return this;
}
if (animationFrames[id]) {
cancelAnimationFrame(animationFrames[id]);
}
stopAnimationFrame(id);
const animate = () => {
const t = getTime() + offset;
const haps = this.queryArc(t, t);
@ -85,7 +90,7 @@ Pattern.prototype.onFrame = function (id, fn, offset = 0) {
export const cleanupDraw = (clearScreen = true) => {
const ctx = getDrawContext();
clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
Object.values(animationFrames).forEach((id) => cancelAnimationFrame(id));
stopAllAnimations();
if (window.strudelScheduler) {
clearInterval(window.strudelScheduler);
}

22
packages/webaudio/scope.mjs
View File

@ -91,10 +91,13 @@ function clearScreen(smear = 0, smearRGB = `0,0,0`, ctx = getDrawContext()) {
*/
Pattern.prototype.fscope = function (config = {}) {
let id = config.id ?? 1;
return this.analyze(id).draw(() => {
clearScreen(config.smear, '0,0,0', config.ctx);
analysers[id] && drawFrequencyScope(analysers[id], config);
});
return this.analyze(id).draw(
() => {
clearScreen(config.smear, '0,0,0', config.ctx);
analysers[id] && drawFrequencyScope(analysers[id], config);
},
{ id },
);
};
/**
@ -113,10 +116,13 @@ Pattern.prototype.fscope = function (config = {}) {
*/
Pattern.prototype.tscope = function (config = {}) {
let id = config.id ?? 1;
return this.analyze(id).draw(() => {
clearScreen(config.smear, '0,0,0', config.ctx);
analysers[id] && drawTimeScope(analysers[id], config);
});
return this.analyze(id).draw(
() => {
clearScreen(config.smear, '0,0,0', config.ctx);
analysers[id] && drawTimeScope(analysers[id], config);
},
{ id },
);
};
Pattern.prototype.scope = Pattern.prototype.tscope;