Fix: issue with local bounds cache not being invalidated when a child is removed

src/scene/container/Container.ts

@@ -562,7 +562,9 @@ export class Container<C extends ContainerChild = ContainerChild> extends EventE
     /**
      * A value that increments each time the container is modified
      * the first 12 bits represent the container changes (eg transform, alpha, visible etc)
-     * the second 12 bits represent the view changes (eg texture swap, geometry change etc)
+     * the second 12 bits represent:
+     *      - for view changes (eg texture swap, geometry change etc)
+     *      - containers changes (eg children added, removed etc)
      *
      *  view          container
      * [000000000000][00000000000]
@@ -658,6 +660,8 @@ export class Container<C extends ContainerChild = ContainerChild> extends EventE
         this.emit('childAdded', child, this, this.children.length - 1);
         child.emit('added', this);
 
+        this._didChangeId += 1 << 12;
+
         if (child._zIndex !== 0)
         {
             child.depthOfChildModified();
@@ -691,6 +695,8 @@ export class Container<C extends ContainerChild = ContainerChild> extends EventE
 
         if (index > -1)
         {
+            this._didChangeId += 1 << 12;
+
             this.children.splice(index, 1);
 
             if (this.renderGroup)

tests/scene/getLocalBounds.tests.ts

@@ -419,4 +419,54 @@ describe('getLocalBounds', () =>
 
         expect(child._localBoundsCacheData.didChange).toEqual(true);
     });
+
+    it('should measure correctly if a child has been added and removed', async () =>
+    {
+        const container = new Container({ label: 'container' });
+
+        const bounds1 = container.getLocalBounds();
+
+        expect(bounds1).toMatchObject({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
+
+        const child = new DummyView({ label: 'child' });
+
+        container.addChild(child);
+
+        const bounds2 = container.getLocalBounds();
+
+        expect(bounds2).toMatchObject({ minX: 0, minY: 0, maxX: 100, maxY: 100 });
+
+        container.removeChild(child);
+
+        const bounds3 = container.getLocalBounds();
+
+        expect(bounds3).toMatchObject({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
+    });
+
+    it('should measure correctly if a nested child has been added and removed', async () =>
+    {
+        const container = new Container({ label: 'container' });
+
+        const container2 = new Container({ label: 'container2' });
+
+        container.addChild(container2);
+
+        const bounds1 = container.getLocalBounds();
+
+        expect(bounds1).toMatchObject({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
+
+        const child = new DummyView({ label: 'child' });
+
+        container2.addChild(child);
+
+        const bounds2 = container.getLocalBounds();
+
+        expect(bounds2).toMatchObject({ minX: 0, minY: 0, maxX: 100, maxY: 100 });
+
+        container2.removeChild(child);
+
+        const bounds3 = container.getLocalBounds();
+
+        expect(bounds3).toMatchObject({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
+    });
 });