Merge branch 'issue-752' of https://github.com/reaper47/ComfyUI

web/extensions/core/colorPalette.js

@@ -1,6 +1,5 @@
 import {app} from "/scripts/app.js";
 import {$el} from "/scripts/ui.js";
-import { api } from "/scripts/api.js";
 
 // Manage color palettes
 
@@ -24,6 +23,8 @@ const colorPalettes = {
 				"TAESD": "#DCC274", // cheesecake
 			},
 			"litegraph_base": {
+				"BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
+				"CLEAR_BACKGROUND_COLOR": "#222",
 				"NODE_TITLE_COLOR": "#999",
 				"NODE_SELECTED_TITLE_COLOR": "#FFF",
 				"NODE_TEXT_SIZE": 14,
@@ -77,6 +78,8 @@ const colorPalettes = {
 				"VAE": "#FF7043", // deep orange
 			},
 			"litegraph_base": {
+				"BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
+				"CLEAR_BACKGROUND_COLOR": "lightgray",
 				"NODE_TITLE_COLOR": "#222",
 				"NODE_SELECTED_TITLE_COLOR": "#000",
 				"NODE_TEXT_SIZE": 14,
@@ -232,12 +235,9 @@ app.registerExtension({
 				"id": "my_color_palette_unique_id",
 				"name": "My Color Palette",
 				"colors": {
-					"node_slot": {
+					"node_slot": {},
-					},
+					"litegraph_base": {},
-					"litegraph_base": {
+					"comfy_base": {}
-					},
-					"comfy_base": {
-					}
 				}
 			};
 
@@ -301,7 +301,11 @@ app.registerExtension({
 				}
 			}
 
-			els.select.append($el("option", { textContent: colorPalette.name + " (custom)", value: "custom_" + colorPalette.id, selected: true }));
+			els.select.append($el("option", {
+				textContent: colorPalette.name + " (custom)",
+				value: "custom_" + colorPalette.id,
+				selected: true
+			}));
 
 			setColorPalette("custom_" + colorPalette.id);
 			await loadColorPalette(colorPalette);
@@ -403,13 +407,21 @@ app.registerExtension({
 
 				for (const c in colorPalettes) {
 					const colorPalette = colorPalettes[c];
-					options.push($el("option", { textContent: colorPalette.name, value: colorPalette.id, selected: colorPalette.id === value }));
+					options.push($el("option", {
+						textContent: colorPalette.name,
+						value: colorPalette.id,
+						selected: colorPalette.id === value
+					}));
 				}
 
 				let customColorPalettes = getCustomColorPalettes();
 				for (const c in customColorPalettes) {
 					const colorPalette = customColorPalettes[c];
-					options.push($el("option", { textContent: colorPalette.name + " (custom)", value: "custom_" + colorPalette.id, selected: "custom_" + colorPalette.id === value }));
+					options.push($el("option", {
+						textContent: colorPalette.name + " (custom)",
+						value: "custom_" + colorPalette.id,
+						selected: "custom_" + colorPalette.id === value
+					}));
 				}
 
 				return $el("div", [
@@ -496,15 +508,25 @@ app.registerExtension({
 					return;
 				}
 
-				if (colorPalettes[value]) {
+				let palette = colorPalettes[value];
-					await loadColorPalette(colorPalettes[value]);
+				if (palette) {
+					await loadColorPalette(palette);
 				} else if (value.startsWith("custom_")) {
 					value = value.substr(7);
 					let customColorPalettes = getCustomColorPalettes();
 					if (customColorPalettes[value]) {
+						palette = customColorPalettes[value];
 						await loadColorPalette(customColorPalettes[value]);
 					}
 				}
+
+				let {BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR} = palette.colors.litegraph_base;
+				if (BACKGROUND_IMAGE === undefined || CLEAR_BACKGROUND_COLOR === undefined) {
+					const base = colorPalettes["dark"].colors.litegraph_base;
+					BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
+					CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
+				}
+				app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
 			},
 		});
 	},

web/index.html

@@ -7,6 +7,7 @@
 		<link rel="stylesheet" type="text/css" href="lib/litegraph.css" />
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<script type="text/javascript" src="lib/litegraph.core.js"></script>
+		<script type="text/javascript" src="lib/litegraph.extensions.js" defer></script>
 		<script type="module">
 			import { app } from "/scripts/app.js";
 			await app.setup();

web/lib/litegraph.extensions.js

@@ -0,0 +1,21 @@
+/**
+ * Changes the background color of the canvas.
+ *
+ * @method updateBackground
+ * @param {image} String
+ * @param {clearBackgroundColor} String
+ * @
+ */
+LGraphCanvas.prototype.updateBackground = function (image, clearBackgroundColor) {
+	this._bg_img = new Image();
+	this._bg_img.name = image;
+	this._bg_img.src = image;
+	this._bg_img.onload = () => {
+		this.draw(true, true);
+	};
+	this.background_image = image;
+
+	this.clear_background = true;
+	this.clear_background_color = clearBackgroundColor;
+	this._pattern = null
+}