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>

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)

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

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();
 

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();
 

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;

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

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,

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:

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;

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
 

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;

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({

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();

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";
 

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"];