feat: adding custom event handler

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(

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,26 @@ 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 +201,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 +213,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 {

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<FireworksTypes.Options>
@@ -103,6 +107,8 @@ export interface FireworksHandlers
     | 'updateBoundaries'
     | 'updateSize'
     | 'currentOptions'
+    | 'addEventListener'
+    | 'removeEventListener'
   > {
   waitStop(): Promise<void>
   stop(): void

packages/preact/src/index.tsx

@@ -48,6 +48,12 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
       },
       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)
       }
     }))
 

packages/react/src/index.tsx

@@ -46,6 +46,12 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
       },
       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)
       }
     }))
 

packages/vue/src/fireworks.vue

@@ -62,6 +62,12 @@ defineExpose<FireworksHandlers>({
   },
   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)
   }
 })
 </script>