From f1acdf976ac28a7c927d3a02488e09f5a3700ec5 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sat, 13 Jul 2024 09:01:35 -0400
Subject: [PATCH] Shift node color's brightness for light mode (#123)

* Shift node color's brightness for light mode

* nit

* Fix test
---
 jest.config.ts                      |   2 +-
 src/extensions/core/colorPalette.ts |   1 +
 src/scripts/app.ts                  |  15 ++++-
 src/utils/colorUtil.ts              | 100 ++++++++++++++++++++++++++++
 4 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/colorUtil.ts

diff --git a/jest.config.ts b/jest.config.ts
index 760ade635..dba31cae4 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -15,7 +15,7 @@ const jestConfig: JestConfigWithTsJest = {
 	resetModules: true,
 	testTimeout: 10000,
 	moduleNameMapper: {
-		"^src/(.*)$": "<rootDir>/src/$1",
+		"^@/(.*)$": "<rootDir>/src/$1",
 		'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
 	},
 };
diff --git a/src/extensions/core/colorPalette.ts b/src/extensions/core/colorPalette.ts
index 94431e769..2f1e5fe42 100644
--- a/src/extensions/core/colorPalette.ts
+++ b/src/extensions/core/colorPalette.ts
@@ -1,3 +1,4 @@
+import { lightenColor } from "@/utils/colorUtil";
 import { app } from "../../scripts/app";
 import { $el } from "../../scripts/ui";
 import type { ColorPalettes, Palette } from "@/types/colorPalette";
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index f2e6ee23c..00c529a24 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -20,6 +20,7 @@ import {
   parseComfyWorkflow,
 } from "../types/comfyWorkflow";
 import { ComfyNodeDef } from "@/types/apiTypes";
+import { lightenColor } from "@/utils/colorUtil";
 import { ComfyAppMenu } from "./ui/menu/index";
 import { getStorageValue } from "./utils";
 import { ComfyWorkflowManager, ComfyWorkflow } from "./workflows";
@@ -1538,7 +1539,8 @@ export class ComfyApp {
     // @ts-ignore
     LGraphCanvas.prototype.drawNode = function (node, ctx) {
       var editor_alpha = this.editor_alpha;
-      var old_color = node.bgcolor;
+      var old_color = node.color;
+      var old_bgcolor = node.bgcolor;
 
       if (node.mode === 2) {
         // never
@@ -1551,10 +1553,19 @@ export class ComfyApp {
       // 	this.editor_alpha = 0.2;
       // }
 
+      const adjustColor = (color?: string) => {
+        return color ? lightenColor(color, 0.5) : color;
+      };
+      if (app.ui.settings.getSettingValue("Comfy.ColorPalette") === "light") {
+        node.bgcolor = adjustColor(node.bgcolor);
+        node.color = adjustColor(node.color);
+      }
+
       const res = origDrawNode.apply(this, arguments);
 
       this.editor_alpha = editor_alpha;
-      node.bgcolor = old_color;
+      node.color = old_color;
+      node.bgcolor = old_bgcolor;
 
       return res;
     };
diff --git a/src/utils/colorUtil.ts b/src/utils/colorUtil.ts
new file mode 100644
index 000000000..bc03e77b3
--- /dev/null
+++ b/src/utils/colorUtil.ts
@@ -0,0 +1,100 @@
+type RGB = { r: number; g: number; b: number };
+type HSL = { h: number; s: number; l: number };
+
+function rgbToHsl({ r, g, b }: RGB): HSL {
+  (r /= 255), (g /= 255), (b /= 255);
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h: number,
+    s: number,
+    l: number = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return { h, s, l };
+}
+
+function hslToRgb({ h, s, l }: HSL): RGB {
+  let r: number, g: number, b: number;
+
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+}
+
+function hexToRgb(hex: string): RGB {
+  let r = 0,
+    g = 0,
+    b = 0;
+  // 3 digits
+  if (hex.length == 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  }
+  // 6 digits
+  else if (hex.length == 7) {
+    r = parseInt(hex.slice(1, 3), 16);
+    g = parseInt(hex.slice(3, 5), 16);
+    b = parseInt(hex.slice(5, 7), 16);
+  }
+  return { r, g, b };
+}
+
+function rgbToHex({ r, g, b }: RGB): string {
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
+}
+
+export function lightenColor(hex: string, amount: number): string {
+  let rgb = hexToRgb(hex);
+  let hsl = rgbToHsl(rgb);
+  hsl.l = Math.min(1, hsl.l + amount);
+  rgb = hslToRgb(hsl);
+  return rgbToHex(rgb);
+}