feat: add positive/negative colors

blib-la · Jul 30, 2023 · cbe3fca · cbe3fca
1 parent 0e97276
commit cbe3fca
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,8 @@ Extensions for ComfyUI
 - [Settings](#settings)
   * [Options](#options)
   * [Colored nodes](#colored-nodes)
+    + [Positive Negative](#positive-negative)
+    + [Dynamic colors](#dynamic-colors)
 - [Buttons:](#buttons)
   * [Pin or Unpin all Nodes](#pin-or-unpin-all-nodes)
 
@@ -54,20 +56,37 @@ git pull
 
 ### Options
 
-| Name               | default   | description                                                       |
-|--------------------|-----------|-------------------------------------------------------------------|
-| Links Render Mode  | `2`       | Render mode of connector lines                                    |
-| Force Snap to Grid | `false`   | Always snap nodes to grid                                         |
-| Force Box Shape    | `false`   | remove round corners permanently                                  |
-| Render shadows     | `true`    | show/hide shadows                                                 |
-| Connections Width  | `3`       | width of connector lines                                          |
-| Font size          | `10`      | font-size of textareas                                            |
-| Rainbow Nodes      | `default` | Color nodes in rainbow colors  (default, plain, by type, rainbow) |
+| Name               | default   | description                                                                          |
+|--------------------|-----------|--------------------------------------------------------------------------------------|
+| Links Render Mode  | `2`       | Render mode of connector lines                                                       |
+| Force Snap to Grid | `false`   | Always snap nodes to grid                                                            |
+| Force Box Shape    | `false`   | remove round corners permanently                                                     |
+| Render shadows     | `true`    | show/hide shadows                                                                    |
+| Connections Width  | `3`       | width of connector lines                                                             |
+| Font size          | `10`      | font-size of textareas                                                               |
+| Colored Nodes      | `default` | Color nodes in dynamic colors  (default, plain, by type, rainbow, positive negative) |
 
 ### Colored nodes
 
 Automatically adjusts the colors of the nodes.
 
+**positive\negative**: Adjusts the color based on the title
+
+#### Positive Negative
+
+The title is case-insensitive
+
+- negative in title = red
+- positive in title = green
+
+![image](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/a1a366ab-7a7f-4d10-b752-7e313f0c7728)
+
+#### Dynamic colors
+
+- plain colors all nodes as grey except for "Note" (yellow)
+- by type colors a node by its type
+- rainbow colors each node in rainbow colors (top left to bottom right)
+
 **plain** | **by type** | **rainbow**
 
 ![nodecolor](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/8d61883a-184a-4897-a216-01cb1b1e4038)

diff --git a/extensions/colors.js b/extensions/colors.js
@@ -57,7 +57,6 @@ function hslToHex(h, s, l) {
 }
 
 function rainbowify(app) {
-  console.log("RAINBOW");
   // Sort by position on canvas
   const nodes = [...app.graph._nodes].sort((a, b) => {
     if (a.pos[1] > b.pos[1]) {
@@ -77,7 +76,6 @@ function rainbowify(app) {
 }
 
 function uncolor(app) {
-  console.log("UNCOLOR");
   app.graph._nodes.forEach((node) => {
     if (node.type.toLowerCase() === "note") {
       const [h, s, l] = colors.note;
@@ -122,56 +120,78 @@ function colorNode(node) {
   }
 }
 function colorByType(app) {
-  console.log("TYPE");
   app.graph._nodes.forEach((node) => {
     colorNode(node);
   });
   app.graph.change();
 }
 
+function colorPositiveNegative(app) {
+  app.graph._nodes.forEach((node) => {
+    if (node.title.toLowerCase().includes("positive")) {
+      const bgcolor = hslToHex(120 / 360, 0.4, 0.3);
+      const color = hslToHex(120 / 360, 0.4, 0.2);
+      node.bgcolor = bgcolor;
+      node.color = color;
+    } else if (node.title.toLowerCase().includes("negative")) {
+      const bgcolor = hslToHex(0, 0.4, 0.3);
+      const color = hslToHex(0, 0.4, 0.2);
+      node.bgcolor = bgcolor;
+      node.color = color;
+    }
+  });
+  app.graph.change();
+}
+
 /**
  * Colors
  */
 
-const colorModes = ["default", "plain", "rainbow", "type"];
+function setColorMode(value, app) {
+  switch (value) {
+    case 1:
+      app.graph.afterChange = () => {
+        uncolor(app);
+      };
+      uncolor(app);
+      break;
+    case 2:
+      app.graph.afterChange = () => {
+        rainbowify(app);
+      };
+      rainbowify(app);
+      break;
+    case 3:
+      app.graph.afterChange = () => {
+        colorByType(app);
+      };
+      colorByType(app);
+      break;
+    case 4:
+      app.graph.afterChange = () => {
+        colorPositiveNegative(app);
+      };
+      colorPositiveNegative(app);
+      break;
+    default:
+      app.graph.afterChange = afterChange;
+      break;
+  }
+}
+let afterChange;
+
+const colorModes = ["default", "plain", "rainbow", "type", "positive/negative"];
 const colorsName = "Failfast.colors";
 let loading = false;
 app.registerExtension({
   name: colorsName,
   async setup(app) {
-    console.log(app.graph._nodes.map((x) => x.type));
-    const afterChange = app.graph.afterChange;
-
     const value = +(
       window.localStorage.getItem(`Comfy.Settings.${colorsName}`) ?? "0"
     );
-    console.log(value);
-    switch (value) {
-      case 1:
-        app.graph.afterChange = () => {
-          uncolor(app);
-        };
-        uncolor(app);
-        break;
-      case 2:
-        app.graph.afterChange = () => {
-          rainbowify(app);
-        };
-        rainbowify(app);
-        break;
-      case 3:
-        app.graph.afterChange = () => {
-          colorByType(app);
-        };
-        colorByType(app);
-        break;
-      default:
-        app.graph.afterChange = afterChange;
-        break;
-    }
+    setColorMode(value, app);
   },
   loadedGraphNode(node, app) {
-    const afterChange = app.graph.afterChange;
     if (!loading) {
       loading = true;
       setTimeout(() => {
@@ -180,36 +200,12 @@ app.registerExtension({
         const value = +(
           window.localStorage.getItem(`Comfy.Settings.${colorsName}`) ?? "0"
         );
-        console.log(value);
-        switch (value) {
-          case 1:
-            app.graph.afterChange = () => {
-              uncolor(app);
-            };
-            uncolor(app);
-            break;
-          case 2:
-            app.graph.afterChange = () => {
-              rainbowify(app);
-            };
-            rainbowify(app);
-            break;
-          case 3:
-            app.graph.afterChange = () => {
-              colorByType(app);
-            };
-            colorByType(app);
-            break;
-          default:
-            app.graph.afterChange = afterChange;
-            break;
-        }
+        setColorMode(value, app);
       }, 500);
     }
   },
   async init(app) {
-    const afterChange = app.graph.afterChange;
-
+    afterChange = app.graph.afterChange;
     app.ui.settings.addSetting({
       id: colorsName,
       name: "Color Mode",
@@ -245,30 +241,7 @@ app.registerExtension({
       tooltip: "Automatic color modes for nodes.",
       defaultValue: 2,
       onChange(value) {
-        console.log(value);
-        switch (value) {
-          case 1:
-            app.graph.afterChange = () => {
-              uncolor(app);
-            };
-            uncolor(app);
-            break;
-          case 2:
-            app.graph.afterChange = () => {
-              rainbowify(app);
-            };
-            rainbowify(app);
-            break;
-          case 3:
-            app.graph.afterChange = () => {
-              colorByType(app);
-            };
-            colorByType(app);
-            break;
-          default:
-            app.graph.afterChange = afterChange;
-            break;
-        }
+        setColorMode(value, app);
       },
     });
   },