Switch the version of litegraph used to litegraph.ts

web/extensions/core/colorPalette.js

@@ -1,5 +1,6 @@
 import {app} from "../../scripts/app.js";
 import {$el} from "../../scripts/ui.js";
+import { LiteGraph, LGraphCanvas } from "../../lib/litegraph.core.js"
 
 // Manage color palettes
 
@@ -341,8 +342,8 @@ app.registerExtension({
 			if (colorPalette.colors) {
 				// Sets the colors of node slots and links
 				if (colorPalette.colors.node_slot) {
-					Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot);
-					Object.assign(LGraphCanvas.link_type_colors, colorPalette.colors.node_slot);
+					Object.assign(LGraphCanvas.DEFAULT_CONNECTION_COLORS_BY_TYPE, colorPalette.colors.node_slot);
+					Object.assign(app.canvas.link_type_colors, colorPalette.colors.node_slot);
 				}
 				// Sets the colors of the LiteGraph objects
 				if (colorPalette.colors.litegraph_base) {

web/extensions/core/contextMenuFilter.js

@@ -1,38 +1,39 @@
-import {app} from "../../scripts/app.js";
+import { app } from "../../scripts/app.js";
+import { LiteGraph, LGraphCanvas } 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;
-
-		LiteGraph.ContextMenu = function (values, options) {
-			const ctx = ctxMenu.call(this, values, options);
+		hook(LiteGraph, "onContextMenuCreated", (orig, args) => {
+			orig?.(...args);
+			const contextMenu = args[0];
 
 			// 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";
-				this.root.prepend(filter);
+				contextMenu.root.prepend(filter);
 
-				const items = Array.from(this.root.querySelectorAll(".litemenu-entry"));
+				const items = Array.from(contextMenu.root.querySelectorAll(".litemenu-entry"));
 				let displayedItems = [...items];
 				let itemCount = displayedItems.length;
 
 				// We must request an animation frame for the current node of the active canvas to update.
 				requestAnimationFrame(() => {
 					const currentNode = LGraphCanvas.active_canvas.current_node;
 					const clickedComboValue = currentNode.widgets
-						.filter(w => w.type === "combo" && w.options.values.length === values.length)
-						.find(w => w.options.values.every((v, i) => v === values[i]))
+						.filter(w => w.type === "combo" && w.options.values.length === contextMenu.values.length)
+						.find(w => w.options.values.every((v, i) => v === contextMenu.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;
-					} 
+					}
 					let selectedItem = displayedItems[selectedIndex];
 					updateSelected();
 
@@ -46,13 +47,13 @@ const ext = {
 					}
 
 					const positionList = () => {
-						const rect = this.root.getBoundingClientRect();
+						const rect = contextMenu.root.getBoundingClientRect();
 
 						// If the top is off-screen then shift the element with scaling applied
 						if (rect.top < 0) {
-							const scale = 1 - this.root.getBoundingClientRect().height / this.root.clientHeight;
-							const shift = (this.root.clientHeight * scale) / 2;
-							this.root.style.top = -shift + "px";
+							const scale = 1 - contextMenu.root.getBoundingClientRect().height / contextMenu.root.clientHeight;
+							const shift = (contextMenu.root.clientHeight * scale) / 2;
+							contextMenu.root.style.top = -shift + "px";
 						}
 					}
 
@@ -91,7 +92,7 @@ const ext = {
 								selectedItem?.click();
 								break;
 							case "Escape":
-								this.close();
+								contextMenu.close();
 								break;
 						}
 					});
@@ -115,16 +116,16 @@ const ext = {
 						updateSelected();
 
 						// If we have an event then we can try and position the list under the source
-						if (options.event) {
-							let top = options.event.clientY - 10;
+						if (contextMenu.options.event) {
+							let top = contextMenu.options.event.clientY - 10;
 
 							const bodyRect = document.body.getBoundingClientRect();
-							const rootRect = this.root.getBoundingClientRect();
+							const rootRect = contextMenu.root.getBoundingClientRect();
 							if (bodyRect.height && top > bodyRect.height - rootRect.height - 10) {
 								top = Math.max(0, bodyRect.height - rootRect.height - 10);
 							}
 
-							this.root.style.top = top + "px";
+							contextMenu.root.style.top = top + "px";
 							positionList();
 						}
 					});
@@ -137,11 +138,7 @@ const ext = {
 					});
 				})
 			}
-
-			return ctx;
-		};
-
-		LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
+		});
 	},
 }
 

web/extensions/core/invertMenuScrolling.js

