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.
Create FUNDING.yml
2024-08-04 11:49:33 +02:00 · 2024-05-09 21:23:48 +02:00 · 2024-05-09 21:22:11 +02:00 · 2024-05-09 16:42:17 +02:00 · 2024-05-09 16:41:48 +02:00 · 2024-05-09 16:37:21 +02:00
10 changed files with 702 additions and 264 deletions
@@ -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']
@@ -1,6 +1,72 @@
-#  (2023-08-01)
+# [1.7.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.6.1...v1.7.0) (2023-08-26)


+### Features
+
+* add hidden to global LinkRenderModes ([#11](https://github.com/failfa-st/failfast-comfyui-extensions/issues/11)) ([18e74b6](https://github.com/failfa-st/failfast-comfyui-extensions/commit/18e74b627caeb5bafa0fbeb4264e2c092c73f59a))
+
+
+
+## [1.6.1](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.6.0...v1.6.1) (2023-08-10)
+
+
+### Features
+
+* remove links render mode ([e0a4343](https://github.com/failfa-st/failfast-comfyui-extensions/commit/e0a4343965dec9c3d283d1c9cd281a85f95e1063))
+
+
+
+## [1.6.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.6.0...v1.5.1) (2023-08-10)
+
+
+### Features
+
+* remove links render mode ([e0a4343](https://github.com/failfa-st/failfast-comfyui-extensions/commit/e0a4343965dec9c3d283d1c9cd281a85f95e1063))
+
+
+
+## [1.5.1](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.5.0...v1.5.1) (2023-08-01)
+
+
+### Bug Fixes
+
+* **colors:** set default value of colorpicker ([c0e70fd](https://github.com/failfa-st/failfast-comfyui-extensions/commit/c0e70fd1ad8bf7b2e73450a276ab8ebd3277e86a))
+
+
+# [1.5.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.4.0...v1.5.0) (2023-08-01)
+
+
+### Features
+
+* **reroute:** allow dot & microdot ([088f89d](https://github.com/failfa-st/failfast-comfyui-extensions/commit/088f89d41406b081d37e29c5601dc529997c6c33))
+
+
+# [1.4.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.3.0...v1.4.0) (2023-08-01)
+
+
+### Features
+
+* **images:** allow copy image ([27eb284](https://github.com/failfa-st/failfast-comfyui-extensions/commit/27eb284229235e301496326d22cd3c48e16f6f23))
+
+
+# [1.3.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.2.0...v1.3.0) (2023-08-01)
+
+### Features
+
+* allow Reroute as dot ([9cf412f](https://github.com/failfa-st/failfast-comfyui-extensions/commit/9cf412f4d7c05eaf4f958b8e0752cb75d764425a))
+
+
+# [1.2.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.1.0...v1.2.0) (2023-08-01)
+
+### Features
+
+* **reroutes:** allow showing title on reroute ([27e49f8](https://github.com/failfa-st/failfast-comfyui-extensions/commit/27e49f83d5c37a529638862132a40cd837a41127))
+
+# [1.1.0](https://github.com/failfa-st/failfast-comfyui-extensions/compare/v1.0.0...v1.1.0) (2023-08-01)
+
+
+#  [1.0.0] (2023-08-01)
+
 ### Bug Fixes

 * batch resize respects grid snapping ([7ea395a](https://github.com/failfa-st/failfast-comfyui-extensions/commit/7ea395ab5606e3b490f25d1120eed852d8216695))
@@ -1,28 +1,52 @@
-# ComfyUI Extensions by Failfa.st
+# ComfyUI Extensions by Blibla

-ComfyUI Extensions by Failfa.st is a robust suite of enhancements, designed to optimize your ComfyUI experience. It
+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)
+
+ComfyUI Extensions by Blibla is a robust suite of enhancements, designed to optimize your ComfyUI experience. It
 provides a range of features, including customizable render modes, dynamic node coloring, and versatile management
 tools. Whether for individual use or team collaboration, our extensions aim to enhance productivity, readability, and
 personalization in your ComfyUI environment.

 [CHANGELOG](CHANGELOG.md) | [LICENSE (AGPL 3.0)](LICENSE)

+## Request a new feature
+### If you have an idea for a new extension, you can open a [Feature Request](https://github.com/failfa-st/failfast-comfyui-extensions/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=)
+
+## Table of Contents
+
 <!-- toc -->

 - [Installation](#installation)
+  * [Load via ComfyUI manager](#load-via-comfyui-manager)
  * [Clone Repository](#clone-repository)
  * [Download Manually](#download-manually)
 - [Update](#update)
 - [Settings](#settings)
  * [Options](#options)
-  * [Links Render Mode](#links-render-mode)
  * [Colored Nodes](#colored-nodes)
    + [Positive/Negative](#positivenegative)
    + [Dynamic Colors](#dynamic-colors)
+- [Main Menu](#main-menu)
+  * [Unload Models](#unload-models)
 - [Context Menu](#context-menu)
-  * [Freeze or Unfreeze Group](#freeze-or-unfreeze-group)
-  * [Pin or Unpin all Nodes](#pin-or-unpin-all-nodes)
-  * [Arranging all Nodes](#arranging-all-nodes)
+  * [Nodes](#nodes)
+    + [Custom Color Option (only available in "default" Color Mode)](#custom-color-option-only-available-in-default-color-mode)
+    + [Show Title on Reroute Node](#show-title-on-reroute-node)
+    + [Render Reroute as Dot](#render-reroute-as-dot)
+    + [Copy Images](#copy-images)
+  * [Groups](#groups)
+    + [Group Color Option](#group-color-option)
+    + [Freeze/Unfreeze Group](#freezeunfreeze-group)
+  * [Canvas](#canvas)
+    + [Pin or Unpin all Nodes](#pin-or-unpin-all-nodes)
+    + [Freeze or unfreeze all Groups and Nodes](#freeze-or-unfreeze-all-groups-and-nodes)
+    + [Arranging all Nodes](#arranging-all-nodes)
 - [Single Extensions Usage](#single-extensions-usage)
 - [Contribution](#contribution)

@@ -30,10 +54,19 @@ personalization in your ComfyUI environment.

 ## Installation

-Two methods are available for installation:
+Three methods are available for installation:

-1. Clone the repository directly into the extensions directory.
-2. Download the project manually.
+1. Load via [ComfyUI manager](https://github.com/ltdrdata/ComfyUI-Manager)
+2. Clone the repository directly into the extensions directory.
+3. Download the project manually.
+
+
+### Load via ComfyUI manager
+
+<div align="center">
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/796aaa99-9b16-4087-bebb-ed8638a8b9fc" alt="ComfyUI manager" >
+    <p>Install via ComfyUI manager</p>
+</div>

 ### Clone Repository

@@ -76,28 +109,12 @@ Different customization options available with their default settings and descri

 | Name               | Default   | Description                                                                         |
 | ------------------ | --------- | ----------------------------------------------------------------------------------- |
-| Links Render Mode  | `spline`  | Sets the render mode of connector lines (options: straight, angled, curved, hidden) |
 | Force Snap to Grid | `false`   | Forces nodes to snap to the grid                                                    |
 | Force Box Shape    | `false`   | Removes round corners from all nodes                                                |
 | Render Shadows     | `true`    | Toggles visibility of shadows                                                       |
 | 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                      |
-
-### Links Render Mode
-
-Choose from four rendering modes for connector lines:
-
- straight
- linear
- spline (default)
- hidden
-
-<div align="center">
-    <img src="https://github.com/ltdrdata/ComfyUI-Manager/assets/1148334/af4b05ab-33b8-4cce-be3b-59765b7ea5a6" alt="Links Render Mode" height="300px">
-    <p>Links Render Mode Options</p>
-</div>

 ### Colored Nodes

@@ -129,50 +146,104 @@ 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:

-**Nodes**
+### Nodes

- Custom color option (only available in "default" Color Mode).
+#### Custom Color Option (only available in "default" Color Mode)

 <div align="center">
-    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/f0c4dc53-0e40-480d-a3f9-09b50a3ab56d" alt="Node options" height="300px">
-    <p>Node Options</p>
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/f0c4dc53-0e40-480d-a3f9-09b50a3ab56d" alt="Node color options" height="300px">
+    <p>Node Color Options</p>
 </div>

-**Groups**
-
- Custom color option.
- Group color option.
- Freeze/unfreeze group.
+#### Show Title on Reroute Node

 <div align="center">
-    <img src="https://github.com/failfa-st/hyv/assets/1148334/7558fcfb-1733-4d78-904b-50891f29fa68" alt="Group options" height="300px">
-    <p>Group Options</p>
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/e40ea33d-5a44-4859-b050-ed7a13057536" alt="reroute Node options" width="400px">
+    <p>Reroute show/hide Title</p>
 </div>

-**Canvas**

- Arrange nodes (vertical/horizontal).
- Freeze/unfreeze all nodes.
- Pin/unpin all nodes.
+#### Render Reroute as Dot

 <div align="center">
-    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/d45ed248-2a19-4862-bda5-49f9b2703296" alt="Canvas options" height="300px">
-    <p>Canvas Options</p>
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/d575b450-da5d-4357-832f-de294a5cc3d9" alt="reroute Node as dot" width="400px" >
+    <p>Reroute as dot</p>
 </div>

-### Freeze or Unfreeze Group
+
+|                                          microdot                                         |                                                    microdot / dot / off                                                     |
+| :-----------------------------------------------------------------------------------------------: |:---------------------------------------------------------------------------------------------------------------------------:|
+| ![vertical](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/41fab393-5d85-4e2c-8f5d-2e003cd6b2b3) | ![horizontal](https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/403df5b7-7d05-40a7-bd61-1c807e0da433) |
+
+
+
+
+
+
+
+#### Copy Images
+
+<div align="center">
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/f41b4aff-9677-4faf-85cb-86ce497d6240" alt="Copy images" >
+    <p>Copy Image</p>
+</div>
+
+### Groups
+
+#### Group Color Option
+
+You can color a group with a custom color and even color a group including all its child Nodes
+
+<div align="center">
+    <img src="https://github.com/failfa-st/failfast-comfyui-extensions/assets/1148334/f3788347-3fe3-4959-b14c-5b9db96e8f41" alt="Group color options" height="300px">
+    <p>Group color Options</p>
+</div>
+
+
+#### Freeze/Unfreeze Group

 Lock or unlock a group and all its child Nodes. Note that new Nodes will not be affected.

-### Pin or Unpin all Nodes
+<div align="center">
+    <img src="https://github.com/failfa-st/hyv/assets/1148334/7558fcfb-1733-4d78-904b-50891f29fa68" alt="Group freeze" height="300px">
+    <p>Group freeze/unfreeze</p>
+</div>
+
+
+
+### Canvas 
+
+#### Pin or Unpin all Nodes

 Lock or unlock all nodes on the canvas, regardless of their group.

-### Arranging all Nodes
+
+#### Freeze or unfreeze all Groups and Nodes
+
+Lock or unlock all groups and all Nodes
+
+#### Arranging all Nodes

 You can arrange all Nodes in either vertical or horizontal layout.

@@ -186,9 +257,9 @@ Each extension is fully capable of functioning individually. This allows you to

 Simply download the desired file from the [`extensions`](extensions) directory and place it in the extensions folder of ComfyUI.

-1. Download the required file for example, [linksRenderMode](extensions/linksRenderMode.js).
+1. Download the required file for example, [reroute](extensions/reroute.js).
 2. Transfer the file to `path/to/your/ComfyUI/web/extensions`.
-3. The folder structure should appear as: `path/to/your/ComfyUI/web/extensions/linksRenderMode.js`.
+3. The folder structure should appear as: `path/to/your/ComfyUI/web/extensions/reroute.js`.

 ## Contribution

@@ -184,45 +184,40 @@ function colorPositiveNegative(app) {
 * Colors
 */
 let afterChange;
+let colorModeValue;
+function invokeAfterChange() {
+  switch (colorModeValue) {
+    case 1:
+      uncolor(app);
+      break;
+    case 2:
+      rainbowify(app);
+      break;
+    case 3:
+      colorByType(app);
+      break;
+    default:
+      break;
+  }
+  if (getPosNegValue()) {
+    colorPositiveNegative(app);
+  }
+  return afterChange?.apply(this, arguments);
+}
+
 function setColorMode(value, app) {
+  colorModeValue = value;
  switch (value) {
    case 1:
-      app.graph.afterChange = function () {
-        uncolor(app);
-        if (getPosNegValue()) {
-          colorPositiveNegative(app);
-        }
-        return afterChange?.apply(this, arguments);
-      };
      uncolor(app);
      break;
    case 2:
-      app.graph.afterChange = function () {
-        rainbowify(app);
-        if (getPosNegValue()) {
-          colorPositiveNegative(app);
-        }
-        return afterChange?.apply(this, arguments);
-      };
      rainbowify(app);
      break;
    case 3:
-      app.graph.afterChange = function () {
-        colorByType(app);
-        if (getPosNegValue()) {
-          colorPositiveNegative(app);
-        }
-        return afterChange?.apply(this, arguments);
-      };
      colorByType(app);
      break;
    default:
-      app.graph.afterChange = function () {
-        if (getPosNegValue()) {
-          colorPositiveNegative(app);
-        }
-        return afterChange?.apply(this, arguments);
-      };
      app.graph._nodes.forEach((node) => {
        node.bgcolor = node._bgcolor ?? node.bgcolor;
        node.color = node._color ?? node.color;
@@ -275,48 +270,157 @@ app.registerExtension({
  },
  async init(app) {
    afterChange = app.graph.afterChange;
+    app.graph.afterChange = invokeAfterChange;
    const onMenuNodeColors = LGraphCanvas.onMenuNodeColors;
    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(
-            "label",
-            {
-              style: {
-                position: "relative",
-                overflow: "hidden",
-                display: "block",
-                paddingLeft: "4px",
-                borderLeft: "8px solid #222",
-              },
-            },
-            [
-              "Custom",
-              $el("input", {
-                type: "color",
-                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",
@@ -330,9 +434,90 @@ 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,
                  style: {
                    position: "absolute",
                    right: "200%",
@@ -351,9 +536,9 @@ app.registerExtension({
                    node.setDirtyCanvas(true, true);
                  },
                }),
-              ]
+              ],
            ),
-          ])
+          ]),
        );
      }
      return response;
@@ -385,7 +570,7 @@ app.registerExtension({
                  value: index,
                  selected: index === +value,
                });
-              })
+              }),
            ),
            $el(
              "label",
@@ -398,19 +583,19 @@ app.registerExtension({
                  type: "checkbox",
                  checked:
                    window.localStorage.getItem(
-                      `Comfy.Settings.${colorsName}-posneg`
+                      `Comfy.Settings.${colorsName}-posneg`,
                    ) === "true",
                  onchange: (event) => {
                    window.localStorage.setItem(
                      `Comfy.Settings.${colorsName}-posneg`,
-                      event.target.checked.toString()
+                      event.target.checked.toString(),
                    );
                    if (event.target.checked) {
                      colorPositiveNegative(app);
                    }
                  },
                }),
-              ]
+              ],
            ),
          ]),
        ]);
@@ -0,0 +1,51 @@
+/**
+ * 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";
+
+const imagesName = "Failfast.images";
+
+function copyImageToClipboard(img) {
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  const context = canvas.getContext("2d");
+  context.drawImage(img, 0, 0);
+  canvas.toBlob(function (blob) {
+    const items = [new ClipboardItem({ "image/png": blob })];
+    navigator.clipboard.write(items);
+  });
+  canvas.remove();
+}
+app.registerExtension({
+  name: imagesName,
+  async init(app) {
+    const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions;
+    LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+      const options = getNodeMenuOptions.apply(this, arguments);
+      const isImageMenu = options.some(
+        (option) => option?.content === "Save Image",
+      );
+      if (isImageMenu) {
+        options.splice(2, 0, {
+          content: "Copy Image",
+          callback() {
+            const [img] = node.imgs;
+            if (img) {
+              copyImageToClipboard(img);
+            }
+          },
+        });
+      }
+      return options;
+    };
+  },
+});
@@ -1,66 +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";
-import { $el } from "/scripts/ui.js";
-
-/**
- * Toggle links render mode
- */
-
-const linksRenderModeName = "Failfast.linksRenderMode";
-const renderModes = [...LiteGraph.LINK_RENDER_MODES, "hidden"];
-
-app.registerExtension({
-  name: linksRenderModeName,
-  async init(app) {
-    app.ui.settings.addSetting({
-      id: linksRenderModeName,
-      name: "Links Render Mode",
-      type(name, setter, value) {
-        return $el("tr", [
-          $el("td", [
-            $el("label", {
-              for: linksRenderModeName.replaceAll(".", "-"),
-              textContent: "Links Render Mode",
-            }),
-          ]),
-
-          $el("td", [
-            $el(
-              "select",
-              {
-                id: linksRenderModeName.replaceAll(".", "-"),
-                onchange: (event) => {
-                  setter(+event.target.value);
-                },
-              },
-              renderModes.map((mode, index) => {
-                return $el("option", {
-                  textContent: mode,
-                  value: index,
-                  selected: index === +value,
-                });
-              })
-            ),
-          ]),
-        ]);
-      },
-      tooltip: "Render mode of connector lines",
-      defaultValue: 2,
-      onChange(value) {
-        app.canvas.links_render_mode = +value;
-        app.graph.setDirtyCanvas(true, true);
-      },
-    });
-  },
-});
@@ -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);
-      };
-    });
-  },
-});
@@ -0,0 +1,170 @@
+/**
+ * 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";
+
+const reroutesName = "Failfast.reroutes";
+const mini = [34, 26];
+const micro = [10, 10];
+const big = [75, 26];
+function miniReroute(node) {
+  if (node.type !== "Reroute") {
+    return;
+  }
+  node._size = node.size;
+  node._title = node.title;
+  Object.defineProperty(node, "title", {
+    get() {
+      return this._title;
+    },
+    set(value) {
+      this._title = value;
+      if (node.properties.showTitle) {
+        node.outputs[0].label = value;
+      }
+    },
+  });
+
+  if (node.properties.microdot) {
+    Object.defineProperty(node, "size", {
+      get() {
+        return this._size;
+      },
+      set() {},
+    });
+    node._size[0] = micro[0];
+    node._size[1] = micro[1];
+  } else if (node.properties.dot) {
+    Object.defineProperty(node, "size", {
+      get() {
+        return this._size;
+      },
+      set() {},
+    });
+    node._size[0] = mini[0];
+    node._size[1] = mini[1];
+  }
+}
+
+app.registerExtension({
+  name: reroutesName,
+  async setup(app) {
+    const onNodeAdded = app.graph.onNodeAdded;
+    app.graph.onNodeAdded = function (node) {
+      if (node.type !== "Reroute") {
+        return onNodeAdded?.apply(this, arguments);
+      }
+
+      miniReroute(node);
+      return onNodeAdded?.apply(this, arguments);
+    };
+    app.graph._nodes.forEach((node) => {
+      if (node.type === "Reroute") {
+        miniReroute(node);
+      }
+    });
+    const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions;
+    LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+      const options = getNodeMenuOptions.apply(this, arguments);
+      if (node.type !== "Reroute") {
+        return options;
+      }
+
+      options.unshift({
+        content: node.properties.showTitle ? "Hide Title" : "Show Title",
+        callback() {
+          node.outputs[0].label = node.properties.showTitle
+            ? undefined
+            : node.title;
+          node.properties.showTitle = !node.properties.showTitle;
+        },
+      });
+
+      options.push(
+        {
+          content: node.properties.dot ? "dot off" : "dot on",
+          callback() {
+            if (node.properties.dot) {
+              node._size[0] = node.properties.microdot ? micro[0] : big[0];
+              node._size[1] = node.properties.microdot ? micro[1] : big[1];
+              if (node.properties.microdot) {
+                Object.defineProperty(node, "size", {
+                  get() {
+                    return this._size;
+                  },
+                  set() {},
+                });
+              } else {
+                Object.defineProperty(node, "size", {
+                  get() {
+                    return this._size;
+                  },
+                  set(value) {
+                    this._size = value;
+                  },
+                });
+              }
+            } else {
+              node._size[0] = node.properties.microdot ? micro[0] : mini[0];
+              node._size[1] = node.properties.microdot ? micro[1] : mini[1];
+              Object.defineProperty(node, "size", {
+                get() {
+                  return this._size;
+                },
+                set() {},
+              });
+            }
+            node.properties.dot = !node.properties.dot;
+            node.setDirtyCanvas(true, true);
+          },
+        },
+        {
+          content: node.properties.microdot ? "microdot off" : "microdot on",
+          callback() {
+            if (node.properties.microdot) {
+              node._size[0] = node.properties.dot ? mini[0] : big[0];
+              node._size[1] = node.properties.dot ? mini[1] : big[1];
+              if (node.properties.dot) {
+                Object.defineProperty(node, "size", {
+                  get() {
+                    return this._size;
+                  },
+                  set() {},
+                });
+              } else {
+                Object.defineProperty(node, "size", {
+                  get() {
+                    return this._size;
+                  },
+                  set(value) {
+                    this._size = value;
+                  },
+                });
+              }
+            } else {
+              node._size[0] = micro[0];
+              node._size[1] = micro[1];
+              Object.defineProperty(node, "size", {
+                get() {
+                  return this._size;
+                },
+                set() {},
+              });
+            }
+            node.properties.microdot = !node.properties.microdot;
+            node.setDirtyCanvas(true, true);
+          },
+        },
+      );
+      return options;
+    };
+  },
+});
@@ -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);
+  },
+});
@@ -1,6 +1,8 @@
 {
  "name": "failfast-comfyui-extensions",
+  "version": "1.8.0",
  "scripts": {
-    "changelog": "npx conventional-changelog-cli -p angular -i CHANGELOG.md -s"
+    "changelog": "npx conventional-changelog-cli -p angular -i CHANGELOG.md -s",
+    "toc": "npx markdown-toc README.md -i "
  }
 }
Author	SHA1	Message	Date
PrometheusDante	2910671fed	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.	2024-08-04 11:49:33 +02:00
Gregor Adams	089b4572f8	Create FUNDING.yml	2024-05-09 21:23:48 +02:00
Gregor Adams	2891304232	Update README.md	2024-05-09 21:22:11 +02:00
pixelass	34258bc89e	chore: v1.8.0	2024-05-09 16:42:17 +02:00
pixelass	96f6f60b55	feat: add button to free memory	2024-05-09 16:41:48 +02:00
pixelass	55fce04e4b	feat: remove node group sizing it was not that useful, very hacky and very unstable	2024-05-09 16:37:21 +02:00
pixelass	c99c095b50	feat: remove link render nodes since it is now native	2024-05-09 16:36:49 +02:00
Sun Yi-Ran	a07b2fdf91	fix afterChange may override other extensions (#15 )	2024-02-25 10:16:13 +01:00
Gregor Adams	e1b1729c88	Update README.md	2024-01-29 17:15:26 +01:00
pixelass	b67e161b43	docs: changelog	2023-08-26 21:48:31 +02:00
pixelass	0951891cd8	chore: v1.7.0	2023-08-26 21:47:53 +02:00
Gregor Adams	18e74b627c	feat: add hidden to global LinkRenderModes (#11 )	2023-08-26 21:47:13 +02:00
pixelass	112e8755e1	docs: changelog	2023-08-11 00:08:24 +02:00
pixelass	7a5b62470d	chore: version bump	2023-08-11 00:07:55 +02:00
pixelass	f20c45e026	docs: update changelog and readme	2023-08-11 00:06:42 +02:00
pixelass	e0a4343965	feat: remove links render mode	2023-08-11 00:03:46 +02:00
Gregor Adams	652ed1db78	Update README.md	2023-08-09 18:13:26 +02:00
Gregor Adams	932bb6c2d8	Update README.md	2023-08-02 00:51:22 +02:00
pixelass	eab436f21d	docs: changelog	2023-08-02 00:10:06 +02:00
pixelass	c4ebc3f68d	chore: v 1.5.1	2023-08-02 00:09:08 +02:00
pixelass	eaa9a6ec26	chore: adjust changelog	2023-08-02 00:08:32 +02:00
pixelass	c0e70fd1ad	fix(colors): set default value of colorpicker	2023-08-02 00:08:14 +02:00
pixelass	7e5d24fbec	docs: changelog	2023-08-01 23:03:29 +02:00
pixelass	9aeb25c4ec	feat(reroute): allow dot & microdot	2023-08-01 23:03:29 +02:00
Gregor Adams	98ee86b9e6	Update README.md	2023-08-01 19:53:05 +02:00
pixelass	c648ee9729	docs: update readme	2023-08-01 19:34:32 +02:00
pixelass	691da6bea7	docs: changelog	2023-08-01 18:57:36 +02:00
pixelass	27eb284229	feat(images): allow copy image	2023-08-01 18:57:07 +02:00
pixelass	a43bac17d1	refactor: remove logs	2023-08-01 18:34:17 +02:00
Gregor Adams	d0e68a2869	Update README.md	2023-08-01 18:24:00 +02:00
pixelass	72a5d4f8a7	docs: add comfyUI manager instructions	2023-08-01 18:22:59 +02:00
pixelass	4000006366	docs: update readme	2023-08-01 17:59:33 +02:00
pixelass	9d6f688c53	docs: update readme	2023-08-01 17:56:55 +02:00
pixelass	d47d1a122e	docs: changelog	2023-08-01 17:55:04 +02:00
pixelass	f27d1f140e	feat: allow Reroute as dot	2023-08-01 17:55:04 +02:00
pixelass	8eba0f010d	docs: changelog	2023-08-01 17:55:04 +02:00
pixelass	f161d6e563	feat(reroutes): al;low showing title on reroute	2023-08-01 17:55:04 +02:00