Revert "Refactor logging and formatting"

This reverts commit 83ce890ef4.

js/utils/CommonUtils.js

@@ -128,7 +128,7 @@ export function getStateSignature(layers) {
     return JSON.stringify(layers.map((layer, index) => {
         const sig = {
             index: index,
-            x: Math.round(layer.x * 100) / 100,
+            x: Math.round(layer.x * 100) / 100, // Round to avoid floating point precision issues
             y: Math.round(layer.y * 100) / 100,
             width: Math.round(layer.width * 100) / 100,
             height: Math.round(layer.height * 100) / 100,
@@ -137,11 +137,15 @@ export function getStateSignature(layers) {
             blendMode: layer.blendMode || 'normal',
             opacity: layer.opacity !== undefined ? Math.round(layer.opacity * 100) / 100 : 1
         };
+        
+        // Include imageId if available
         if (layer.imageId) {
             sig.imageId = layer.imageId;
         }
+        
+        // Include image src as fallback identifier
         if (layer.image && layer.image.src) {
-            sig.imageSrc = layer.image.src.substring(0, 100);
+            sig.imageSrc = layer.image.src.substring(0, 100); // First 100 chars to avoid huge signatures
         }
         
         return sig;

js/utils/WebSocketManager.js

@@ -10,8 +10,8 @@ class WebSocketManager {
         this.isConnecting = false;
         this.reconnectAttempts = 0;
         this.maxReconnectAttempts = 10;
-        this.reconnectInterval = 5000;
-        this.ackCallbacks = new Map();
+        this.reconnectInterval = 5000; // 5 seconds
+        this.ackCallbacks = new Map(); // Store callbacks for messages awaiting ACK
         this.messageIdCounter = 0;
 
         this.connect();
@@ -54,6 +54,7 @@ class WebSocketManager {
                             this.ackCallbacks.delete(data.nodeId);
                         }
                     }
+                    // Handle other incoming messages if needed
                 } catch (error) {
                     log.error("Error parsing incoming WebSocket message:", error);
                 }
@@ -72,6 +73,7 @@ class WebSocketManager {
             this.socket.onerror = (error) => {
                 this.isConnecting = false;
                 log.error("WebSocket error:", error);
+                // The onclose event will be fired next, which will handle reconnection.
             };
         } catch (error) {
             this.isConnecting = false;
@@ -104,11 +106,12 @@ class WebSocketManager {
                 log.debug("Sent message:", data);
                 if (requiresAck) {
                     log.debug(`Message for nodeId ${nodeId} requires ACK. Setting up callback.`);
+                    // Set a timeout for the ACK
                     const timeout = setTimeout(() => {
                         this.ackCallbacks.delete(nodeId);
                         reject(new Error(`ACK timeout for nodeId ${nodeId}`));
                         log.warn(`ACK timeout for nodeId ${nodeId}.`);
-                    }, 10000);
+                    }, 10000); // 10-second timeout
 
                     this.ackCallbacks.set(nodeId, {
                         resolve: (responseData) => {
@@ -121,14 +124,18 @@ class WebSocketManager {
                         }
                     });
                 } else {
-                    resolve();
+                    resolve(); // Resolve immediately if no ACK is needed
                 }
             } else {
                 log.warn("WebSocket not open. Queuing message.");
+                // Note: The current queueing doesn't support ACK promises well.
+                // For simplicity, we'll focus on the connected case.
+                // A more robust implementation would wrap the queued message in a function.
                 this.messageQueue.push(message);
                 if (!this.isConnecting) {
                     this.connect();
                 }
+                // For now, we reject if not connected and ACK is required.
                 if (requiresAck) {
                     reject(new Error("Cannot send message with ACK required while disconnected."));
                 }
@@ -138,11 +145,16 @@ class WebSocketManager {
 
     flushMessageQueue() {
         log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
+        // Note: This simple flush doesn't handle ACKs for queued messages.
+        // This should be acceptable as data is sent right before queueing a prompt,
+        // at which point the socket should ideally be connected.
         while (this.messageQueue.length > 0) {
             const message = this.messageQueue.shift();
             this.socket.send(message);
         }
     }
 }
-const wsUrl = `ws:
+
+// Create a singleton instance of the WebSocketManager
+const wsUrl = `ws://${window.location.host}/layerforge/canvas_ws`;
 export const webSocketManager = new WebSocketManager(wsUrl);