PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Better initialization and check if canvas gets unmounted

Browse source
This commit is contained in:
Steffen Kolmer 2020-10-21 17:04:01 +02:00
parent fbe2d7e0f8
commit cb79e38377
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/views/elements/effects/confetti/index.ts
View file

@ -78,9 +78,8 @@ export default class Confetti implements ICanvasEffect {
return window.setTimeout(callback, this.options.frameInterval); return window.setTimeout(callback, this.options.frameInterval);
}; };
})(); })();
if (this.context === null) { this.context = canvas.getContext('2d');
this.context = canvas.getContext('2d'); this.particles = [];
}
const count = this.options.maxCount; const count = this.options.maxCount;
while (this.particles.length < count) { while (this.particles.length < count) {
this.particles.push(this.resetParticle({} as ConfettiParticle, canvas.width, canvas.height)); this.particles.push(this.resetParticle({} as ConfettiParticle, canvas.width, canvas.height));
@ -109,9 +108,11 @@ export default class Confetti implements ICanvasEffect {
} }
private runAnimation = (): void => { private runAnimation = (): void => {
if (!this.context || !this.context.canvas) {
return;
}
if (this.particles.length === 0) { if (this.particles.length === 0) {
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
//animationTimer = null;
} else { } else {
const now = Date.now(); const now = Date.now();
const delta = now - this.lastFrameTime; const delta = now - this.lastFrameTime;
@ -127,6 +128,9 @@ export default class Confetti implements ICanvasEffect {
private drawParticles = (context: CanvasRenderingContext2D): void => { private drawParticles = (context: CanvasRenderingContext2D): void => {
if (!this.context || !this.context.canvas) {
return;
}
let particle; let particle;
let x; let x2; let y2; let x; let x2; let y2;
for (let i = 0; i < this.particles.length; i++) { for (let i = 0; i < this.particles.length; i++) {
@ -151,6 +155,9 @@ export default class Confetti implements ICanvasEffect {
} }
private updateParticles = () => { private updateParticles = () => {
if (!this.context || !this.context.canvas) {
return;
}
const width = this.context.canvas.width; const width = this.context.canvas.width;
const height = this.context.canvas.height; const height = this.context.canvas.height;
let particle: ConfettiParticle; let particle: ConfettiParticle;