Revert "Use npm to manage litegraph dependency (#45)" (#47)

This reverts commit 4640eaf0ac.

src/extensions/core/colorPalette.ts

@@ -1,4 +1,3 @@
-import { LiteGraph, LGraphCanvas } from "comfyui-litegraph";
 import {app} from "../../scripts/app";
 import {$el} from "../../scripts/ui";
 import type { ColorPalettes } from "/types/colorPalette";
@@ -761,7 +760,8 @@ app.registerExtension({
 					BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
 					CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
 				}
-
+				// @ts-ignore
+				// litegraph.extensions.js
 				app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
 			},
 		});

src/extensions/core/contextMenuFilter.ts

@@ -1,4 +1,3 @@
-import { LiteGraph } from "comfyui-litegraph";
 import {app} from "../../scripts/app";
 
 // Adds filtering to combo context menus

src/extensions/core/groupNode.ts

@@ -2,8 +2,7 @@ import { app } from "../../scripts/app";
 import { api } from "../../scripts/api";
 import { mergeIfValid } from "./widgetInputs";
 import { ManageGroupDialog } from "./groupNodeManage";
-import type { LGraphNode } from "comfyui-litegraph";
-import { LGraphCanvas, LiteGraph } from "comfyui-litegraph";
+import type { LGraphNode } from "/types/litegraph";
 
 const GROUP = Symbol();
 

src/extensions/core/groupNodeManage.ts

@@ -3,7 +3,7 @@ import { DraggableList } from "../../scripts/ui/draggableList";
 import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
 import "./groupNodeManage.css";
 import type { ComfyApp } from "/scripts/app";
-import { LiteGraph, type LGraphNode, type LGraphNodeConstructor } from "comfyui-litegraph";
+import type { LGraphNode, LGraphNodeConstructor } from "/types/litegraph";
 
 
 const ORDER: symbol = Symbol();

src/extensions/core/groupOptions.ts

@@ -1,5 +1,4 @@
 import {app} from "../../scripts/app";
