feat: 🎸 add destroy method (#46)

* feat: 🎸 add destroy method * chore: 🤖 add README * chore: 🤖 add changeset * chore: 🤖 update example
LottieFiles · Nov 13, 2023 · 126a410 · 126a410
1 parent 541f491
commit 126a410
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/.changeset/cuddly-laws-clap.md b/.changeset/cuddly-laws-clap.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 add destroy method
diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
@@ -44,6 +44,7 @@ app.innerHTML = `
     <input type="checkbox" id="loopToggle" checked />
     <label for="speed" class="speed-label">Speed: <span id="speed-value">x1</span></label>
     <input type="range" id="speed" min="0.1" max="5" step="0.1" value="1" class="speed-slider" />
+    <button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
   </div>
 </div>
 `;
@@ -73,8 +74,10 @@ allCanvas.forEach((canvas) => {
 fetch('/hamster.lottie')
   .then(async (res) => res.arrayBuffer())
   .then((data): void => {
+    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+
     const dotLottie = new DotLottie({
-      canvas: document.getElementById('canvas') as HTMLCanvasElement,
+      canvas,
       // src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',
       // src: '/lolo.json',
       data,
@@ -89,6 +92,13 @@ fetch('/hamster.lottie')
     const loopToggle = document.getElementById('loopToggle') as HTMLInputElement;
     const speedSlider = document.getElementById('speed') as HTMLInputElement;
     const speedValueSpan = document.getElementById('speed-value') as HTMLSpanElement;
+    const destroyButton = document.getElementById('destroy') as HTMLButtonElement;
+
+    destroyButton.addEventListener('click', () => {
+      canvas.remove();
+
+      dotLottie.destroy();
+    });
 
     playPauseButton.addEventListener('click', () => {
       if (dotLottie.playing) {

diff --git a/packages/web/README.md b/packages/web/README.md
@@ -132,16 +132,17 @@ const dotLottie = new DotLottie({
 
 ### Methods
 
-| Method                                                    | Description                                                                             |
-| --------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `play()`                                                  | Begins playback from the current animation position.                                    |
-| `pause()`                                                 | Pauses the animation without resetting its position.                                    |
-| `stop()`                                                  | Halts playback and returns the animation to its initial frame.                          |
-| `setSpeed(speed: number)`                                 | Sets the playback speed with the given multiplier.                                      |
-| `setLoop(loop: boolean)`                                  | Configures whether the animation should loop continuously.                              |
-| `setFrame(frame: number)`                                 | Directly navigates the animation to a specified frame.                                  |
-| `addEventListener(event: string, listener: Function)`     | Registers a function to respond to a specific animation event.                          |
-| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
+| Method                                                    | Description                                                                                                                                                       |
+| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `play()`                                                  | Begins playback from the current animation position.                                                                                                              |
+| `pause()`                                                 | Pauses the animation without resetting its position.                                                                                                              |
+| `stop()`                                                  | Halts playback and returns the animation to its initial frame.                                                                                                    |
+| `setSpeed(speed: number)`                                 | Sets the playback speed with the given multiplier.                                                                                                                |
+| `setLoop(loop: boolean)`                                  | Configures whether the animation should loop continuously.                                                                                                        |
+| `setFrame(frame: number)`                                 | Directly navigates the animation to a specified frame.                                                                                                            |
+| `addEventListener(event: string, listener: Function)`     | Registers a function to respond to a specific animation event.                                                                                                    |
+| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event.                                                                           |
+| `destroy()`                                               | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
 
 ### Static Methods
 

diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
@@ -432,5 +432,15 @@ export class DotLottie {
     WasmLoader.setWasmUrl(url);
   }
 
+  /**
+   * Destroys the DotLottie instance.
+   *
+   */
+  public destroy(): void {
+    this._eventManager.removeAllEventListeners();
+    this._context = null;
+    this._renderer = null;
+  }
+
   // #endregion
 }
diff --git a/packages/web/src/event-manager.ts b/packages/web/src/event-manager.ts
@@ -152,4 +152,8 @@ export class EventManager {
 
     listeners?.forEach((listener) => listener(event));
   }
+
+  public removeAllEventListeners(): void {
+    this._eventListeners.clear();
+  }
 }