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/scripts/app.ts

@@ -15,12 +15,21 @@ import { createImageHost, calculateImageGrid } from "./ui/imagePreview";
 import { DraggableList } from "./ui/draggableList";
 import { applyTextReplacements, addStylesheet } from "./utils";
 import type { ComfyExtension } from "/types/comfy";
-import type { LGraph, LGraphCanvas, LGraphNode } from "/types/litegraph";
 import { type ComfyWorkflow, parseComfyWorkflow } from "../types/comfyWorkflow";
 import { ComfyNodeDef } from "/types/apiTypes";
 import { ComfyAppMenu } from "./ui/menu/index.js";
 import { getStorageValue, setStorageValue } from "./utils.js";
 import { ComfyWorkflowManager } from "./workflows.js";
+import {
+  LGraphCanvas,
+  LGraph,
+  LGraphNode,
+  LiteGraph,
+} from "@comfyorg/litegraph";
+
+// CSS imports. style.css must be imported later as it overwrites some litegraph styles.
+import "@comfyorg/litegraph/css/litegraph.css";
+import "../assets/css/style.css";
 
 export const ANIM_PREVIEW_WIDGET = "$$comfy_animation_preview";
 
@@ -1839,12 +1848,10 @@ export class ComfyApp {
     this.#addApiUpdateHandlers();
     this.#addRestoreWorkflowView();
 
-    // @ts-ignore
     this.graph = new LGraph();
 
     this.#addAfterConfigureHandler();
 
-    // @ts-ignore
     this.canvas = new LGraphCanvas(canvasEl, this.graph);
     this.ctx = canvasEl.getContext("2d");
 

src/scripts/changeTracker.js

@@ -2,6 +2,7 @@
 
 import { api } from "./api";
 import { clone } from "./utils";
+import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 export class ChangeTracker {
   static MAX_HISTORY = 50;

src/scripts/domWidget.ts

@@ -1,5 +1,6 @@
 import { app, ANIM_PREVIEW_WIDGET } from "./app";
-import type { LGraphNode, Vector4 } from "/types/litegraph";
+import { LGraphCanvas, LGraphNode, LiteGraph } from "@comfyorg/litegraph";
+import type { Vector4 } from "@comfyorg/litegraph";
 
 const SIZE = Symbol();
 

src/scripts/pnginfo.ts

@@ -1,3 +1,4 @@
+import { LiteGraph } from "@comfyorg/litegraph";
 import { api } from "./api";
 
 export function getPngMetadata(file) {

src/scripts/widgets.ts

@@ -1,7 +1,7 @@
 import { api } from "./api";
 import "./domWidget";
 import type { ComfyApp } from "./app";
-import type { IWidget, LGraphNode } from "/types/litegraph";
+import type { IWidget, LGraphNode } from "@comfyorg/litegraph";
 import { ComfyNodeDef } from "/types/apiTypes";
 
 export type ComfyWidgetConstructor = (

src/scripts/workflows.js

@@ -4,6 +4,7 @@ import { api } from "./api";
 import { ChangeTracker } from "./changeTracker";
 import { ComfyAsyncDialog } from "./ui/components/asyncDialog";
 import { getStorageValue, setStorageValue } from "./utils";
+import { LGraphCanvas } from "@comfyorg/litegraph";
 
 function appendJsonExt(path) {
   if (!path.toLowerCase().endsWith(".json")) {