fix(Canvas): invalidate _objectsToRender on stack change (#9387)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Canvas): invalidate `_objectsToRender` on stack change [#9387](https://github.com/fabricjs/fabric.js/pull/9387)
 - ci(e2e): fix babel compiling error [#9388](https://github.com/fabricjs/fabric.js/pull/9388)
 - Breaking: Remove node 14 [#9383](https://github.com/fabricjs/fabric.js/pull/9383)
 - chore(): Rename exports that conflicts with JS/WEB api ( Object, Text, Image ). Kept backward compatibility with deprecation notice [#9172](https://github.com/fabricjs/fabric.js/pull/9172)

src/canvas/SelectableCanvas.ts

@@ -213,10 +213,10 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    * @type FabricObject[]
    * @private
    */
-  _objectsToRender?: FabricObject[] = [];
+  _objectsToRender?: FabricObject[];
 
   /**
-   * hold a referenfce to a data structure that contains information
+   * hold a reference to a data structure that contains information
    * on the current on going transform
    * @type
    * @private
@@ -344,6 +344,11 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     super._onObjectRemoved(obj);
   }
 
+  _onStackOrderChanged() {
+    this._objectsToRender = undefined;
+    super._onStackOrderChanged();
+  }
+
   /**
    * Divides objects in two groups, one to render immediately
    * and one to render as activeGroup.

src/canvas/__tests__/SelectableCanvas.spec.ts

@@ -0,0 +1,60 @@
+import { FabricObject } from '../../shapes/Object/FabricObject';
+import { Canvas } from '../Canvas';
+
+describe('Canvas', () => {
+  describe('invalidating `_objectsToRender`', () => {
+    test('initial state', () => {
+      const canvas = new Canvas();
+      expect(canvas._objectsToRender).toBeUndefined();
+    });
+
+    test('mousedown', () => {
+      const canvas = new Canvas();
+      canvas.add(new FabricObject({ width: 10, height: 10 }));
+      canvas._objectsToRender = [];
+      canvas
+        .getSelectionElement()
+        .dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5 }));
+      expect(canvas._objectsToRender).toBeUndefined();
+    });
+
+    test('object added/removed', () => {
+      const canvas = new Canvas();
+      canvas._objectsToRender = [];
+      const object = new FabricObject({ width: 10, height: 10 });
+      canvas.add(object);
+      expect(canvas._objectsToRender).toBeUndefined();
+      canvas._objectsToRender = [];
+      canvas.remove(object);
+      expect(canvas._objectsToRender).toBeUndefined();
+    });
+
+    test('stack change', () => {
+      const canvas = new Canvas();
+      const object = new FabricObject({ width: 10, height: 10 });
+      const object2 = new FabricObject({
+        left: 5,
+        top: 5,
+        width: 10,
+        height: 10,
+      });
+      canvas.add(object, object2);
+
+      canvas._objectsToRender = [];
+      canvas.sendObjectBackwards(object2);
+      expect(canvas._objectsToRender).toBeUndefined();
+
+      canvas._objectsToRender = [];
+      canvas.bringObjectForward(object2);
+      expect(canvas._objectsToRender).toBeUndefined();
+
+      canvas._objectsToRender = [];
+      canvas.bringObjectToFront(object);
+      expect(canvas._objectsToRender).toBeUndefined();
+
+      canvas._objectsToRender = [];
+      canvas.sendObjectToBack(object);
+      expect(canvas._objectsToRender).toBeUndefined();
+    });
+  });
+});