Node group colors and toggling (draft)

js/controllers/menu_controller.js

@@ -34,8 +34,46 @@ export default class extends Controller {
          */
         const id = event?.params.node;
         const status = event?.target?.checked;
-        ATON.getSceneNode(id).toggle(status);
-        AppState.normalizedNodes.find(n => n.id === id).active = status;
+        const node = AppState.normalizedNodes.find(n => n.id === id);
+
+        if (node.children.length > 0) {
+            this.#toggleGroup(node, status);
+            this.#syncGroupCheckboxes(node, status, this.layersTarget);
+        } else {
+            ATON.getSceneNode(id).toggle(status);
+            node.active = status;
+        }
+    }
+    /**
+     * Recursively toggle children in a nodes group
+     * @param {Object} groupNode
+     * @param {Boolean} status
+     */
+    #toggleGroup(groupNode, status) {
+        for (const child of groupNode.children) {
+            if (child.model) {
+                ATON.getSceneNode(child.id).toggle(status);
+                child.active = status;
+            }
+            if (child.children.length > 0) {
+                this.#toggleGroup(child, status);
+            }
+        }
+    }
+    #syncGroupCheckboxes(groupNode, status, container) {
+        for (const child of groupNode.children) {
+            const checkbox = container.querySelector(
+                `[data-menu-node-param="${child.id}"]`
+            );
+
+            console.debug(checkbox, child.id);
+
+            if (checkbox) checkbox.checked = status;
+            
+            if (child.children.length > 0) {
+                this.#syncGroupCheckboxes(child, status, container);
+            }
+        }
     }
     /**
      * Clone a <template> by id