feat(web): 🎸 added getLayerBoundingBox method (#377)

* feat(web): 🎸 added getLayerBoundingBox method

.changeset/nervous-trains-dream.md

@@ -0,0 +1,27 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat(web): 🎸 added `getLayerBoundingBox` method
+
+Basic usage:
+
+```typescript
+const canvas = document.getElementById('dotLottie-canvas');
+
+const dotLottie = new DotLottie({
+  canvas,
+  ...
+});
+
+// Draw a rectangle around the layer 'Layer 1' after a frame is renderered
+dotLottie.addEventListener('render', () => {
+  const boundingBox = dotLottie.getLayerBoundingBox('Layer 1');
+  const context = canvas.getContext('2d');
+
+  if (boundingBox && context) {
+    const { x, y, width, height } = boundingBox;
+    context.strokeRect(x, y, width, height);
+  }
+});
+```

apps/dotlottie-web-example/src/main.ts

@@ -183,11 +183,13 @@ fetch(
   // '/multi.lottie',
   // '/markers_example.lottie',
   // './toggle.lottie',
-  './exploding_pigeon.lottie',
+  // './exploding_pigeon.lottie',
+  './lolo.json',
 )
-  .then(async (res) => res.arrayBuffer())
+  .then(async (res) => res.json())
   .then((data): void => {
-    console.log(data);
+    const allLayers = data.layers.map((layer) => layer.nm);
+
     const canvas = document.getElementById('canvas') as HTMLCanvasElement;
 
     const dotLottie = new DotLottie({
@@ -204,6 +206,20 @@ fetch(
       // useFrameInterpolation: false,
     });
 
+    dotLottie.addEventListener('render', () => {
+      allLayers.forEach((layer) => {
+        const bounds = dotLottie.getLayerBoundingBox(layer);
+
+        if (!bounds) return;
+
+        const { height, width, x, y } = bounds;
+
+        const context = canvas.getContext('2d');
+
+        context?.strokeRect(x, y, width, height);
+      });
+    });
+
     canvas.addEventListener('mousedown', () => {
       // dotLottie.postStateMachineEvent('OnPointerDown: 0.0 0.0');
       dotLottie.postPointerDownEvent(0, 0);

packages/web/src/dotlottie.ts

@@ -998,4 +998,49 @@ export class DotLottie {
   public setStateMachineStringContext(name: string, value: string): boolean {
     return this._dotLottieCore?.setStateMachineStringContext(name, value) ?? false;
   }
+
+  /**
+   * Get the bounds of a layer by its name
+   * @param layerName - The name of the layer
+   * @returns The bounds of the layer
+   *
+   * @example
+   * ```typescript
+   * // Draw a rectangle around the layer 'Layer 1'
+   * dotLottie.addEventListener('render', () => {
+   *   const boundingBox = dotLottie.getLayerBoundingBox('Layer 1');
+   *
+   *   if (boundingBox) {
+   *     const { x, y, width, height } = boundingBox;
+   *     context.strokeRect(x, y, width, height);
+   *   }
+   * });
+   * ```
+   */
+  public getLayerBoundingBox(layerName: string):
+    | {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+      }
+    | undefined {
+    const bounds = this._dotLottieCore?.getLayerBounds(layerName);
+
+    if (!bounds) return undefined;
+
+    if (bounds.size() !== 4) return undefined;
+
+    const x = bounds.get(0) as number;
+    const y = bounds.get(1) as number;
+    const width = bounds.get(2) as number;
+    const height = bounds.get(3) as number;
+
+    return {
+      x,
+      y,
+      width,
+      height,
+    };
+  }
 }