From 484a4c5d1565bec8fe55db40d18a41eb3abd2ce3 Mon Sep 17 00:00:00 2001 From: sentisso Date: Tue, 7 Mar 2023 11:09:57 +0100 Subject: [PATCH 1/3] adding an event listener with an event for firework explosions --- packages/fireworks-js/src/fireworks.ts | 18 ++++++++++++++++++ packages/fireworks-js/src/types.ts | 6 ++++++ packages/preact/src/index.tsx | 6 ++++++ packages/react/src/index.tsx | 6 ++++++ packages/vue/src/fireworks.vue | 6 ++++++ 5 files changed, 42 insertions(+) diff --git a/packages/fireworks-js/src/fireworks.ts b/packages/fireworks-js/src/fireworks.ts index 7f52014..4edd09d 100644 --- a/packages/fireworks-js/src/fireworks.ts +++ b/packages/fireworks-js/src/fireworks.ts @@ -27,6 +27,7 @@ export class Fireworks { private readonly resize: Resize private readonly mouse: Mouse private readonly raf: RequestAnimationFrame + private readonly events: FireworksTypes.Events = {} constructor( container: Element | HTMLCanvasElement, @@ -160,6 +161,18 @@ export class Fireworks { this.updateOptions({ boundaries }) } + addEventListener(type: keyof FireworksTypes.Events, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void { + if (!this.events[type]) { + this.events[type] = new Event(type) + } + + this.canvas.addEventListener(type, listener, options) + } + + removeEventListener(type: keyof FireworksTypes.Events, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void { + this.canvas.removeEventListener(type, listener, options) + } + private createCanvas(el: Element | HTMLCanvasElement): void { if (el instanceof HTMLCanvasElement) { if (!el.isConnected) { @@ -180,6 +193,7 @@ export class Fireworks { if (!this.ctx || !this.running) return const { opacity, lineStyle, lineWidth } = this.opts + const tracesStart = this.traces.length this.ctx.globalCompositeOperation = 'destination-out' this.ctx.fillStyle = `rgba(0, 0, 0, ${opacity})` this.ctx.fillRect(0, 0, this.width, this.height) @@ -191,6 +205,10 @@ export class Fireworks { this.initTrace() this.drawTrace() this.drawExplosion() + + if (tracesStart > this.traces.length && this.events.explosion) { + this.canvas.dispatchEvent(this.events.explosion) + } } private createTrace(): void { diff --git a/packages/fireworks-js/src/types.ts b/packages/fireworks-js/src/types.ts index 83f2cbc..60fc51d 100644 --- a/packages/fireworks-js/src/types.ts +++ b/packages/fireworks-js/src/types.ts @@ -87,6 +87,10 @@ export namespace FireworksTypes { brightness: MinMax decay: MinMax } + + export interface Events { + explosion?: Event + } } export type FireworksOptions = RecursivePartial @@ -103,6 +107,8 @@ export interface FireworksHandlers | 'updateBoundaries' | 'updateSize' | 'currentOptions' + | 'addEventListener' + | 'removeEventListener' > { waitStop(): Promise stop(): void diff --git a/packages/preact/src/index.tsx b/packages/preact/src/index.tsx index 324f3f1..0200376 100644 --- a/packages/preact/src/index.tsx +++ b/packages/preact/src/index.tsx @@ -48,6 +48,12 @@ const Fireworks = React.forwardRef( }, updateBoundaries(boundaries) { fireworks.current!.updateBoundaries(boundaries) + }, + addEventListener(type, listener, options) { + fireworks.current!.addEventListener(type, listener, options) + }, + removeEventListener(type, listener, options) { + fireworks.current!.removeEventListener(type, listener, options) } })) diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index 1aeda75..58317c6 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -46,6 +46,12 @@ const Fireworks = React.forwardRef( }, updateBoundaries(boundaries) { fireworks.current!.updateBoundaries(boundaries) + }, + addEventListener(type, listener, options) { + fireworks.current!.addEventListener(type, listener, options) + }, + removeEventListener(type, listener, options) { + fireworks.current!.removeEventListener(type, listener, options) } })) diff --git a/packages/vue/src/fireworks.vue b/packages/vue/src/fireworks.vue index 2975bde..78d9091 100644 --- a/packages/vue/src/fireworks.vue +++ b/packages/vue/src/fireworks.vue @@ -62,6 +62,12 @@ defineExpose({ }, updateBoundaries(boundaries) { fireworks.value!.updateBoundaries(boundaries) + }, + addEventListener(type, listener, options) { + fireworks.value!.addEventListener(type, listener, options) + }, + removeEventListener(type, listener, options) { + fireworks.value!.removeEventListener(type, listener, options) } }) From 139945af03825e141f48910fba280c648e1be595 Mon Sep 17 00:00:00 2001 From: sentisso Date: Tue, 7 Mar 2023 11:13:50 +0100 Subject: [PATCH 2/3] adding a basic example of usage of the explosion event --- examples/basic/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/basic/src/index.ts b/examples/basic/src/index.ts index fc9dd0f..87d5895 100644 --- a/examples/basic/src/index.ts +++ b/examples/basic/src/index.ts @@ -17,6 +17,10 @@ const fireworks = new Fireworks(app, { // resizeObserver.observe(app) +fireworks.addEventListener('explosion', () => { + console.log('One firework just exploded!') +}) + fireworks.start() const start = el( From 4b8eaababd0fac6b13da8cfc3713f638fb0aa34a Mon Sep 17 00:00:00 2001 From: sentisso Date: Tue, 7 Mar 2023 11:15:23 +0100 Subject: [PATCH 3/3] pnpm format --- packages/fireworks-js/src/fireworks.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/fireworks-js/src/fireworks.ts b/packages/fireworks-js/src/fireworks.ts index 4edd09d..c0b0d02 100644 --- a/packages/fireworks-js/src/fireworks.ts +++ b/packages/fireworks-js/src/fireworks.ts @@ -161,7 +161,11 @@ export class Fireworks { this.updateOptions({ boundaries }) } - addEventListener(type: keyof FireworksTypes.Events, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void { + addEventListener( + type: keyof FireworksTypes.Events, + listener: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions + ): void { if (!this.events[type]) { this.events[type] = new Event(type) } @@ -169,7 +173,11 @@ export class Fireworks { this.canvas.addEventListener(type, listener, options) } - removeEventListener(type: keyof FireworksTypes.Events, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void { + removeEventListener( + type: keyof FireworksTypes.Events, + listener: EventListenerOrEventListenerObject, + options?: boolean | EventListenerOptions + ): void { this.canvas.removeEventListener(type, listener, options) }