-import { LGraphCanvas, LiteGraph } from "comfyui-litegraph";
 
 function setNodeMode(node, mode) {
     node.mode = mode;

src/extensions/core/invertMenuScrolling.ts

@@ -1,4 +1,3 @@
-import { LiteGraph } from "comfyui-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 "comfyui-litegraph";
+
 const id = "Comfy.LinkRenderMode";
 const ext = {
 	name: id,

src/extensions/core/nodeTemplates.ts

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

src/extensions/core/noteNode.ts

@@ -1,4 +1,3 @@
-import { LiteGraph } from "comfyui-litegraph";
 import {app} from "../../scripts/app";
 import {ComfyWidgets} from "../../scripts/widgets";
 // Node that add notes to your project

src/extensions/core/rerouteNode.js

@@ -1,6 +1,5 @@
 import { app } from "../../scripts/app";
 import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs";
-import { LiteGraph, LGraphCanvas } from "comfyui-litegraph";
 
 // Node that allows you to redirect connections for cleaner graphs
 

src/extensions/core/simpleTouchSupport.ts

@@ -1,5 +1,4 @@
 import { app } from "../../scripts/app";
-import { LGraphCanvas, LiteGraph } from "comfyui-litegraph";
 
 let touchZooming;
 let touchCount = 0;

src/extensions/core/slotDefaults.js

@@ -1,6 +1,5 @@
 import { app } from "../../scripts/app";
 import { ComfyWidgets } from "../../scripts/widgets";
-import { LiteGraph } from "comfyui-litegraph";
 // Adds defaults for quickly adding nodes with middle click on the input/output
 
 app.registerExtension({

src/extensions/core/snapToGrid.ts

@@ -1,5 +1,4 @@
 import { app } from "../../scripts/app";
-import { LGraphCanvas, LGraphNode, LGraphGroup, LiteGraph } from "comfyui-litegraph";
 
 // Shift + drag/resize to snap to grid
 
@@ -70,14 +69,12 @@ 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 && titleMode !== LiteGraph.NO_TITLE) {
 						h += LiteGraph.NODE_TITLE_HEIGHT;
@@ -97,7 +94,7 @@ app.registerExtension({
   		 * The currently moving, selected group only. Set after the `selected_group` has actually started
 		 * moving.
    		 */
-		let selectedAndMovingGroup: LGraphGroup | null = null;
+		let selectedAndMovingGroup = null;
 
 		/**
   		 * Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
@@ -144,13 +141,11 @@ app.registerExtension({
 				if (this.selected_group_resizing) {
 					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/undoRedo.ts

@@ -1,6 +1,5 @@
 import { app } from "../../scripts/app";
 import { api } from "../../scripts/api";
-import { LGraphCanvas, LiteGraph } from "comfyui-litegraph";
 
 const MAX_HISTORY = 50;
 

src/extensions/core/widgetInputs.js

@@ -1,7 +1,6 @@
 import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets";
 import { app } from "../../scripts/app";
 import { applyTextReplacements } from "../../scripts/utils";
-import { LiteGraph } from "comfyui-litegraph";
 
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];

src/lib/litegraph.css

@@ -0,0 +1,693 @@
+/* this CSS contains only the basic CSS needed to run the app and use it */
+
+.lgraphcanvas {
+    /*cursor: crosshair;*/
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+	outline: none;
+    font-family: Tahoma, sans-serif;
+}
+
+.lgraphcanvas * {
+    box-sizing: border-box;
+}
+
+.litegraph.litecontextmenu {
+    font-family: Tahoma, sans-serif;
+    position: fixed;
+    top: 100px;
+    left: 100px;
+    min-width: 100px;
+    color: #aaf;
+    padding: 0;
+    box-shadow: 0 0 10px black !important;
+    background-color: #2e2e2e !important;
+	z-index: 10;
+}
+
+.litegraph.litecontextmenu.dark {
+    background-color: #000 !important;
+}
+
+.litegraph.litecontextmenu .litemenu-title img {
+    margin-top: 2px;
+    margin-left: 2px;
+    margin-right: 4px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry {
+    margin: 2px;
+    padding: 2px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu {
+    background-color: #2e2e2e !important;
+}
+
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+    background-color: #000 !important;
+}
+
+.litegraph .litemenubar ul {
+    font-family: Tahoma, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.litegraph .litemenubar li {
+    font-size: 14px;
+    color: #999;
+    display: inline-block;
+    min-width: 50px;
+    padding-left: 10px;
+    padding-right: 10px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenubar li:hover {
+    background-color: #777;
+    color: #eee;
+}
+
+.litegraph .litegraph .litemenubar-panel {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    min-width: 100px;
+    background-color: #444;
+    box-shadow: 0 0 3px black;
+    padding: 4px;
+    border-bottom: 2px solid #aaf;
+    z-index: 10;
+}
+
+.litegraph .litemenu-entry,
+.litemenu-title {
+    font-size: 12px;
+    color: #aaa;
+    padding: 0 0 0 4px;
+    margin: 2px;
+    padding-left: 2px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenu-entry .icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin: 2px;
+    vertical-align: top;
+}
+
+.litegraph .litemenu-entry.checked .icon {
+    background-color: #aaf;
+}
+
+.litegraph .litemenu-entry .more {
+    float: right;
+    padding-right: 5px;
+}
+
+.litegraph .litemenu-entry.disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry.separator {
+    display: block;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #666;
+    width: 100%;
+    height: 0px;
+    margin: 3px 0 2px 0;
+    background-color: transparent;
+    padding: 0 !important;
+    cursor: default !important;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+    border-right: 2px solid cyan;
+}
+
+.litegraph .litemenu-title {
+    color: #dde;
+    background-color: #111;
+    margin: 0;
+    padding: 2px;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
+    background-color: #444 !important;
+    color: #eee;
+    transition: all 0.2s;
+}
+
+.litegraph .litemenu-entry .property_name {
+    display: inline-block;
+    text-align: left;
+    min-width: 80px;
+    min-height: 1.2em;
+}
+
+.litegraph .litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
+
+.litegraph.litesearchbox {
+    font-family: Tahoma, sans-serif;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding-top: 4px;
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+    margin-top: 3px;
+    min-width: 60px;
+    min-height: 1.5em;
+    background-color: black;
+    border: 0;
+    color: white;
+    padding-left: 10px;
+    margin-right: 5px;
+    max-width: 300px;
+}
+
+.litegraph.litesearchbox .name {
+    display: inline-block;
+    min-width: 60px;
+    min-height: 1.5em;
+    padding-left: 10px;
+}
+
+.litegraph.litesearchbox .helper {
+    overflow: auto;
+    max-height: 200px;
+    margin-top: 2px;
+}
+
+.litegraph.lite-search-item {
+    font-family: Tahoma, sans-serif;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding-top: 2px;
+}
+
+.litegraph.lite-search-item.not_in_filter{
+    /*background-color: rgba(50, 50, 50, 0.5);*/
+    /*color: #999;*/
+    color: #B99;
+    font-style: italic;
+}
+
+.litegraph.lite-search-item.generic_type{
+    /*background-color: rgba(50, 50, 50, 0.5);*/
+    /*color: #DD9;*/
+    color: #999;
+    font-style: italic;
+}
+
+.litegraph.lite-search-item:hover,
+.litegraph.lite-search-item.selected {
+    cursor: pointer;
+    background-color: white;
+    color: black;
+}
+
+.litegraph.lite-search-item-type {
+    display: inline-block;
+    background: rgba(0,0,0,0.2);
+    margin-left: 5px;
+    font-size: 14px;
+    padding: 2px 5px;
+    position: relative;
+    top: -2px;
+    opacity: 0.8;
+    border-radius: 4px;
+ }
+
+/* DIALOGs ******/
+
+.litegraph .dialog {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -150px;
+    margin-left: -200px;
+
+    background-color: #2A2A2A;
+
+    min-width: 400px;
+    min-height: 200px;
+	box-shadow: 0 0 4px #111;
+    border-radius: 6px;
+}
+
+.litegraph .dialog.settings {
+	left: 10px;
+	top: 10px;
+	height: calc( 100% - 20px );
+	margin: auto;
+    max-width: 50%;
+}
+
+.litegraph .dialog.centered {
+    top: 50px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    min-width: 600px;
+    min-height: 300px;
+    height: calc( 100% - 100px );
+	margin: auto;
+}
+
+.litegraph .dialog .close {
+    float: right;
+	margin: 4px;
+	margin-right: 10px;
+	cursor: pointer;
+	font-size: 1.4em;
+}
+
+.litegraph .dialog .close:hover {
+	color: white;
+}
+
+.litegraph .dialog .dialog-header {
+	color: #AAA;
+	border-bottom: 1px solid #161616;
+}
+
+.litegraph .dialog .dialog-header { height: 40px; }
+.litegraph .dialog .dialog-footer { height: 50px; padding: 10px; border-top: 1px solid #1a1a1a;}
+
+.litegraph .dialog .dialog-header .dialog-title {
+    font: 20px "Arial";
+    margin: 4px;
+    padding: 4px 10px;
+    display: inline-block;
+}
+
+.litegraph .dialog .dialog-content, .litegraph .dialog .dialog-alt-content {
+    height: calc(100% - 90px);
+    width: 100%;
+	min-height: 100px;
+    display: inline-block;
+	color: #AAA;
+    /*background-color: black;*/
+    overflow: auto;
+}
+
+.litegraph .dialog .dialog-content h3 {
+	margin: 10px;
+}
+
+.litegraph .dialog .dialog-content .connections {
+	flex-direction: row;
+}
+
+.litegraph .dialog .dialog-content .connections .connections_side {
+	width: calc(50% - 5px);
+	min-height: 100px;
+	background-color: black;
+	display: flex;
+}
+
+.litegraph .dialog .node_type {
+	font-size: 1.2em;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph .dialog .node_desc {
+	opacity: 0.5;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph .dialog .separator {
+	display: block;
+	width: calc( 100% - 4px );
+	height: 1px;
+	border-top: 1px solid #000;
+	border-bottom: 1px solid #333;
+	margin: 10px 2px;
+	padding: 0;
+}
+
+.litegraph .dialog .property {
+	margin-bottom: 2px;
+	padding: 4px;
+}
+
+.litegraph .dialog .property:hover {
+	background: #545454;
+}
+
+.litegraph .dialog .property_name {
+	color: #737373;
+    display: inline-block;
+    text-align: left;
+    vertical-align: top;
+    width: 160px;
+	padding-left: 4px;
+	overflow: hidden;
+    margin-right: 6px;
+}
+
+.litegraph .dialog .property:hover .property_name {
+    color: white;
+}
+
+.litegraph .dialog .property_value {
+    display: inline-block;
+    text-align: right;
+	color: #AAA;
+	background-color: #1A1A1A;
+    /*width: calc( 100% - 122px );*/
+    max-width: calc( 100% - 162px );
+    min-width: 200px;
+	max-height: 300px;
+    min-height: 20px;
+    padding: 4px;
+	padding-right: 12px;
+	overflow: hidden;
+	cursor: pointer;
+	border-radius: 3px;
+}
+
+.litegraph .dialog .property_value:hover {
+	color: white;
+}
+
+.litegraph .dialog .property.boolean .property_value {
+	padding-right: 30px;
+    color: #A88;
+    /*width: auto;
+    float: right;*/
+}
+
+.litegraph .dialog .property.boolean.bool-on .property_name{
+    color: #8A8;
+}
+.litegraph .dialog .property.boolean.bool-on .property_value{
+    color: #8A8;
+}
+
+.litegraph .dialog .btn {
+	border: 0;
+	border-radius: 4px;
+    padding: 4px 20px;
+    margin-left: 0px;
+    background-color: #060606;
+    color: #8e8e8e;
+}
+
+.litegraph .dialog .btn:hover {
+    background-color: #111;
+    color: #FFF;
+}
+
+.litegraph .dialog .btn.delete:hover {
+    background-color: #F33;
+    color: black;
+}
+
+.litegraph .subgraph_property {
+	padding: 4px;
+}
+
+.litegraph .subgraph_property:hover {
+	background-color: #333;
+}
+
+.litegraph .subgraph_property.extra {
+    margin-top: 8px;
+}
+
+.litegraph .subgraph_property span.name {
+	font-size: 1.3em;
+	padding-left: 4px;
+}
+
+.litegraph .subgraph_property span.type {
+	opacity: 0.5;
+	margin-right: 20px;
+	padding-left: 4px;
+}
+
+.litegraph .subgraph_property span.label {
+	display: inline-block;
+	width: 60px;
+	padding:  0px 10px;
+}
+
+.litegraph .subgraph_property input {
+	width: 140px;
+	color: #999;
+	background-color: #1A1A1A;
+	border-radius: 4px;
+	border: 0;
+	margin-right: 10px;
+	padding: 4px;
+	padding-left: 10px;
+}
+
+.litegraph .subgraph_property button {
+	background-color: #1c1c1c;
+	color: #aaa;
+	border: 0;
+	border-radius: 2px;
+	padding: 4px 10px;
+	cursor: pointer;
+}
+
+.litegraph .subgraph_property.extra {
+	color: #ccc;
+}
+
+.litegraph .subgraph_property.extra input {
+	background-color: #111;
+}
+
+.litegraph .bullet_icon {
+	margin-left: 10px;
+	border-radius: 10px;
+	width: 12px;
+	height: 12px;
+	background-color: #666;
+	display: inline-block;
+	margin-top: 2px;
+	margin-right: 4px;
+    transition: background-color 0.1s ease 0s;
+    -moz-transition: background-color 0.1s ease 0s;
+}
+
+.litegraph .bullet_icon:hover {
+	background-color: #698;
+	cursor: pointer;
+} 
+
+/* OLD */
+
+.graphcontextmenu {
+    padding: 4px;
+    min-width: 100px;
+}
+
+.graphcontextmenu-title {
+    color: #dde;
+    background-color: #222;
+    margin: 0;
+    padding: 2px;
+    cursor: default;
+}
+
+.graphmenu-entry {
+    box-sizing: border-box;
+    margin: 2px;
+    padding-left: 20px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    transition: all linear 0.3s;
+}
+
+.graphmenu-entry.event,
+.litemenu-entry.event {
+    border-left: 8px solid orange;
+    padding-left: 12px;
+}
+
+.graphmenu-entry.disabled {
+    opacity: 0.3;
+}
+
+.graphmenu-entry.submenu {
+    border-right: 2px solid #eee;
+}
+
+.graphmenu-entry:hover {
+    background-color: #555;
+}
+
+.graphmenu-entry.separator {
+    background-color: #111;
+    border-bottom: 1px solid #666;
+    height: 1px;
+    width: calc(100% - 20px);
+    -moz-width: calc(100% - 20px);
+    -webkit-width: calc(100% - 20px);
+}
+
+.graphmenu-entry .property_name {
+    display: inline-block;
+    text-align: left;
+    min-width: 80px;
+    min-height: 1.2em;
+}
+
+.graphmenu-entry .property_value,
+.litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
+
+.graphdialog {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    min-height: 2em;
+    background-color: #333;
+    font-size: 1.2em;
+    box-shadow: 0 0 10px black !important;
+	z-index: 10;
+}
+
+.graphdialog.rounded {
+    border-radius: 12px;
+    padding-right: 2px;
+}
+
+.graphdialog .name {
+    display: inline-block;
+    min-width: 60px;
+    min-height: 1.5em;
+    padding-left: 10px;
+}
+
+.graphdialog input,
+.graphdialog textarea,
+.graphdialog select {
+    margin: 3px;
+    min-width: 60px;
+    min-height: 1.5em;
+    background-color: black;
+    border: 0;
+    color: white;
+    padding-left: 10px;
+    outline: none;
+}
+
+.graphdialog textarea {
+	min-height: 150px;
+}
+
+.graphdialog button {
+    margin-top: 3px;
+    vertical-align: top;
+    background-color: #999;
+	border: 0;
+}
+
+.graphdialog button.rounded,
+.graphdialog input.rounded {
+    border-radius: 0 12px 12px 0;
+}
+
+.graphdialog .helper {
+    overflow: auto;
+    max-height: 200px;
+}
+
+.graphdialog .help-item {
+    padding-left: 10px;
+}
+
+.graphdialog .help-item:hover,
+.graphdialog .help-item.selected {
+    cursor: pointer;
+    background-color: white;
+    color: black;
+}
+
+.litegraph .dialog {
+    min-height: 0;
+}
+.litegraph .dialog .dialog-content {
+display: block;
+}
+.litegraph .dialog .dialog-content .subgraph_property {
+padding: 5px;
+}
+.litegraph .dialog .dialog-footer {
+margin: 0;
+}
+.litegraph .dialog .dialog-footer .subgraph_property {
+margin-top: 0;
+display: flex;
+align-items: center;
+padding: 5px;
+}
+.litegraph .dialog .dialog-footer .subgraph_property .name {
+flex: 1;
+}
+.litegraph .graphdialog {
+display: flex;
+align-items: center;
+border-radius: 20px;
+padding: 4px 10px;
+position: fixed;
+}
+.litegraph .graphdialog .name {
+padding: 0;
+min-height: 0;
+font-size: 16px;
+vertical-align: middle;
+}
+.litegraph .graphdialog .value {
+font-size: 16px;
+min-height: 0;
+margin: 0 10px;
+padding: 2px 5px;
+}
+.litegraph .graphdialog input[type="checkbox"] {
+width: 16px;
+height: 16px;
+}
+.litegraph .graphdialog button {
+padding: 4px 18px;
+border-radius: 20px;
+cursor: pointer;
+}
+  

src/lib/litegraph.extensions.js

@@ -0,0 +1,21 @@
+/**
+ * Changes the background color of the canvas.
+ *
+ * @method updateBackground
+ * @param {image} String
+ * @param {clearBackgroundColor} String
+ * @
+ */
+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
+}

src/scripts/app.ts

@@ -9,10 +9,8 @@ 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 { LGraphCanvas, LGraph, LGraphNode, LiteGraph } from "comfyui-litegraph";
-import "comfyui-litegraph/css/litegraph.css"
-
 
 export const ANIM_PREVIEW_WIDGET = "$$comfy_animation_preview"
 

src/scripts/domWidget.ts

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

src/scripts/pnginfo.ts

@@ -1,4 +1,3 @@
-import { LiteGraph } from "comfyui-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 "comfyui-litegraph";
+import type { IWidget, LGraphNode } from "/types/litegraph";
 
 interface InputDataOptions {
     display?: string;