@@ -1,36 +1,23 @@
 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
 
 const id = "Comfy.InvertMenuScrolling";
 app.registerExtension({
 	name: id,
 	init() {
-		const ctxMenu = LiteGraph.ContextMenu;
-		const replace = () => {
-			LiteGraph.ContextMenu = function (values, options) {
-				options = options || {};
-				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;
-		};
+		hook(LiteGraph, "onContextMenuCreated", (orig, args) => {
+			orig?.(...args)
+			const contextMenu = args[0];
+			contextMenu.options.invert_scrolling = localStorage[`Comfy.Settings.${id}`] === "true";
+		})
 		app.ui.settings.addSetting({
 			id,
 			name: "Invert Menu Scrolling",
 			type: "boolean",
-			defaultValue: false,
-			onChange(value) {
-				if (value) {
-					replace();
-				} else {
-					LiteGraph.ContextMenu = ctxMenu;
-				}
-			},
+			defaultValue: false
 		});
 	},
 });

web/extensions/core/linkRenderMode.js

@@ -1,4 +1,5 @@
 import { app } from "../../scripts/app.js";
+import { LiteGraph, LINK_RENDER_MODE_NAMES } from "../../lib/litegraph.core.js"
 
 const id = "Comfy.LinkRenderMode";
 const ext = {
@@ -9,14 +10,14 @@ const ext = {
 			name: "Link Render Mode",
 			defaultValue: 2,
 			type: "combo",
-			options: LiteGraph.LINK_RENDER_MODES.map((m, i) => ({
+			options: LINK_RENDER_MODE_NAMES.map((m, i) => ({
 				value: i,
 				text: m,
 				selected: i == app.canvas.links_render_mode,
 			})),
 			onChange(value) {
 				app.canvas.links_render_mode = +value;
-				app.graph.setDirtyCanvas(true);
+				app.canvas.draw(true, true);
 			},
 		});
 	},

web/extensions/core/maskeditor.js

@@ -1,6 +1,5 @@
-import { app } from "../../scripts/app.js";
+import { app, ComfyApp } from "../../scripts/app.js";
 import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ComfyApp } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
 import { ClipspaceDialog } from "./clipspace.js";
 
@@ -657,4 +656,4 @@ app.registerExtension({
 		const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0
 		ClipspaceDialog.registerButton("MaskEditor", context_predicate, ComfyApp.open_maskeditor);
 	}
-});
+});

web/extensions/core/nodeTemplates.js

@@ -1,5 +1,7 @@
 import { app } from "../../scripts/app.js";
+import { hook } from "../../scripts/utils.js";
 import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { LGraphCanvas } from "../../lib/litegraph.core.js"
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:
@@ -130,9 +132,8 @@ app.registerExtension({
 			localStorage.setItem("litegrapheditor_clipboard", old);
 		};
 
-		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
-		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-			const options = orig.apply(this, arguments);
+		hook(LGraphCanvas, "getCanvasMenuOptions", function (orig, args) {
+			const options = orig.apply(this, args);
 
 			options.push(null);
 			options.push({
@@ -179,6 +180,6 @@ app.registerExtension({
 			}
 
 			return options;
-		};
+		});
 	},
 });

web/extensions/core/noteNode.js

@@ -1,15 +1,19 @@
-import {app} from "../../scripts/app.js";
-import {ComfyWidgets} from "../../scripts/widgets.js";
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
+import { ComfyGraphNode } from "../../scripts/graphNode.js";
+import { LiteGraph, LGraphCanvas } from "../../lib/litegraph.core.js"
+
 // Node that add notes to your project
 
 app.registerExtension({
     name: "Comfy.NoteNode",
     registerCustomNodes() {
-        class NoteNode {
+        class NoteNode extends ComfyGraphNode {
             color=LGraphCanvas.node_colors.yellow.color;
             bgcolor=LGraphCanvas.node_colors.yellow.bgcolor;
             groupcolor = LGraphCanvas.node_colors.yellow.groupcolor;
-            constructor() {
+            constructor(title) {
+				super(title)
                 if (!this.properties) {
                     this.properties = {};
                     this.properties.text="";
@@ -19,23 +23,18 @@ app.registerExtension({
 
                 this.serialize_widgets = true;
                 this.isVirtualNode = true;
-
             }
-
-
         }
 
         // Load default visibility
 
-        LiteGraph.registerNodeType(
-            "Note",
-            Object.assign(NoteNode, {
-                title_mode: LiteGraph.NORMAL_TITLE,
-                title: "Note",
-                collapsable: true,
-            })
-        );
-
-        NoteNode.category = "utils";
+        LiteGraph.registerNodeType({
+			class: NoteNode,
+            title_mode: LiteGraph.NORMAL_TITLE,
+			category: "utils",
+			type: "Note",
+            title: "Note",
+            collapsable: true,
+		});
     },
 });