feat: allow more color configs (#28)

Addition of custom coloring options for nodes' color context menu as well as groups' color context menu, allowing to color title and background independently.

.github/FUNDING.yml

@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: [blib-la]
+patreon: Blib_la
+open_collective: blibla
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -1,5 +1,9 @@
 # ComfyUI Extensions by Blibla
 
+Chack out Captain: The AI Platform
+- https://github.com/blib-la/captain
+- https://get-captain.com
+
 ![Screenshot 2023-08-02 004936](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/d1530160-3c77-4aac-952f-7b9f2cf37b8f)
 
 [![Discord](https://img.shields.io/discord/1091306623819059300?color=7289da&label=Discord&logo=discord&logoColor=fff&style=for-the-badge)](https://discord.com/invite/m3TBB9XEkb)
@@ -28,6 +32,8 @@ personalization in your ComfyUI environment.
   * [Colored Nodes](#colored-nodes)
     + [Positive/Negative](#positivenegative)
     + [Dynamic Colors](#dynamic-colors)
+- [Main Menu](#main-menu)
+  * [Unload Models](#unload-models)
 - [Context Menu](#context-menu)
   * [Nodes](#nodes)
     + [Custom Color Option (only available in "default" Color Mode)](#custom-color-option-only-available-in-default-color-mode)
@@ -109,7 +115,6 @@ Different customization options available with their default settings and descri
 | Connections Width  | `3`       | Sets the width of connector lines                                                   |
 | Font Size          | `10`      | Sets the font size of textareas                                                     |
 | Colored Nodes      | `default` | Applies dynamic coloring to nodes                                                   |
-| Batch Resize       | `false`   | Resizes multiple selected nodes to the same size synchronously                      |
 
 ### Colored Nodes
 
@@ -141,6 +146,23 @@ Several dynamic coloring modes are available:
     <p>Dynamic Colors Modes: plain, by type, rainbow</p>
 </div>
 
+## Main Menu
+
+### Unload Models
+
+Free up GPU memory by unloading the models
+
+<div align="center">
+    <img src="https://github.com/blib-la/blibla-comfyui-extensions/assets/1148334/a81f3689-0291-4f2d-8ce5-3a9b4a8a2e76" alt="Unload Models Button" width="400px">
+    <p>A new Button is available</p>
+</div>
+
+<div align="center">
+    <img src="https://github.com/blib-la/blibla-comfyui-extensions/assets/1148334/e8d848d5-c157-4574-8fac-7d30052451d0" alt="GPU freed" width="400px">
+    <p>GPU Memory was freed</p>
+</div>
+
+
 ## Context Menu
 
 The context menu offers additional options for nodes, groups, colors, and the canvas:
@@ -161,6 +183,7 @@ The context menu offers additional options for nodes, groups, colors, and the ca
     <p>Reroute show/hide Title</p>
 </div>
 
+
 #### Render Reroute as Dot
 
 <div align="center">

extensions/colors.js

@@ -277,43 +277,150 @@ app.registerExtension({
       const menuRoot = menu.current_submenu.root;
       const isGroup = node instanceof LGraphGroup;
 
-      menuRoot.append(
-        $el("div.litemenu-entry.submenu", [
-          $el(
-            "label",
-            {
-              style: {
-                position: "relative",
-                overflow: "hidden",
-                display: "block",
-                paddingLeft: "4px",
-                borderLeft: "8px solid #222",
-              },
-            },
-            [
-              "Custom",
-              $el("input", {
-                type: "color",
-                value: node.bgcolor,
-                style: {
-                  position: "absolute",
-                  right: "200%",
-                },
-                oninput(event) {
-                  node.bgcolor = event.target.value;
-                  node.color = shadeHexColor(node.bgcolor);
-                  // TODO: check if we can adjust this
-                  // node.title_color = getContrastColor(node.bgcolor);
+			if (!isGroup) {
+				menuRoot.append(
+					$el("div.litemenu-entry.submenu", [
+						$el(
+							"label",
+							{
+								style: {
+									position: "relative",
+									overflow: "hidden",
+									display: "block",
+									paddingLeft: "4px",
+									borderLeft: "8px solid #222",
+								},
+							},
+							[
+								"Custom Title",
+								$el("input", {
+									type: "color",
+									value: node.bgcolor,
+									style: {
+										position: "absolute",
+										right: "200%",
+									},
+									oninput(event) {
+										// node.bgcolor = event.target.value;
+										node.color = shadeHexColor(event.target.value);
+										// TODO: check if we can adjust this
+										// node.title_color = getContrastColor(node.bgcolor);
 
-                  node.setDirtyCanvas(true, true);
-                },
-              }),
-            ],
-          ),
-        ]),
-      );
+										node.setDirtyCanvas(true, true);
+									},
+								}),
+							],
+						),
+					]),
+				);
+				menuRoot.append(
+					$el("div.litemenu-entry.submenu", [
+						$el(
+							"label",
+							{
+								style: {
+									position: "relative",
+									overflow: "hidden",
+									display: "block",
+									paddingLeft: "4px",
+									borderLeft: "8px solid #222",
+								},
+							},
+							[
+								"Custom BG",
+								$el("input", {
+									type: "color",
+									value: node.bgcolor,
+									style: {
+										position: "absolute",
+										right: "200%",
+									},
+									oninput(event) {
+										node.bgcolor = event.target.value;
+										// node.color = shadeHexColor(node.bgcolor);
+										// TODO: check if we can adjust this
+										// node.title_color = getContrastColor(node.bgcolor);
+
+										node.setDirtyCanvas(true, true);
+									},
+								}),
+							],
+						),
+					]),
+				);
+				menuRoot.append(
+					$el("div.litemenu-entry.submenu", [
+						$el(
+							"label",
+							{
+								style: {
+									position: "relative",
+									overflow: "hidden",
+									display: "block",
+									paddingLeft: "4px",
+									borderLeft: "8px solid #222",
+								},
+							},
+							[
+								"Custom All",
+								$el("input", {
+									type: "color",
+									value: node.bgcolor,
+									style: {
+										position: "absolute",
+										right: "200%",
+									},
+									oninput(event) {
+										node.bgcolor = event.target.value;
+										node.color = shadeHexColor(node.bgcolor);
+										// TODO: check if we can adjust this
+										// node.title_color = getContrastColor(node.bgcolor);
+
+										node.setDirtyCanvas(true, true);
+									},
+								}),
+							],
+						),
+					]),
+				);
+			}
       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 Group",
+								$el("input", {
+									type: "color",
+									value: node.bgcolor,
+									style: {
+										position: "absolute",
+										right: "200%",
+									},
+									oninput(event) {
+										node.bgcolor = event.target.value;
+										node.color = shadeHexColor(node.bgcolor);
+										// TODO: check if we can adjust this
+										// node.title_color = getContrastColor(node.bgcolor);
+
+										node.setDirtyCanvas(true, true);
+									},
+								}),
+							],
+						),
+					]),
+				);
+				menuRoot.append(
           $el("div.litemenu-entry.submenu", [
             $el(
               "label",
@@ -327,7 +434,87 @@ app.registerExtension({
                 },
               },
               [
-                "Color all",
+                "Color All Title",
+                $el("input", {
+                  type: "color",
+                  value: node.bgcolor,
+                  style: {
+                    position: "absolute",
+                    right: "200%",
+                  },
+                  oninput(event) {
+                    node.recomputeInsideNodes();
+                    // node.bgcolor = event.target.value;
+                    node.color = shadeHexColor(event.target.value);
+                    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);
+                  },
+                }),
+              ],
+            ),
+          ]),
+        );
+				menuRoot.append(
+          $el("div.litemenu-entry.submenu", [
+            $el(
+              "label",
+              {
+                style: {
+                  position: "relative",
+                  overflow: "hidden",
+                  display: "block",
+                  paddingLeft: "4px",
+                  borderLeft: "8px solid #222",
+                },
+              },
+              [
+                "Color All BG",
+                $el("input", {
+                  type: "color",
+                  value: node.bgcolor,
+                  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);
+                  },
+                }),
+              ],
+            ),
+          ]),
+        );
+				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",
                   value: node.bgcolor,

extensions/linkRenderModes.js

@@ -1,27 +0,0 @@
-/**
- * Coded with love by Failfa.st
- * LICENSE: AGPL 3.0
- * https://github.com/failfa-st/failfast-comfyui-extensions/blob/main/LICENSE
- *
- * Visit https://github.com/failfa-st/failfast-comfyui-extensions for more info
- *
- * Homepage:  https://failfa.st
- * GitHub: https://github.com/failfa-st
- * Discord: https://discord.com/invite/m3TBB9XEkb
- */
-import { app } from "/scripts/app.js";
-
-/**
- * Render Shadow
- */
-
-const linkRenderModesName = "Failfast.linkRenderModes";
-
-app.registerExtension({
-  name: linkRenderModesName,
-  async init() {
-    if (LiteGraph?.LINK_RENDER_MODES) {
-      LiteGraph.LINK_RENDER_MODES[3] = "Hidden";
-    }
-  },
-});

extensions/nodes.js

@@ -1,82 +0,0 @@
-/**
- * Coded with love by Failfa.st
- * LICENSE: AGPL 3.0
- * https://github.com/failfa-st/failfast-comfyui-extensions/blob/main/LICENSE
- *
- * Visit https://github.com/failfa-st/failfast-comfyui-extensions for more info
- *
- * Homepage:  https://failfa.st
- * GitHub: https://github.com/failfa-st
- * Discord: https://discord.com/invite/m3TBB9XEkb
- */
-import { app } from "/scripts/app.js";
-
-/**
- * Nodes
- */
-
-const nodesName = "Failfast.nodes";
-
-const store = {
-  stack: new Set(),
-};
-
-app.registerExtension({
-  name: nodesName,
-  async init(app) {
-    app.ui.settings.addSetting({
-      id: nodesName,
-      name: "Allow group selection resize",
-      type: "boolean",
-      tooltip: "Resize all selected nodes synchronous.",
-      defaultValue: false,
-    });
-  },
-  async setup(app) {
-    app.graph._nodes.forEach(function (node) {
-      let active = JSON.parse(
-        window.localStorage.getItem(`Comfy.Settings.${nodesName}`) ?? "false"
-      );
-      const onResize = node.onResize;
-      node.onResize = function (size) {
-        if (active) {
-          Array.from(store.stack)
-            .filter((node_) => node_ !== node)
-            .forEach((node_) => {
-              if (app.shiftDown) {
-                const w =
-                  LiteGraph.CANVAS_GRID_SIZE *
-                  Math.round(size[0] / LiteGraph.CANVAS_GRID_SIZE);
-                const h =
-                  LiteGraph.CANVAS_GRID_SIZE *
-                  Math.round(size[1] / LiteGraph.CANVAS_GRID_SIZE);
-                node_.size[0] = w;
-                node_.size[1] = h;
-              } else {
-                node_.size[0] = size[0];
-                node_.size[1] = size[1];
-              }
-            });
-        }
-        return onResize?.apply(this, arguments);
-      };
-      const onMouseDown = node.onMouseDown;
-      node.onMouseDown = function () {
-        active = JSON.parse(
-          window.localStorage.getItem(`Comfy.Settings.${nodesName}`) ?? "false"
-        );
-        return onMouseDown?.apply(this, arguments);
-      };
-      const onSelected = node.onSelected;
-      node.onSelected = function () {
-        store.stack.add(node);
-        return onSelected?.apply(this, arguments);
-      };
-      const onDeselected = node.onDeselected;
-      node.onDeselected = function () {
-        store.stack.delete(node);
-        return onDeselected?.apply(this, arguments);
-      };
-    });
-  },
-});

extensions/unloadModelsButton.js

@@ -0,0 +1,27 @@
+import { app } from "/scripts/app.js";
+import { $el } from "/scripts/ui.js";
+
+const nodeName = "Failfast.unloadModels";
+
+const button = $el(
+  "button",
+  {
+    onclick() {
+      fetch("/free", {
+        method: "POST",
+        body: JSON.stringify({ unload_models: true }),
+        headers: { "Content-Type": "application/json" },
+      }).catch((error) => {
+        console.error(error);
+      });
+    },
+  },
+  ["Unload Models"]
+);
+
+app.registerExtension({
+  name: nodeName,
+  async init(app) {
+    app.ui.menuContainer.append(button);
+  },
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "failfast-comfyui-extensions",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "changelog": "npx conventional-changelog-cli -p angular -i CHANGELOG.md -s",
     "toc": "npx markdown-toc README.md -i "