feat(color): allow coloring roup and child nodes

Author: pixelass

README.md

@@ -112,16 +112,19 @@ Colors a node depending on the node title (case-insensitive).
 
 - Colors > Custom (only works in Color Mode: "default")
 
+![image](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/f0c4dc53-0e40-480d-a3f9-09b50a3ab56d)
+
 **Groups**
 
 - Edit group > Color > Custom
-- Edit group > freeze/unfreeze (pins group and child nodes)
+- Edit group > Color > Color all (colors Group and child Nodes)
+- Edit group > freeze/unfreeze (pins Group and child Nodes)
 
 ![image](https://github.com/failfa-st/hyv/assets/1148334/7558fcfb-1733-4d78-904b-50891f29fa68)
 
-**Screenshot from Nodes (similar for Groups)**  
+**Colors**
 
-![image](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/657d1a6c-d4d9-4091-9a35-16fa9ca50489)
+![image](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/c43c2c7b-1eb5-4827-ba10-c53cc1b58100)
 
 
 **Canvas**  

extensions/colors.js

@@ -279,6 +279,8 @@ app.registerExtension({
     LGraphCanvas.onMenuNodeColors = function (value, options, e, menu, node) {
       const response = onMenuNodeColors.apply(this, arguments);
       const menuRoot = menu.current_submenu.root;
+      const isGroup = node instanceof LGraphGroup;
+
       menuRoot.append(
         $el("div.litemenu-entry.submenu", [
           $el(
@@ -313,6 +315,47 @@ app.registerExtension({
           ),
         ]),
       );
+      if (isGroup) {
+        menuRoot.append(
+          $el("div.litemenu-entry.submenu", [
+            $el(
+              "label",
+              {
+                style: {
+                  position: "relative",
+                  overflow: "hidden",
+                  display: "block",
+                  paddingLeft: "4px",
+                  borderLeft: "8px solid #222",
+                },
+              },
+              [
+                "Color all",
+                $el("input", {
+                  type: "color",
+                  style: {
+                    position: "absolute",
+                    right: "200%",
+                  },
+                  oninput(event) {
+                    node.recomputeInsideNodes();
+                    node.bgcolor = event.target.value;
+                    node.color = shadeHexColor(node.bgcolor);
+                    node._nodes.forEach((node_) => {
+                      node_.bgcolor = node.bgcolor;
+                      node_.color = node.color;
+                    });
+                    // TODO: check if we can adjust this
+                    // node.title_color = getContrastColor(node.bgcolor);
+
+                    node.setDirtyCanvas(true, true);
+                  },
+                }),
+              ],
+            ),
+          ]),
+        );
+      }
       return response;
     };
     app.ui.settings.addSetting({