feat: node canvas grid

public/scripts/ledlab-app.js

@@ -33,26 +33,26 @@ class LEDLabApp {
     }
 
     initComponents() {
-        // Initialize Matrix Display component
+        // Initialize Node Canvas Grid component (new multi-canvas view)
+        const gridSection = document.querySelector('.matrix-grid-section');
+        if (gridSection) {
+            this.nodeCanvasGrid = new NodeCanvasGrid(gridSection, this.viewModel, this.eventBus);
+            this.nodeCanvasGrid.mount();
+        }
+
+        // Initialize Preset Controls component (now works with floating controls)
+        const floatingControls = document.querySelector('#floating-controls');
+        if (floatingControls) {
+            this.presetControls = new PresetControls(floatingControls, this.viewModel, this.eventBus);
+            this.presetControls.mount();
+        }
+
+        // Keep old Matrix Display component for backwards compatibility with settings view
         const matrixContainer = document.querySelector('.matrix-section');
         if (matrixContainer) {
             this.matrixDisplay = new MatrixDisplay(matrixContainer, this.viewModel, this.eventBus);
             this.matrixDisplay.mount();
         }
-
-        // Initialize Preset Controls component
-        const controlsContainer = document.querySelector('.control-section');
-        if (controlsContainer) {
-            this.presetControls = new PresetControls(controlsContainer, this.viewModel, this.eventBus);
-            this.presetControls.mount();
-        }
-
-        // Initialize Node Discovery component
-        const nodeContainer = document.querySelector('#node-list').parentElement;
-        if (nodeContainer) {
-            this.nodeDiscovery = new NodeDiscovery(nodeContainer, this.viewModel, this.eventBus);
-            this.nodeDiscovery.mount();
-        }
     }
 
     connectWebSocket() {
@@ -180,13 +180,6 @@ class LEDLabApp {
             });
         });
 
-        this.eventBus.subscribe('broadcastToAll', (data) => {
-            this.sendWebSocketMessage({
-                type: 'broadcastToAll',
-                ...data
-            });
-        });
-
         this.eventBus.subscribe('selectNode', (data) => {
             this.sendWebSocketMessage({
                 type: 'selectNode',
@@ -194,13 +187,6 @@ class LEDLabApp {
             });
         });
 
-        this.eventBus.subscribe('selectBroadcast', (data) => {
-            this.sendWebSocketMessage({
-                type: 'selectBroadcast',
-                ...data
-            });
-        });
-
         this.eventBus.subscribe('updateFrameRate', (data) => {
             this.sendWebSocketMessage({
                 type: 'updateFrameRate',
@@ -235,10 +221,6 @@ class LEDLabApp {
     sendToNode(nodeIp, message) {
         this.viewModel.publish('sendToNode', { nodeIp, message });
     }
-
-    broadcastToAll(message) {
-        this.viewModel.publish('broadcastToAll', { message });
-    }
 }
 
 // Initialize the app when DOM is loaded