Restore context menu

web/extensions/core/contextMenuFilter.js

@@ -1,18 +1,17 @@
 import { app } from "../../scripts/app.js";
 import { LiteGraph } from "../../lib/litegraph.core.js"
+import { hook } from "../../scripts/utils.js";
 
 // Adds filtering to combo context menus
 
 const ext = {
 	name: "Comfy.ContextMenuFilter",
 	init() {
-		const ctxMenu = LiteGraph.ContextMenu;
+		hook(LiteGraph, "onContextMenuCreated", (orig, contextMenu) => {
-
+			orig?.(contextMenu);
-		LiteGraph.ContextMenu = function (values, options) {
-			const ctx = ctxMenu.call(this, values, options);
 
 			// If we are a dark menu (only used for combo boxes) then add a filter input
-			if (options?.className === "dark" && values?.length > 10) {
+			if (contextMenu.options?.className === "dark" && contextMenu.values?.length > 10) {
 				const filter = document.createElement("input");
 				filter.classList.add("comfy-context-menu-filter");
 				filter.placeholder = "Filter list";
@@ -30,7 +29,7 @@ const ext = {
 						.find(w => w.options.values.every((v, i) => v === values[i]))
 						?.value;
 
-					let selectedIndex = clickedComboValue ? values.findIndex(v => v === clickedComboValue) : 0;
+					let selectedIndex = clickedComboValue ? contextMenu.values.findIndex(v => v === clickedComboValue) : 0;
 					if (selectedIndex < 0) {
 						selectedIndex = 0;
 					} 
@@ -116,8 +115,8 @@ const ext = {
 						updateSelected();
 
 						// If we have an event then we can try and position the list under the source
-						if (options.event) {
+						if (contextMenu.options.event) {
-							let top = options.event.clientY - 10;
+							let top = contextMenu.options.event.clientY - 10;
 
 							const bodyRect = document.body.getBoundingClientRect();
 							const rootRect = this.root.getBoundingClientRect();
@@ -138,11 +137,7 @@ const ext = {
 					});
 				})
 			}
-
+		});
-			return ctx;
-		};
-
-		// LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
 	},
 }
 

web/extensions/core/invertMenuScrolling.js

@@ -1,5 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { LiteGraph } from "../../lib/litegraph.core.js"
+import { hook } from "../../scripts/utils.js";
 
 // Inverts the scrolling of context menus
 
@@ -7,30 +8,18 @@ const id = "Comfy.InvertMenuScrolling";
 app.registerExtension({
 	name: id,
 	init() {
-		const ctxMenu = LiteGraph.ContextMenu;
+		let invert = false;
-		const replace = () => {
+		hook(LiteGraph, "onContextMenuCreated", (orig, contextMenu) => {
-			LiteGraph.ContextMenu = function (values, options) {
+			orig?.(contextMenu);
-				options = options || {};
+			contextMenu.invert_scrolling = invert;
-				if (options.scroll_speed) {
+		})
-					options.scroll_speed *= -1;
-				} else {
-					options.scroll_speed = -0.1;
-				}
-				return ctxMenu.call(this, values, options);
-			};
-			LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
-		};
 		app.ui.settings.addSetting({
 			id,
 			name: "Invert Menu Scrolling",
 			type: "boolean",
 			defaultValue: false,
 			onChange(value) {
-				if (value) {
+				invert = value;
-					replace();
-				} else {
-					LiteGraph.ContextMenu = ctxMenu;
-				}
 			},
 		});
 	},

web/scripts/graphNode.js

@@ -7,6 +7,7 @@ export class ComfyGraphNode extends LGraphNode {
 	constructor(title, app) {
 		super(title)
 		this.app = app;
+		this.serialize_widgets = true;
 	}
 
 	getImageTop() {
@@ -260,12 +261,6 @@ export class ComfyBackendNode extends ComfyGraphNode {
         this.comfyClass = comfyClass;
         this.isBackendNode = true;
 
-        const color = LGraphCanvas.node_colors["yellow"];
-        if (this.color == null)
-            this.color = color.color
-        if (this.bgColor == null)
-            this.bgColor = color.bgColor
-
         this.#setup(nodeDef)
 
         // if (nodeDef.output_node) {
@@ -317,7 +312,6 @@ export class ComfyBackendNode extends ComfyGraphNode {
             this.addOutput(output.name, output.type, { shape: outputShape });
         }
 
-        this.serialize_widgets = false;
         // app.#invokeExtensionsAsync("nodeCreated", this);
     }
 

web/scripts/utils.js

@@ -1,3 +1,10 @@
 export function range(size, startAt = 0) {
     return [...Array(size).keys()].map(i => i + startAt);
 }
+
+export function hook(klass, fnName, cb) {
+    const orig = location[fnName];
+    location[fnName] = (...args) => {
+        cb(orig, ...args);
+    }
+}

web/scripts/widgets.js

@@ -9,7 +9,7 @@ function getNumberDefaults(inputData, defaultStep) {
 	if (max == undefined) max = 2048;
 	if (step == undefined) step = defaultStep;
 
-	return { val: defaultVal, config: { min, max, step: 10.0 * step } };
+	return { val: defaultVal, config: { min, max, step: step } };
 }
 
 export function addValueControlWidget(node, targetWidget, defaultValue = "randomize", values) {
@@ -50,20 +50,20 @@ export function addValueControlWidget(node, targetWidget, defaultValue = "random
 			// limit to something that javascript can handle
 			max = Math.min(1125899906842624, max);
 			min = Math.max(-1125899906842624, min);
-			let range = (max - min) / (targetWidget.options.step / 10);
+			let range = (max - min) / (targetWidget.options.step);
 
 			//adjust values based on valueControl Behaviour
 			switch (v) {
 				case "fixed":
 					break;
 				case "increment":
-					targetWidget.value += targetWidget.options.step / 10;
+					targetWidget.value += targetWidget.options.step;
 					break;
 				case "decrement":
-					targetWidget.value -= targetWidget.options.step / 10;
+					targetWidget.value -= targetWidget.options.step;
 					break;
 				case "randomize":
-					targetWidget.value = Math.floor(Math.random() * range) * (targetWidget.options.step / 10) + min;
+					targetWidget.value = Math.floor(Math.random() * range) * (targetWidget.options.step) + min;
 				default:
 					break;
 			}
@@ -276,7 +276,7 @@ export const ComfyWidgets = {
 				inputName,
 				val,
 				function (v) {
-					const s = this.options.step / 10;
+					const s = this.options.step;
 					this.value = Math.round(v / s) * s;
 				},
 				config