feat: track canvas emptiness based on shape count

Author: coderomm

apps/collabydraw/canvas-engine/CanvasEngine.ts

@@ -59,6 +59,10 @@ export class CanvasEngine {
     | ((participants: RoomParticipants[]) => void)
     | null;
   private onConnectionChange: ((isConnected: boolean) => void) | null;
+  private onShapeCountChange: ((count: number) => void) | null = null;
+  public setOnShapeCountChange(callback: (count: number) => void) {
+    this.onShapeCountChange = callback;
+  }
 
   private clicked: boolean;
   public outputScale: number = 1;
@@ -704,6 +708,7 @@ export class CanvasEngine {
     }
 
     this.existingShapes.push(shape);
+    this.notifyShapeCountChange();
 
     if (this.isStandalone) {
       try {
@@ -1084,6 +1089,7 @@ export class CanvasEngine {
       };
 
       this.existingShapes.push(newShape);
+      this.notifyShapeCountChange();
 
       if (this.isStandalone) {
         localStorage.setItem(
@@ -1712,6 +1718,7 @@ export class CanvasEngine {
     if (shapeIndex !== -1) {
       const erasedShape = this.existingShapes[shapeIndex];
       this.existingShapes.splice(shapeIndex, 1);
+      this.notifyShapeCountChange();
       this.clearCanvas();
 
       if (this.isStandalone) {
@@ -1791,6 +1798,7 @@ export class CanvasEngine {
 
   clearAllShapes() {
     this.existingShapes = [];
+    this.notifyShapeCountChange();
     this.clearCanvas();
     if (this.isStandalone) {
       localStorage.removeItem(LOCALSTORAGE_CANVAS_KEY);
@@ -1835,7 +1843,6 @@ export class CanvasEngine {
         }
       }
     });
-
     this.clearCanvas();
   }
 
@@ -1845,4 +1852,8 @@ export class CanvasEngine {
     );
     this.clearCanvas();
   }
+
+  private notifyShapeCountChange() {
+    this.onShapeCountChange?.(this.existingShapes.length);
+  }
 }

apps/collabydraw/components/canvas/CanvasBoard.tsx

@@ -204,6 +204,12 @@ export default function CanvasBoard() {
             mode === 'room' ? (connectionStatus) => setIsConnected(connectionStatus) : null,
             userRef.current.encryptionKey
         );
+        engine.setOnShapeCountChange((count: number) => {
+            setCanvasEngineState(prev => ({
+                ...prev,
+                isCanvasEmpty: count === 0
+            }));
+        });
         return engine;
     }, [canvasEngineState.canvasColor, mode]);