Use npm package @ComfyOrg/litegraph (#89)

* Use npm to manage litegraph * Fix merge issues caused by BetaUI change * Switch to @comfyorg/litegraph * Fix various import * Fix css apply order bug * Fix package lock * Update litegraph * Update litegraph * Update browsertest expectations * Update test expectations [skip ci] * Fix default view screenshot --------- Co-authored-by: github-actions <github-actions@github.com>
Comfy-Org · Jul 6, 2024 · d6b2d5f · d6b2d5f
1 parent 27c5bc1
commit d6b2d5f
Show file tree

Hide file tree

Showing 63 changed files with 514 additions and 18,024 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,10 @@ Front-end of [ComfyUI](https://github.com/comfyanonymous/ComfyUI) modernized. Th
 - Added a shim layer to be backward compatible with the existing extension system. https://github.com/huchenlei/ComfyUI_frontend/pull/15
 - Front-end dev server.
 - Zod schema for input validation on ComfyUI workflow.
+- Make litegraph a npm dependency.
 
 ### What to be done
 
-- Make litegraph a npm dependency.
 - Replace the existing ComfyUI front-end impl.
 - Turn on `strict` on `tsconfig.json`.
 - Introduce react to start managing part of the UI.

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
@@ -38,6 +38,8 @@ export class ComfyPage {
 
   async resetView() {
     await this.resetViewButton.click();
+    // Avoid "Reset View" button highlight.
+    await this.page.mouse.move(10, 10);
     await this.nextFrame();
   }
 

diff --git a/...er_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png b/...er_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
diff --git a/...er_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png b/...er_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png
diff --git a/...ts/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png b/...ts/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png
diff --git a/...ts/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png b/...ts/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png
diff --git a/.../rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png b/.../rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png
diff --git a/.../rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png b/.../rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png
diff --git a/...rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png b/...rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png
diff --git a/...rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png b/...rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png
diff --git a/...lickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png b/...lickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png
diff --git a/...lickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png b/...lickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png
diff --git a/...lickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png b/...lickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png
diff --git a/...lickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png b/...lickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png
diff --git a/index.html b/index.html
@@ -12,12 +12,6 @@
 				font-family: 'Roboto Mono', 'Noto Color Emoji';
 			}
 		</style> -->
-		<link rel="stylesheet" type="text/css" href="/lib/litegraph.css" />
-		<link rel="stylesheet" type="text/css" href="/style.css" />
-		<link rel="stylesheet" type="text/css" href="/user.css" />
-		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.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">
 			console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);
 			import { app } from "./src/scripts/app";
@@ -27,6 +21,8 @@
 				window.graph = app.graph;
 			})();
 		</script>
+		<link rel="stylesheet" type="text/css" href="/user.css" />
+		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.css" />
 	</head>
 	<body class="litegraph">
 		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "zip-dir": "^2.0.0"
   },
   "dependencies": {
+    "@comfyorg/litegraph": "^0.7.20",
     "dotenv": "^16.4.5",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
@@ -47,4 +48,4 @@
       "git add"
     ]
   }
