Merge pull request #79 from crashmax-dev/graceful-stop

feat: added `waitStop` #76

Author: crashmax-dev

README.md

@@ -265,6 +265,11 @@ Stop fireworks.\
 Type: `boolean`\
 Default: `false`
 
+#### `.waitStop(dispose)`
+Asynchronous stopping of the fireworks.\
+Type: `boolean`\
+Default: `false`
+
 #### `.pause()`
 Start/stop fireworks.
 

examples/basic/src/index.ts

@@ -3,4 +3,21 @@ import './style.css'
 
 const app = document.querySelector<HTMLDivElement>('#app')!
 const fireworks = new Fireworks(app)
-fireworks.start()
+
+const button = document.createElement('button')
+button.textContent = 'Start'
+button.style.position = 'absolute'
+button.style.zIndex = '999'
+button.addEventListener('click', () => {
+  fireworks.start()
+  stopFireworks(fireworks)
+})
+
+document.body.appendChild(button)
+
+async function stopFireworks(fireworks: Fireworks) {
+  console.time()
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  await fireworks.waitStop()
+  console.timeEnd()
+}

packages/fireworks-js/src/fireworks.ts

@@ -26,6 +26,7 @@ export class Fireworks {
   private mouse: Mouse
   private traces: Trace[] = []
   private explosions: Explosion[] = []
+  private waitStopRaf: (() => void) | null
 
   constructor(
     container: Element | HTMLCanvasElement,
@@ -77,6 +78,24 @@ export class Fireworks {
     }
   }
 
+  async waitStop(dispose?: boolean): Promise<void> {
+    if (!this.running) return
+
+    return new Promise<void>((resolve) => {
+      this.waitStopRaf = () => {
+        if (!this.waitStopRaf) return
+        requestAnimationFrame(this.waitStopRaf)
+        if (!this.traces.length && !this.explosions.length) {
+          this.waitStopRaf = null
+          this.stop(dispose)
+          resolve()
+        }
+      }
+
+      this.waitStopRaf()
+    })
+  }
+
   pause(): void {
     this.running = !this.running
     if (this.running) {
@@ -155,6 +174,8 @@ export class Fireworks {
   }
 
   private initTrace(): void {
+    if (this.waitStopRaf) return
+
     const {
       hue,
       delay,