Handle edge cases from add()ing elements twice (#122)

Author: anderoonies

src/graphics/index.js

@@ -466,6 +466,9 @@ class GraphicsManager extends Manager {
             elem.stop();
         }
         elem.alive = false;
+        // mark the element as having invalidated sort, so in the case that it's
+        // add()ed later, a re-sort will happen and trigger an update in the pool size
+        elem._sortInvalidated = true;
         if (elem._hasAccessibleDOMElement) {
             const focusButtonID = HIDDEN_KEYBOARD_NAVIGATION_DOM_ELEMENT_ID(elem._id);
             document.getElementById(focusButtonID)?.remove();
@@ -679,7 +682,6 @@ class GraphicsManager extends Manager {
         let elem;
         let sortPool;
         const context = this.getContext();
-        let numberRemovedElementsFound = 0;
         for (let i = 0; i < this.elementPoolSize; i++) {
             elem = this.elementPool[i];
 
@@ -691,15 +693,21 @@ class GraphicsManager extends Manager {
                 elem.draw(context);
             } else {
                 sortPool = true;
-                numberRemovedElementsFound++;
             }
         }
         // sort all dead elements to the end of the pool
         // and all elements with lower layer before elements
         // with higher layer
         if (sortPool) {
-            this.elementPoolSize -= numberRemovedElementsFound;
             this.elementPool.sort((a, b) => b.alive - a.alive || a.layer - b.layer);
+            let lastAliveElementIndex = -1;
+            for (let i = this.elementPool.length - 1; i >= 0; i--) {
+                if (this.elementPool[i].alive) {
+                    lastAliveElementIndex = i;
+                    break;
+                }
+            }
+            this.elementPoolSize = lastAliveElementIndex + 1;
         }
     }
 

test/graphics.test.js

@@ -276,6 +276,32 @@ describe('Graphics', () => {
             expect(g.elementPool[1].alive).toBeTrue();
             expect(g.elementPool[2].alive).toBeFalse();
         });
+        it('Properly handles duplicated elements', () => {
+            const g = new Graphics({ shouldUpdate: false });
+            const a = new Circle(1);
+            const b = new Circle(1);
+            const c = new Circle(1);
+            g.add(a);
+            g.add(b);
+            g.add(c);
+            g.add(a);
+            expect(g.elementPool).toEqual([a, b, c, a]);
+            expect(g.elementPoolSize).toEqual(4);
+            g.remove(a);
+            expect(g.elementPool).toEqual([a, b, c, a]);
+            expect(g.elementPoolSize).toEqual(4);
+            g.redraw();
+            expect(g.elementPool).toEqual([b, c, a, a]);
+            expect(g.elementPoolSize).toEqual(2);
+            g.add(a);
+            g.redraw();
+            expect(g.elementPool).toEqual([b, c, a, a]);
+            expect(g.elementPoolSize).toEqual(3);
+            a.layer = -1;
+            g.redraw();
+            expect(g.elementPool).toEqual([a, a, b, c]);
+            expect(g.elementPoolSize).toEqual(4);
+        });
     });
     describe('setBackgroundColor', () => {
         it('Causes drawBackground to be invoked in redraw()', () => {