Merge pull request #94 from crashmax-dev/drop-singleton-options

feat: options are no longer singleton

Author: crashmax-dev

README.md

@@ -286,6 +286,9 @@ Start/stop fireworks.
 #### `.clear()`
 Cleaning the canvas from fireworks.
 
+#### `.currentOptions`
+Getting current fireworks options.
+
 #### `.updateOptions(options)`
 Force update fireworks options.\
 Type: [`options`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L3-L25)

packages/fireworks-js/src/fireworks.ts

@@ -1,12 +1,12 @@
 import { Explosion } from './explosion.js'
 import { floor, randomFloat, randomInt } from './helpers.js'
 import { Mouse } from './mouse.js'
-import { opts } from './options.js'
+import { Options } from './options.js'
 import { RequestAnimationFrame } from './raf.js'
 import { Resize } from './resize.js'
 import { Sound } from './sound.js'
 import { Trace } from './trace.js'
-import { FireworksOptions, IBoundaries, Sizes } from './types.js'
+import type { FireworksOptions, IBoundaries, Sizes } from './types.js'
 
 export class Fireworks {
   private target: Element | HTMLCanvasElement
@@ -15,29 +15,33 @@ export class Fireworks {
   private ctx: CanvasRenderingContext2D
   private width: number
   private height: number
-  private sound: Sound
-  private resize: Resize
-  private mouse: Mouse
   private traces: Trace[] = []
   private explosions: Explosion[] = []
   private waitStopRaf: (() => void) | null
-  private raf: RequestAnimationFrame
   private running = false
 
+  private readonly opts: Options
+  private readonly sound: Sound
+  private readonly resize: Resize
+  private readonly mouse: Mouse
+  private readonly raf: RequestAnimationFrame
+
   constructor(
     container: Element | HTMLCanvasElement,
     options: FireworksOptions = {}
   ) {
     this.target = container
     this.container = container
 
-    this.createCanvas(this.target)
+    this.opts = new Options()
+
     this.updateOptions(options)
+    this.createCanvas(this.target)
 
-    this.sound = new Sound()
-    this.resize = new Resize(this)
-    this.mouse = new Mouse(this.canvas)
-    this.raf = new RequestAnimationFrame(this.render.bind(this))
+    this.sound = new Sound(this.opts)
+    this.resize = new Resize(this.opts, this.updateSize.bind(this))
+    this.mouse = new Mouse(this.opts, this.canvas)
+    this.raf = new RequestAnimationFrame(this.opts, this.render.bind(this))
   }
 
   get isRunning(): boolean {
@@ -48,6 +52,10 @@ export class Fireworks {
     return __VERSION__
   }
 
+  get currentOptions(): Options {
+    return this.opts
+  }
+
   start(): void {
     if (this.running) return
 
@@ -56,18 +64,18 @@ export class Fireworks {
     }
 
     this.running = true
-    this.resize.subscribe()
-    this.mouse.subscribe()
-    this.raf.start()
+    this.resize.mount()
+    this.mouse.mount()
+    this.raf.mount()
   }
 
   stop(dispose = false): void {
     if (!this.running) return
 
     this.running = false
-    this.resize.unsubscribe()
-    this.mouse.unsubscribe()
-    this.raf.stop()
+    this.resize.unmount()
+    this.mouse.unmount()
+    this.raf.unmount()
     this.clear()
 
     if (dispose) {
@@ -96,9 +104,9 @@ export class Fireworks {
   pause(): void {
     this.running = !this.running
     if (this.running) {
-      this.raf.start()
+      this.raf.mount()
     } else {
-      this.raf.stop()
+      this.raf.unmount()
     }
   }
 
@@ -122,7 +130,7 @@ export class Fireworks {
   }
 
   updateOptions(options: FireworksOptions): void {
-    opts.updateOptions(options)
+    this.opts.update(options)
   }
 
   updateSize({
@@ -136,7 +144,7 @@ export class Fireworks {
     this.canvas.height = height
 
     this.updateBoundaries({
-      ...opts.boundaries,
+      ...this.opts.boundaries,
       width,
       height
     })
@@ -165,7 +173,7 @@ export class Fireworks {
   private render(): void {
     if (!this.ctx || !this.running) return
 
-    const { opacity, lineStyle, lineWidth } = opts
+    const { opacity, lineStyle, lineWidth } = this.opts
     this.ctx.globalCompositeOperation = 'destination-out'
     this.ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`
     this.ctx.fillRect(0, 0, this.width, this.height)
@@ -188,7 +196,7 @@ export class Fireworks {
       traceSpeed,
       acceleration,
       mouse
-    } = opts
+    } = this.opts
 
     this.traces.push(
       new Trace({
@@ -214,9 +222,10 @@ export class Fireworks {
   private initTrace(): void {
     if (this.waitStopRaf) return
 
+    const { delay, mouse } = this.opts
     if (
-      this.raf.tick > randomInt(opts.delay.min, opts.delay.max) ||
-      (this.mouse.active && opts.mouse.max > this.traces.length)
+      this.raf.tick > randomInt(delay.min, delay.max) ||
+      (this.mouse.active && mouse.max > this.traces.length)
     ) {
       this.createTrace()
       this.raf.tick = 0
@@ -245,7 +254,7 @@ export class Fireworks {
       friction,
       gravity,
       decay
-    } = opts
+    } = this.opts
 
     let particlesLength = floor(particles)
     while (particlesLength--) {

packages/fireworks-js/src/mouse.ts

@@ -1,38 +1,46 @@
-import { opts } from './options.js'
+import type { Options } from './options.js'
 
 export class Mouse {
   public active = false
   public x: number
   public y: number
 
-  constructor(private readonly canvas: HTMLCanvasElement) {
+  constructor(
+    private readonly options: Options,
+    private readonly canvas: HTMLCanvasElement
+  ) {
     this.pointerDown = this.pointerDown.bind(this)
     this.pointerUp = this.pointerUp.bind(this)
     this.pointerMove = this.pointerMove.bind(this)
   }
 
-  subscribe(): void {
+  private get mouseOptions() {
+    return this.options.mouse
+  }
+
+  mount(): void {
     this.canvas.addEventListener('pointerdown', this.pointerDown)
     this.canvas.addEventListener('pointerup', this.pointerUp)
     this.canvas.addEventListener('pointermove', this.pointerMove)
   }
 
-  unsubscribe(): void {
+  unmount(): void {
     this.canvas.removeEventListener('pointerdown', this.pointerDown)
     this.canvas.removeEventListener('pointerup', this.pointerUp)
     this.canvas.removeEventListener('pointermove', this.pointerMove)
   }
 
   private usePointer(event: PointerEvent, active: boolean): void {
-    if (opts.mouse.click || opts.mouse.move) {
+    const { click, move } = this.mouseOptions
+    if (click || move) {
       this.x = event.pageX - this.canvas.offsetLeft
       this.y = event.pageY - this.canvas.offsetTop
       this.active = active
     }
   }
 
   private pointerDown(event: PointerEvent): void {
-    this.usePointer(event, opts.mouse.click)
+    this.usePointer(event, this.mouseOptions.click)
   }
 
   private pointerUp(event: PointerEvent): void {

packages/fireworks-js/src/options.ts

@@ -9,7 +9,7 @@ import type {
   MinMax
 } from './types.js'
 
-class Options implements FireworksOptions {
+export class Options implements FireworksOptions {
   public hue: MinMax
   public rocketsPoint: MinMax
   public opacity: number
@@ -109,10 +109,7 @@ class Options implements FireworksOptions {
     }
   }
 
-  updateOptions<T extends FireworksOptions>(options: T): void {
+  update<T extends FireworksOptions>(options: T): void {
     Object.assign(this, deepMerge(this, options))
   }
 }
-
-const opts = new Options()
-export { opts }

packages/fireworks-js/src/raf.ts

@@ -1,4 +1,4 @@
-import { opts } from './options.js'
+import type { Options } from './options.js'
 
 export class RequestAnimationFrame {
   public tick = 0
@@ -8,9 +8,12 @@ export class RequestAnimationFrame {
   private tolerance = 0.1
   private now: number
 
-  constructor(private readonly render: () => void) {}
+  constructor(
+    private readonly options: Options,
+    private readonly render: () => void
+  ) {}
 
-  start(): void {
+  mount(): void {
     this.now = performance.now()
     const interval = 1000 / this.fps
 
@@ -21,14 +24,14 @@ export class RequestAnimationFrame {
       if (delta >= interval - this.tolerance) {
         this.render()
         this.now = timestamp - (delta % interval)
-        this.tick += (delta * (opts.intensity * Math.PI)) / 1000
+        this.tick += (delta * (this.options.intensity * Math.PI)) / 1000
       }
     }
 
     this.rafId = requestAnimationFrame(raf)
   }
 
-  stop() {
+  unmount() {
     cancelAnimationFrame(this.rafId)
   }
 }

packages/fireworks-js/src/resize.ts

@@ -1,24 +1,26 @@
-import type { Fireworks } from './index.js'
-import { opts } from './options.js'
+import type { Options } from './options.js'
 
 export class Resize {
-  constructor(private readonly fireworks: Fireworks) {
+  constructor(
+    private readonly options: Options,
+    private readonly updateSize: () => void
+  ) {
     this.handleResize = this.handleResize.bind(this)
   }
 
-  subscribe(): void {
-    if (opts.autoresize) {
+  mount(): void {
+    if (this.options.autoresize) {
       window.addEventListener('resize', this.handleResize)
     }
   }
 
-  unsubscribe(): void {
-    if (opts.autoresize) {
+  unmount(): void {
+    if (this.options.autoresize) {
       window.removeEventListener('resize', this.handleResize)
     }
   }
 
   private handleResize(): void {
-    this.fireworks.updateSize()
+    this.updateSize()
   }
 }