-}
+}
diff --git a/public/style.css → src/assets/css/style.css b/public/style.css → src/assets/css/style.css
@@ -1,5 +1,3 @@
-@import url("scripts/ui/menu/menu.css");
-
 :root {
 	--fg-color: #000;
 	--bg-color: #fff;

diff --git a/src/extensions/core/colorPalette.ts b/src/extensions/core/colorPalette.ts
@@ -1,6 +1,7 @@
 import { app } from "../../scripts/app";
 import { $el } from "../../scripts/ui";
 import type { ColorPalettes } from "/types/colorPalette";
+import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 // Manage color palettes
 
@@ -427,6 +428,32 @@ const els: { select: HTMLSelectElement | null } = {
 // const ctxMenu = LiteGraph.ContextMenu;
 app.registerExtension({
   name: id,
+  init() {
+    /**
+     * Changes the background color of the canvas.
+     *
+     * @method updateBackground
+     * @param {image} String
+     * @param {clearBackgroundColor} String
+     */
+    // @ts-ignore
+    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;
+    };
+  },
   addCustomNodeDefs(node_defs) {
     const sortObjectKeys = (unordered) => {
       return Object.keys(unordered)

diff --git a/src/extensions/core/contextMenuFilter.ts b/src/extensions/core/contextMenuFilter.ts
@@ -1,3 +1,4 @@
+import { LiteGraph, LGraphCanvas } from "@comfyorg/litegraph";
 import { app } from "../../scripts/app";
 
 // Adds filtering to combo context menus

diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
@@ -2,7 +2,8 @@ import { app } from "../../scripts/app";
 import { api } from "../../scripts/api";
 import { mergeIfValid } from "./widgetInputs";
 import { ManageGroupDialog } from "./groupNodeManage";
-import type { LGraphNode } from "/types/litegraph";
+import type { LGraphNode } from "@comfyorg/litegraph";
+import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 const GROUP = Symbol();
 

diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
@@ -3,7 +3,11 @@ import { DraggableList } from "../../scripts/ui/draggableList";
 import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
 import "./groupNodeManage.css";
 import { app, type ComfyApp } from "../../scripts/app";
-import type { LGraphNode, LGraphNodeConstructor } from "/types/litegraph";
+import {
+  LiteGraph,
+  type LGraphNode,
+  type LGraphNodeConstructor,
+} from "@comfyorg/litegraph";
 
 const ORDER: symbol = Symbol();
 

diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts
@@ -1,4 +1,5 @@
 import { app } from "../../scripts/app";
+import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 function setNodeMode(node, mode) {
   node.mode = mode;

diff --git a/src/extensions/core/invertMenuScrolling.ts b/src/extensions/core/invertMenuScrolling.ts
@@ -1,3 +1,4 @@
+import { LiteGraph } from "@comfyorg/litegraph";
 import { app } from "../../scripts/app";
 
 // Inverts the scrolling of context menus

diff --git a/src/extensions/core/linkRenderMode.ts b/src/extensions/core/linkRenderMode.ts
@@ -1,5 +1,5 @@
 import { app } from "../../scripts/app";
-
+import { LiteGraph } from "@comfyorg/litegraph";
 const id = "Comfy.LinkRenderMode";
 const ext = {
   name: id,

diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
@@ -2,6 +2,7 @@ import { app } from "../../scripts/app";
 import { api } from "../../scripts/api";
 import { ComfyDialog, $el } from "../../scripts/ui";
 import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
+import { LGraphCanvas } from "@comfyorg/litegraph";
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:

diff --git a/src/extensions/core/noteNode.ts b/src/extensions/core/noteNode.ts
@@ -1,3 +1,4 @@
+import { LiteGraph, LGraphCanvas } from "@comfyorg/litegraph";
 import { app } from "../../scripts/app";
 import { ComfyWidgets } from "../../scripts/widgets";
 // Node that add notes to your project
@@ -8,11 +9,8 @@ app.registerExtension({
     class NoteNode {
       static category: string;
 
-      // @ts-ignore
       color = LGraphCanvas.node_colors.yellow.color;
-      // @ts-ignore
       bgcolor = LGraphCanvas.node_colors.yellow.bgcolor;
-      // @ts-ignore
       groupcolor = LGraphCanvas.node_colors.yellow.groupcolor;
       properties: { text: string };
       serialize_widgets: boolean;

diff --git a/src/extensions/core/rerouteNode.js b/src/extensions/core/rerouteNode.js
@@ -1,5 +1,6 @@
 import { app } from "../../scripts/app";
 import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs";
+import { LiteGraph, LGraphCanvas } from "@comfyorg/litegraph";
 
 // Node that allows you to redirect connections for cleaner graphs
 

diff --git a/src/extensions/core/simpleTouchSupport.ts b/src/extensions/core/simpleTouchSupport.ts
@@ -1,4 +1,5 @@
 import { app } from "../../scripts/app";
+import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 let touchZooming;
 let touchCount = 0;

diff --git a/src/extensions/core/slotDefaults.js b/src/extensions/core/slotDefaults.js
@@ -1,5 +1,6 @@
 import { app } from "../../scripts/app";
 import { ComfyWidgets } from "../../scripts/widgets";
+import { LiteGraph } from "@comfyorg/litegraph";
 // Adds defaults for quickly adding nodes with middle click on the input/output
 
 app.registerExtension({

diff --git a/src/extensions/core/snapToGrid.ts b/src/extensions/core/snapToGrid.ts
@@ -1,4 +1,10 @@
 import { app } from "../../scripts/app";
+import {
+  LGraphCanvas,
+  LGraphNode,
+  LGraphGroup,
+  LiteGraph,
+} from "@comfyorg/litegraph";
 
 // Shift + drag/resize to snap to grid
 
@@ -77,12 +83,14 @@ app.registerExtension({
 
         let w, h;
         if (node.flags.collapsed) {
+          // @ts-ignore
           w = node._collapsed_width;
           h = LiteGraph.NODE_TITLE_HEIGHT;
           shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
         } else {
           w = node.size[0];
           h = node.size[1];
+          // @ts-ignore
           let titleMode = node.constructor.title_mode;
           if (
             titleMode !== LiteGraph.TRANSPARENT_TITLE &&
@@ -105,7 +113,7 @@ app.registerExtension({
      * The currently moving, selected group only. Set after the `selected_group` has actually started
      * moving.
      */
-    let selectedAndMovingGroup = null;
+    let selectedAndMovingGroup: LGraphGroup | null = null;
 
     /**
      * Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
@@ -154,13 +162,16 @@ app.registerExtension({
     LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
       if (this.selected_group && app.shiftDown) {
         if (this.selected_group_resizing) {
+          // @ts-ignore
           roundVectorToGrid(this.selected_group.size);
         } else if (selectedAndMovingGroup) {
+          // @ts-ignore
           const [x, y] = roundVectorToGrid([...selectedAndMovingGroup.pos]);
           const f = ctx.fillStyle;
           const s = ctx.strokeStyle;
           ctx.fillStyle = "rgba(100, 100, 100, 0.33)";
           ctx.strokeStyle = "rgba(100, 100, 100, 0.66)";
+          // @ts-ignore
           ctx.rect(x, y, ...selectedAndMovingGroup.size);
           ctx.fill();
           ctx.stroke();

diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
@@ -1,6 +1,6 @@
 import { app } from "../../scripts/app";
 import { api } from "../../scripts/api";
-import type { IWidget } from "/types/litegraph";
+import type { IWidget } from "@comfyorg/litegraph";
 import type { DOMWidget } from "/scripts/domWidget";
 import { ComfyNodeDef } from "/types/apiTypes";
 

diff --git a/src/extensions/core/widgetInputs.js b/src/extensions/core/widgetInputs.js
@@ -1,6 +1,7 @@
 import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets";
 import { app } from "../../scripts/app";
 import { applyTextReplacements } from "../../scripts/utils";
+import { LiteGraph } from "@comfyorg/litegraph";
 
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];