mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
2072 lines
61 KiB
TypeScript
2072 lines
61 KiB
TypeScript
// @ts-strict-ignore
|
|
import { type ComfyWidgetConstructor, ComfyWidgets } from './widgets'
|
|
import { ComfyUI, $el } from './ui'
|
|
import { api, type ComfyApi } from './api'
|
|
import { defaultGraph } from './defaultGraph'
|
|
import {
|
|
getPngMetadata,
|
|
getWebpMetadata,
|
|
getFlacMetadata,
|
|
importA1111,
|
|
getLatentMetadata
|
|
} from './pnginfo'
|
|
import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
|
|
import {
|
|
type ComfyWorkflowJSON,
|
|
type NodeId,
|
|
validateComfyWorkflow
|
|
} from '@/types/comfyWorkflow'
|
|
import type { ComfyNodeDef } from '@/types/apiTypes'
|
|
import { adjustColor, ColorAdjustOptions } from '@/utils/colorUtil'
|
|
import { ComfyAppMenu } from './ui/menu/index'
|
|
import { getStorageValue } from './utils'
|
|
import { ComfyWorkflow } from '@/stores/workflowStore'
|
|
import {
|
|
LGraphCanvas,
|
|
LGraph,
|
|
LGraphNode,
|
|
LiteGraph,
|
|
LGraphEventMode
|
|
} from '@comfyorg/litegraph'
|
|
import { ExtensionManager } from '@/types/extensionTypes'
|
|
import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
|
|
import { Vector2 } from '@comfyorg/litegraph'
|
|
import _ from 'lodash'
|
|
import { useDialogService } from '@/services/dialogService'
|
|
import { useSettingStore } from '@/stores/settingStore'
|
|
import { useToastStore } from '@/stores/toastStore'
|
|
import { useModelStore } from '@/stores/modelStore'
|
|
import type { ToastMessageOptions } from 'primevue/toast'
|
|
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
|
import { useExecutionStore } from '@/stores/executionStore'
|
|
import { useExtensionStore } from '@/stores/extensionStore'
|
|
import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
|
|
import { useCommandStore } from '@/stores/commandStore'
|
|
import { shallowReactive } from 'vue'
|
|
import { useWorkflowService } from '@/services/workflowService'
|
|
import { useWidgetStore } from '@/stores/widgetStore'
|
|
import { deserialiseAndCreate } from '@/utils/vintageClipboard'
|
|
import { st } from '@/i18n'
|
|
import { useExtensionService } from '@/services/extensionService'
|
|
import { useLitegraphService } from '@/services/litegraphService'
|
|
|
|
export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
|
|
|
|
function sanitizeNodeName(string) {
|
|
let entityMap = {
|
|
'&': '',
|
|
'<': '',
|
|
'>': '',
|
|
'"': '',
|
|
"'": '',
|
|
'`': '',
|
|
'=': ''
|
|
}
|
|
return String(string).replace(/[&<>"'`=]/g, function fromEntityMap(s) {
|
|
return entityMap[s]
|
|
})
|
|
}
|
|
|
|
type Clipspace = {
|
|
widgets?: { type?: string; name?: string; value?: any }[] | null
|
|
imgs?: HTMLImageElement[] | null
|
|
original_imgs?: HTMLImageElement[] | null
|
|
images?: any[] | null
|
|
selectedIndex: number
|
|
img_paste_mode: string
|
|
}
|
|
|
|
/**
|
|
* @typedef {import("types/comfy").ComfyExtension} ComfyExtension
|
|
*/
|
|
|
|
export class ComfyApp {
|
|
/**
|
|
* List of entries to queue
|
|
* @type {{number: number, batchCount: number}[]}
|
|
*/
|
|
#queueItems = []
|
|
/**
|
|
* If the queue is currently being processed
|
|
* @type {boolean}
|
|
*/
|
|
#processingQueue = false
|
|
|
|
/**
|
|
* Content Clipboard
|
|
* @type {serialized node object}
|
|
*/
|
|
static clipspace: Clipspace | null = null
|
|
static clipspace_invalidate_handler: (() => void) | null = null
|
|
static open_maskeditor = null
|
|
static clipspace_return_node = null
|
|
|
|
vueAppReady: boolean
|
|
api: ComfyApi
|
|
ui: ComfyUI
|
|
extensionManager: ExtensionManager
|
|
_nodeOutputs: Record<string, any>
|
|
nodePreviewImages: Record<string, string[]>
|
|
graph: LGraph
|
|
canvas: LGraphCanvas
|
|
dragOverNode: LGraphNode | null
|
|
canvasEl: HTMLCanvasElement
|
|
// x, y, scale
|
|
zoom_drag_start: [number, number, number] | null
|
|
lastNodeErrors: any[] | null
|
|
/** @type {ExecutionErrorWsMessage} */
|
|
lastExecutionError: { node_id?: NodeId } | null
|
|
configuringGraph: boolean
|
|
ctx: CanvasRenderingContext2D
|
|
bodyTop: HTMLElement
|
|
bodyLeft: HTMLElement
|
|
bodyRight: HTMLElement
|
|
bodyBottom: HTMLElement
|
|
canvasContainer: HTMLElement
|
|
menu: ComfyAppMenu
|
|
bypassBgColor: string
|
|
// Set by Comfy.Clipspace extension
|
|
openClipspace: () => void = () => {}
|
|
|
|
/**
|
|
* @deprecated Use useExecutionStore().executingNodeId instead
|
|
*/
|
|
get runningNodeId(): string | null {
|
|
return useExecutionStore().executingNodeId
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use useWorkspaceStore().shiftDown instead
|
|
*/
|
|
get shiftDown(): boolean {
|
|
return useWorkspaceStore().shiftDown
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use useWidgetStore().widgets instead
|
|
*/
|
|
get widgets(): Record<string, ComfyWidgetConstructor> {
|
|
if (this.vueAppReady) {
|
|
return useWidgetStore().widgets
|
|
}
|
|
return ComfyWidgets
|
|
}
|
|
|
|
/**
|
|
* @deprecated storageLocation is always 'server' since
|
|
* https://github.com/comfyanonymous/ComfyUI/commit/53c8a99e6c00b5e20425100f6680cd9ea2652218
|
|
*/
|
|
get storageLocation() {
|
|
return 'server'
|
|
}
|
|
|
|
/**
|
|
* @deprecated storage migration is no longer needed.
|
|
*/
|
|
get isNewUserSession() {
|
|
return false
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use useExtensionStore().extensions instead
|
|
*/
|
|
get extensions(): ComfyExtension[] {
|
|
return useExtensionStore().extensions
|
|
}
|
|
|
|
/**
|
|
* The progress on the current executing node, if the node reports any.
|
|
* @deprecated Use useExecutionStore().executingNodeProgress instead
|
|
*/
|
|
get progress() {
|
|
return useExecutionStore()._executingNodeProgress
|
|
}
|
|
|
|
constructor() {
|
|
this.vueAppReady = false
|
|
this.ui = new ComfyUI(this)
|
|
this.api = api
|
|
this.bodyTop = $el('div.comfyui-body-top', { parent: document.body })
|
|
this.bodyLeft = $el('div.comfyui-body-left', { parent: document.body })
|
|
this.bodyRight = $el('div.comfyui-body-right', { parent: document.body })
|
|
this.bodyBottom = $el('div.comfyui-body-bottom', { parent: document.body })
|
|
this.canvasContainer = $el('div.graph-canvas-container', {
|
|
parent: document.body
|
|
})
|
|
this.menu = new ComfyAppMenu(this)
|
|
this.bypassBgColor = '#FF00FF'
|
|
|
|
/**
|
|
* Stores the execution output data for each node
|
|
* @type {Record<string, any>}
|
|
*/
|
|
this.nodeOutputs = {}
|
|
|
|
/**
|
|
* Stores the preview image data for each node
|
|
* @type {Record<string, Image>}
|
|
*/
|
|
this.nodePreviewImages = {}
|
|
}
|
|
|
|
get nodeOutputs() {
|
|
return this._nodeOutputs
|
|
}
|
|
|
|
set nodeOutputs(value) {
|
|
this._nodeOutputs = value
|
|
if (this.vueAppReady)
|
|
useExtensionService().invokeExtensions('onNodeOutputsUpdated', value)
|
|
}
|
|
|
|
getPreviewFormatParam() {
|
|
let preview_format = this.ui.settings.getSettingValue('Comfy.PreviewFormat')
|
|
if (preview_format) return `&preview=${preview_format}`
|
|
else return ''
|
|
}
|
|
|
|
getRandParam() {
|
|
return '&rand=' + Math.random()
|
|
}
|
|
|
|
static isImageNode(node) {
|
|
return (
|
|
node.imgs ||
|
|
(node &&
|
|
node.widgets &&
|
|
node.widgets.findIndex((obj) => obj.name === 'image') >= 0)
|
|
)
|
|
}
|
|
|
|
static onClipspaceEditorSave() {
|
|
if (ComfyApp.clipspace_return_node) {
|
|
ComfyApp.pasteFromClipspace(ComfyApp.clipspace_return_node)
|
|
}
|
|
}
|
|
|
|
static onClipspaceEditorClosed() {
|
|
ComfyApp.clipspace_return_node = null
|
|
}
|
|
|
|
static copyToClipspace(node) {
|
|
var widgets = null
|
|
if (node.widgets) {
|
|
widgets = node.widgets.map(({ type, name, value }) => ({
|
|
type,
|
|
name,
|
|
value
|
|
}))
|
|
}
|
|
|
|
var imgs = undefined
|
|
var orig_imgs = undefined
|
|
if (node.imgs != undefined) {
|
|
imgs = []
|
|
orig_imgs = []
|
|
|
|
for (let i = 0; i < node.imgs.length; i++) {
|
|
imgs[i] = new Image()
|
|
imgs[i].src = node.imgs[i].src
|
|
orig_imgs[i] = imgs[i]
|
|
}
|
|
}
|
|
|
|
var selectedIndex = 0
|
|
if (node.imageIndex) {
|
|
selectedIndex = node.imageIndex
|
|
}
|
|
|
|
ComfyApp.clipspace = {
|
|
widgets: widgets,
|
|
imgs: imgs,
|
|
original_imgs: orig_imgs,
|
|
images: node.images,
|
|
selectedIndex: selectedIndex,
|
|
img_paste_mode: 'selected' // reset to default im_paste_mode state on copy action
|
|
}
|
|
|
|
ComfyApp.clipspace_return_node = null
|
|
|
|
if (ComfyApp.clipspace_invalidate_handler) {
|
|
ComfyApp.clipspace_invalidate_handler()
|
|
}
|
|
}
|
|
|
|
static pasteFromClipspace(node) {
|
|
if (ComfyApp.clipspace) {
|
|
// image paste
|
|
if (ComfyApp.clipspace.imgs && node.imgs) {
|
|
if (node.images && ComfyApp.clipspace.images) {
|
|
if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
|
|
node.images = [
|
|
ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]
|
|
]
|
|
} else {
|
|
node.images = ComfyApp.clipspace.images
|
|
}
|
|
|
|
if (app.nodeOutputs[node.id + ''])
|
|
app.nodeOutputs[node.id + ''].images = node.images
|
|
}
|
|
|
|
if (ComfyApp.clipspace.imgs) {
|
|
// deep-copy to cut link with clipspace
|
|
if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
|
|
const img = new Image()
|
|
img.src =
|
|
ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src
|
|
node.imgs = [img]
|
|
node.imageIndex = 0
|
|
} else {
|
|
const imgs = []
|
|
for (let i = 0; i < ComfyApp.clipspace.imgs.length; i++) {
|
|
imgs[i] = new Image()
|
|
imgs[i].src = ComfyApp.clipspace.imgs[i].src
|
|
node.imgs = imgs
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (node.widgets) {
|
|
if (ComfyApp.clipspace.images) {
|
|
const clip_image =
|
|
ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]
|
|
const index = node.widgets.findIndex((obj) => obj.name === 'image')
|
|
if (index >= 0) {
|
|
if (
|
|
node.widgets[index].type != 'image' &&
|
|
typeof node.widgets[index].value == 'string' &&
|
|
clip_image.filename
|
|
) {
|
|
node.widgets[index].value =
|
|
(clip_image.subfolder ? clip_image.subfolder + '/' : '') +
|
|
clip_image.filename +
|
|
(clip_image.type ? ` [${clip_image.type}]` : '')
|
|
} else {
|
|
node.widgets[index].value = clip_image
|
|
}
|
|
}
|
|
}
|
|
if (ComfyApp.clipspace.widgets) {
|
|
ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
|
|
const prop = Object.values(node.widgets).find(
|
|
// @ts-expect-errorg
|
|
(obj) => obj.type === type && obj.name === name
|
|
)
|
|
// @ts-expect-error
|
|
if (prop && prop.type != 'button') {
|
|
if (
|
|
// @ts-expect-error
|
|
prop.type != 'image' &&
|
|
// @ts-expect-error
|
|
typeof prop.value == 'string' &&
|
|
value.filename
|
|
) {
|
|
// @ts-expect-error
|
|
prop.value =
|
|
(value.subfolder ? value.subfolder + '/' : '') +
|
|
value.filename +
|
|
(value.type ? ` [${value.type}]` : '')
|
|
} else {
|
|
// @ts-expect-error
|
|
prop.value = value
|
|
// @ts-expect-error
|
|
prop.callback(value)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
app.graph.setDirtyCanvas(true)
|
|
}
|
|
}
|
|
|
|
#addRestoreWorkflowView() {
|
|
const serialize = LGraph.prototype.serialize
|
|
const self = this
|
|
LGraph.prototype.serialize = function () {
|
|
const workflow = serialize.apply(this, arguments)
|
|
|
|
// Store the drag & scale info in the serialized workflow if the setting is enabled
|
|
if (useSettingStore().get('Comfy.EnableWorkflowViewRestore')) {
|
|
if (!workflow.extra) {
|
|
workflow.extra = {}
|
|
}
|
|
workflow.extra.ds = {
|
|
scale: self.canvas.ds.scale,
|
|
offset: self.canvas.ds.offset
|
|
}
|
|
} else if (workflow.extra?.ds) {
|
|
// Clear any old view data
|
|
delete workflow.extra.ds
|
|
}
|
|
|
|
return workflow
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Adds a handler allowing drag+drop of files onto the window to load workflows
|
|
*/
|
|
#addDropHandler() {
|
|
// Get prompt from dropped PNG or json
|
|
document.addEventListener('drop', async (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
const n = this.dragOverNode
|
|
this.dragOverNode = null
|
|
// Node handles file drop, we dont use the built in onDropFile handler as its buggy
|
|
// If you drag multiple files it will call it multiple times with the same file
|
|
// @ts-expect-error This is not a standard event. TODO fix it.
|
|
if (n && n.onDragDrop && (await n.onDragDrop(event))) {
|
|
return
|
|
}
|
|
// Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
|
|
if (
|
|
event.dataTransfer.files.length &&
|
|
event.dataTransfer.files[0].type !== 'image/bmp'
|
|
) {
|
|
await this.handleFile(event.dataTransfer.files[0])
|
|
} else {
|
|
// Try loading the first URI in the transfer list
|
|
const validTypes = ['text/uri-list', 'text/x-moz-url']
|
|
const match = [...event.dataTransfer.types].find((t) =>
|
|
validTypes.find((v) => t === v)
|
|
)
|
|
if (match) {
|
|
const uri = event.dataTransfer.getData(match)?.split('\n')?.[0]
|
|
if (uri) {
|
|
await this.handleFile(await (await fetch(uri)).blob())
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// Always clear over node on drag leave
|
|
this.canvasEl.addEventListener('dragleave', async () => {
|
|
if (this.dragOverNode) {
|
|
this.dragOverNode = null
|
|
this.graph.setDirtyCanvas(false, true)
|
|
}
|
|
})
|
|
|
|
// Add handler for dropping onto a specific node
|
|
this.canvasEl.addEventListener(
|
|
'dragover',
|
|
(e) => {
|
|
this.canvas.adjustMouseEvent(e)
|
|
const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY)
|
|
if (node) {
|
|
// @ts-expect-error This is not a standard event. TODO fix it.
|
|
if (node.onDragOver && node.onDragOver(e)) {
|
|
this.dragOverNode = node
|
|
|
|
// dragover event is fired very frequently, run this on an animation frame
|
|
requestAnimationFrame(() => {
|
|
this.graph.setDirtyCanvas(false, true)
|
|
})
|
|
return
|
|
}
|
|
}
|
|
this.dragOverNode = null
|
|
},
|
|
false
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
|
|
*/
|
|
#addPasteHandler() {
|
|
document.addEventListener('paste', async (e: ClipboardEvent) => {
|
|
// ctrl+shift+v is used to paste nodes with connections
|
|
// this is handled by litegraph
|
|
if (this.shiftDown) return
|
|
|
|
// @ts-expect-error: Property 'clipboardData' does not exist on type 'Window & typeof globalThis'.
|
|
// Did you mean 'Clipboard'?ts(2551)
|
|
// TODO: Not sure what the code wants to do.
|
|
let data = e.clipboardData || window.clipboardData
|
|
const items = data.items
|
|
|
|
// Look for image paste data
|
|
for (const item of items) {
|
|
if (item.type.startsWith('image/')) {
|
|
var imageNode = null
|
|
|
|
// If an image node is selected, paste into it
|
|
if (
|
|
this.canvas.current_node &&
|
|
this.canvas.current_node.is_selected &&
|
|
ComfyApp.isImageNode(this.canvas.current_node)
|
|
) {
|
|
imageNode = this.canvas.current_node
|
|
}
|
|
|
|
// No image node selected: add a new one
|
|
if (!imageNode) {
|
|
const newNode = LiteGraph.createNode('LoadImage')
|
|
// @ts-expect-error array to Float32Array
|
|
newNode.pos = [...this.canvas.graph_mouse]
|
|
imageNode = this.graph.add(newNode)
|
|
this.graph.change()
|
|
}
|
|
const blob = item.getAsFile()
|
|
imageNode.pasteFile(blob)
|
|
return
|
|
}
|
|
}
|
|
|
|
// No image found. Look for node data
|
|
data = data.getData('text/plain')
|
|
let workflow: ComfyWorkflowJSON | null = null
|
|
try {
|
|
data = data.slice(data.indexOf('{'))
|
|
workflow = JSON.parse(data)
|
|
} catch (err) {
|
|
try {
|
|
data = data.slice(data.indexOf('workflow\n'))
|
|
data = data.slice(data.indexOf('{'))
|
|
workflow = JSON.parse(data)
|
|
} catch (error) {
|
|
workflow = null
|
|
}
|
|
}
|
|
|
|
if (workflow && workflow.version && workflow.nodes && workflow.extra) {
|
|
await this.loadGraphData(workflow)
|
|
} else {
|
|
if (
|
|
(e.target instanceof HTMLTextAreaElement &&
|
|
e.target.type === 'textarea') ||
|
|
(e.target instanceof HTMLInputElement && e.target.type === 'text')
|
|
) {
|
|
return
|
|
}
|
|
|
|
// Litegraph default paste
|
|
this.canvas.pasteFromClipboard()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Adds a handler on copy that serializes selected nodes to JSON
|
|
*/
|
|
#addCopyHandler() {
|
|
document.addEventListener('copy', (e) => {
|
|
if (!(e.target instanceof Element)) {
|
|
return
|
|
}
|
|
if (
|
|
(e.target instanceof HTMLTextAreaElement &&
|
|
e.target.type === 'textarea') ||
|
|
(e.target instanceof HTMLInputElement && e.target.type === 'text')
|
|
) {
|
|
// Default system copy
|
|
return
|
|
}
|
|
const isTargetInGraph =
|
|
e.target.classList.contains('litegraph') ||
|
|
e.target.classList.contains('graph-canvas-container')
|
|
|
|
// copy nodes and clear clipboard
|
|
if (isTargetInGraph && this.canvas.selected_nodes) {
|
|
this.canvas.copyToClipboard()
|
|
e.clipboardData.setData('text', ' ') //clearData doesn't remove images from clipboard
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation()
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Handle mouse
|
|
*
|
|
* Move group by header
|
|
*/
|
|
#addProcessMouseHandler() {
|
|
const self = this
|
|
|
|
const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown
|
|
LGraphCanvas.prototype.processMouseDown = function (e) {
|
|
// prepare for ctrl+shift drag: zoom start
|
|
const useFastZoom = useSettingStore().get('Comfy.Graph.CtrlShiftZoom')
|
|
if (useFastZoom && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) {
|
|
self.zoom_drag_start = [e.x, e.y, this.ds.scale]
|
|
return
|
|
}
|
|
|
|
const res = origProcessMouseDown.apply(this, arguments)
|
|
return res
|
|
}
|
|
const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove
|
|
LGraphCanvas.prototype.processMouseMove = function (e) {
|
|
// handle ctrl+shift drag
|
|
if (e.ctrlKey && e.shiftKey && self.zoom_drag_start) {
|
|
// stop canvas zoom action
|
|
if (!e.buttons) {
|
|
self.zoom_drag_start = null
|
|
return
|
|
}
|
|
|
|
// calculate delta
|
|
let deltaY = e.y - self.zoom_drag_start[1]
|
|
let startScale = self.zoom_drag_start[2]
|
|
|
|
let scale = startScale - deltaY / 100
|
|
|
|
this.ds.changeScale(scale, [
|
|
self.zoom_drag_start[0],
|
|
self.zoom_drag_start[1]
|
|
])
|
|
this.graph.change()
|
|
|
|
return
|
|
}
|
|
|
|
return origProcessMouseMove.apply(this, arguments)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle keypress
|
|
*/
|
|
#addProcessKeyHandler() {
|
|
const origProcessKey = LGraphCanvas.prototype.processKey
|
|
LGraphCanvas.prototype.processKey = function (e: KeyboardEvent) {
|
|
if (!this.graph) {
|
|
return
|
|
}
|
|
|
|
var block_default = false
|
|
|
|
if (e.target instanceof Element && e.target.localName == 'input') {
|
|
return
|
|
}
|
|
|
|
if (e.type == 'keydown' && !e.repeat) {
|
|
const keyCombo = KeyComboImpl.fromEvent(e)
|
|
const keybindingStore = useKeybindingStore()
|
|
const keybinding = keybindingStore.getKeybinding(keyCombo)
|
|
if (keybinding && keybinding.targetSelector === '#graph-canvas') {
|
|
useCommandStore().execute(keybinding.commandId)
|
|
block_default = true
|
|
}
|
|
|
|
// Ctrl+C Copy
|
|
if (e.key === 'c' && (e.metaKey || e.ctrlKey)) {
|
|
// Trigger onCopy
|
|
return true
|
|
}
|
|
|
|
// Ctrl+V Paste
|
|
if (
|
|
(e.key === 'v' || e.key == 'V') &&
|
|
(e.metaKey || e.ctrlKey) &&
|
|
!e.shiftKey
|
|
) {
|
|
// Trigger onPaste
|
|
return true
|
|
}
|
|
}
|
|
|
|
this.graph.change()
|
|
|
|
if (block_default) {
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation()
|
|
return false
|
|
}
|
|
|
|
// Fall through to Litegraph defaults
|
|
return origProcessKey.apply(this, arguments)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws group header bar
|
|
*/
|
|
#addDrawGroupsHandler() {
|
|
const self = this
|
|
const origDrawGroups = LGraphCanvas.prototype.drawGroups
|
|
LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
|
|
if (!this.graph) {
|
|
return
|
|
}
|
|
|
|
var groups = this.graph.groups
|
|
|
|
ctx.save()
|
|
ctx.globalAlpha = 0.7 * this.editor_alpha
|
|
|
|
for (var i = 0; i < groups.length; ++i) {
|
|
var group = groups[i]
|
|
|
|
if (!LiteGraph.overlapBounding(this.visible_area, group._bounding)) {
|
|
continue
|
|
} //out of the visible area
|
|
|
|
ctx.fillStyle = group.color || '#335'
|
|
ctx.strokeStyle = group.color || '#335'
|
|
var pos = group._pos
|
|
var size = group._size
|
|
ctx.globalAlpha = 0.25 * this.editor_alpha
|
|
ctx.beginPath()
|
|
var font_size = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE
|
|
ctx.rect(pos[0] + 0.5, pos[1] + 0.5, size[0], font_size * 1.4)
|
|
ctx.fill()
|
|
ctx.globalAlpha = this.editor_alpha
|
|
}
|
|
|
|
ctx.restore()
|
|
|
|
const res = origDrawGroups.apply(this, arguments)
|
|
return res
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws node highlights (executing, drag drop) and progress bar
|
|
*/
|
|
#addDrawNodeHandler() {
|
|
const origDrawNodeShape = LGraphCanvas.prototype.drawNodeShape
|
|
const self = this
|
|
LGraphCanvas.prototype.drawNodeShape = function (
|
|
node,
|
|
ctx,
|
|
size,
|
|
fgcolor,
|
|
bgcolor,
|
|
selected
|
|
) {
|
|
const res = origDrawNodeShape.apply(this, arguments)
|
|
|
|
const nodeErrors = self.lastNodeErrors?.[node.id]
|
|
|
|
let color = null
|
|
let lineWidth = 1
|
|
if (node.id === +self.runningNodeId) {
|
|
color = '#0f0'
|
|
} else if (self.dragOverNode && node.id === self.dragOverNode.id) {
|
|
color = 'dodgerblue'
|
|
} else if (nodeErrors?.errors) {
|
|
color = 'red'
|
|
lineWidth = 2
|
|
} else if (
|
|
self.lastExecutionError &&
|
|
+self.lastExecutionError.node_id === node.id
|
|
) {
|
|
color = '#f0f'
|
|
lineWidth = 2
|
|
}
|
|
|
|
if (color) {
|
|
const shape =
|
|
node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE
|
|
ctx.lineWidth = lineWidth
|
|
ctx.globalAlpha = 0.8
|
|
ctx.beginPath()
|
|
if (shape == LiteGraph.BOX_SHAPE)
|
|
ctx.rect(
|
|
-6,
|
|
-6 - LiteGraph.NODE_TITLE_HEIGHT,
|
|
12 + size[0] + 1,
|
|
12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT
|
|
)
|
|
else if (
|
|
shape == LiteGraph.ROUND_SHAPE ||
|
|
(shape == LiteGraph.CARD_SHAPE && node.flags.collapsed)
|
|
)
|
|
ctx.roundRect(
|
|
-6,
|
|
-6 - LiteGraph.NODE_TITLE_HEIGHT,
|
|
12 + size[0] + 1,
|
|
12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
|
|
this.round_radius * 2
|
|
)
|
|
else if (shape == LiteGraph.CARD_SHAPE)
|
|
ctx.roundRect(
|
|
-6,
|
|
-6 - LiteGraph.NODE_TITLE_HEIGHT,
|
|
12 + size[0] + 1,
|
|
12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
|
|
[this.round_radius * 2, this.round_radius * 2, 2, 2]
|
|
)
|
|
else if (shape == LiteGraph.CIRCLE_SHAPE)
|
|
ctx.arc(
|
|
size[0] * 0.5,
|
|
size[1] * 0.5,
|
|
size[0] * 0.5 + 6,
|
|
0,
|
|
Math.PI * 2
|
|
)
|
|
ctx.strokeStyle = color
|
|
ctx.stroke()
|
|
ctx.strokeStyle = fgcolor
|
|
ctx.globalAlpha = 1
|
|
}
|
|
|
|
if (self.progress && node.id === +self.runningNodeId) {
|
|
ctx.fillStyle = 'green'
|
|
ctx.fillRect(
|
|
0,
|
|
0,
|
|
size[0] * (self.progress.value / self.progress.max),
|
|
6
|
|
)
|
|
ctx.fillStyle = bgcolor
|
|
}
|
|
|
|
// Highlight inputs that failed validation
|
|
if (nodeErrors) {
|
|
ctx.lineWidth = 2
|
|
ctx.strokeStyle = 'red'
|
|
for (const error of nodeErrors.errors) {
|
|
if (error.extra_info && error.extra_info.input_name) {
|
|
const inputIndex = node.findInputSlot(error.extra_info.input_name)
|
|
if (inputIndex !== -1) {
|
|
let pos = node.getConnectionPos(true, inputIndex)
|
|
ctx.beginPath()
|
|
ctx.arc(
|
|
pos[0] - node.pos[0],
|
|
pos[1] - node.pos[1],
|
|
12,
|
|
0,
|
|
2 * Math.PI,
|
|
false
|
|
)
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return res
|
|
}
|
|
|
|
const origDrawNode = LGraphCanvas.prototype.drawNode
|
|
LGraphCanvas.prototype.drawNode = function (node, ctx) {
|
|
const editor_alpha = this.editor_alpha
|
|
const old_color = node.color
|
|
const old_bgcolor = node.bgcolor
|
|
|
|
if (node.mode === LGraphEventMode.NEVER) {
|
|
this.editor_alpha = 0.4
|
|
}
|
|
|
|
let bgColor: string
|
|
if (node.mode === LGraphEventMode.BYPASS) {
|
|
bgColor = app.bypassBgColor
|
|
this.editor_alpha = 0.2
|
|
} else {
|
|
bgColor = old_bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
|
|
}
|
|
|
|
const adjustments: ColorAdjustOptions = {}
|
|
|
|
const opacity = useSettingStore().get('Comfy.Node.Opacity')
|
|
if (opacity) adjustments.opacity = opacity
|
|
|
|
if (useSettingStore().get('Comfy.ColorPalette') === 'light') {
|
|
adjustments.lightness = 0.5
|
|
|
|
// Lighten title bar of colored nodes on light theme
|
|
if (old_color) {
|
|
node.color = adjustColor(old_color, { lightness: 0.5 })
|
|
}
|
|
}
|
|
|
|
node.bgcolor = adjustColor(bgColor, adjustments)
|
|
|
|
const res = origDrawNode.apply(this, arguments)
|
|
|
|
this.editor_alpha = editor_alpha
|
|
node.color = old_color
|
|
node.bgcolor = old_bgcolor
|
|
|
|
return res
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handles updates from the API socket
|
|
*/
|
|
#addApiUpdateHandlers() {
|
|
api.addEventListener('status', ({ detail }) => {
|
|
this.ui.setStatus(detail)
|
|
})
|
|
|
|
api.addEventListener('progress', ({ detail }) => {
|
|
this.graph.setDirtyCanvas(true, false)
|
|
})
|
|
|
|
api.addEventListener('executing', ({ detail }) => {
|
|
this.graph.setDirtyCanvas(true, false)
|
|
this.revokePreviews(this.runningNodeId)
|
|
delete this.nodePreviewImages[this.runningNodeId]
|
|
})
|
|
|
|
api.addEventListener('executed', ({ detail }) => {
|
|
const output = this.nodeOutputs[detail.display_node || detail.node]
|
|
if (detail.merge && output) {
|
|
for (const k in detail.output ?? {}) {
|
|
const v = output[k]
|
|
if (v instanceof Array) {
|
|
output[k] = v.concat(detail.output[k])
|
|
} else {
|
|
output[k] = detail.output[k]
|
|
}
|
|
}
|
|
} else {
|
|
this.nodeOutputs[detail.display_node || detail.node] = detail.output
|
|
}
|
|
const node = this.graph.getNodeById(detail.display_node || detail.node)
|
|
if (node) {
|
|
if (node.onExecuted) node.onExecuted(detail.output)
|
|
}
|
|
})
|
|
|
|
api.addEventListener('execution_start', ({ detail }) => {
|
|
this.lastExecutionError = null
|
|
this.graph.nodes.forEach((node) => {
|
|
if (node.onExecutionStart) node.onExecutionStart()
|
|
})
|
|
})
|
|
|
|
api.addEventListener('execution_error', ({ detail }) => {
|
|
this.lastExecutionError = detail
|
|
useDialogService().showExecutionErrorDialog(detail)
|
|
this.canvas.draw(true, true)
|
|
})
|
|
|
|
api.addEventListener('b_preview', ({ detail }) => {
|
|
const id = this.runningNodeId
|
|
if (id == null) return
|
|
|
|
const blob = detail
|
|
const blobUrl = URL.createObjectURL(blob)
|
|
// Ensure clean up if `executing` event is missed.
|
|
this.revokePreviews(id)
|
|
this.nodePreviewImages[id] = [blobUrl]
|
|
})
|
|
|
|
api.init()
|
|
}
|
|
|
|
#addConfigureHandler() {
|
|
const app = this
|
|
const configure = LGraph.prototype.configure
|
|
// Flag that the graph is configuring to prevent nodes from running checks while its still loading
|
|
LGraph.prototype.configure = function () {
|
|
app.configuringGraph = true
|
|
try {
|
|
return configure.apply(this, arguments)
|
|
} finally {
|
|
app.configuringGraph = false
|
|
}
|
|
}
|
|
}
|
|
|
|
#addAfterConfigureHandler() {
|
|
const app = this
|
|
const onConfigure = app.graph.onConfigure
|
|
app.graph.onConfigure = function () {
|
|
// Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
|
|
for (const node of app.graph.nodes) {
|
|
node.onGraphConfigured?.()
|
|
}
|
|
|
|
const r = onConfigure?.apply(this, arguments)
|
|
|
|
// Fire after onConfigure, used by primitives to generate widget using input nodes config
|
|
for (const node of app.graph.nodes) {
|
|
node.onAfterGraphConfigured?.()
|
|
}
|
|
|
|
return r
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set up the app on the page
|
|
*/
|
|
async setup(canvasEl: HTMLCanvasElement) {
|
|
this.canvasEl = canvasEl
|
|
this.resizeCanvas()
|
|
|
|
await useWorkspaceStore().workflow.syncWorkflows()
|
|
await useExtensionService().loadExtensions()
|
|
|
|
this.#addProcessMouseHandler()
|
|
this.#addProcessKeyHandler()
|
|
this.#addConfigureHandler()
|
|
this.#addApiUpdateHandlers()
|
|
this.#addRestoreWorkflowView()
|
|
|
|
this.graph = new LGraph()
|
|
|
|
this.#addAfterConfigureHandler()
|
|
|
|
// Make LGraphCanvas.state shallow reactive so that any change on the root
|
|
// object triggers reactivity.
|
|
this.canvas = new LGraphCanvas(canvasEl, this.graph)
|
|
this.canvas.state = shallowReactive(this.canvas.state)
|
|
|
|
this.ctx = canvasEl.getContext('2d')
|
|
|
|
LiteGraph.alt_drag_do_clone_nodes = true
|
|
|
|
this.graph.start()
|
|
|
|
// Ensure the canvas fills the window
|
|
this.resizeCanvas()
|
|
window.addEventListener('resize', () => this.resizeCanvas())
|
|
const ro = new ResizeObserver(() => this.resizeCanvas())
|
|
ro.observe(this.bodyTop)
|
|
ro.observe(this.bodyLeft)
|
|
ro.observe(this.bodyRight)
|
|
ro.observe(this.bodyBottom)
|
|
|
|
await useExtensionService().invokeExtensionsAsync('init')
|
|
await this.registerNodes()
|
|
|
|
// Load previous workflow
|
|
let restored = false
|
|
try {
|
|
const loadWorkflow = async (json) => {
|
|
if (json) {
|
|
const workflow = JSON.parse(json)
|
|
const workflowName = getStorageValue('Comfy.PreviousWorkflow')
|
|
await this.loadGraphData(workflow, true, true, workflowName)
|
|
return true
|
|
}
|
|
}
|
|
const clientId = api.initialClientId ?? api.clientId
|
|
restored =
|
|
(clientId &&
|
|
(await loadWorkflow(
|
|
sessionStorage.getItem(`workflow:${clientId}`)
|
|
))) ||
|
|
(await loadWorkflow(localStorage.getItem('workflow')))
|
|
} catch (err) {
|
|
console.error('Error loading previous workflow', err)
|
|
}
|
|
|
|
// We failed to restore a workflow so load the default
|
|
if (!restored) {
|
|
await this.loadGraphData()
|
|
}
|
|
|
|
this.#addDrawNodeHandler()
|
|
this.#addDrawGroupsHandler()
|
|
this.#addDropHandler()
|
|
this.#addCopyHandler()
|
|
this.#addPasteHandler()
|
|
|
|
await useExtensionService().invokeExtensionsAsync('setup')
|
|
}
|
|
|
|
resizeCanvas() {
|
|
// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
|
|
const scale = Math.max(window.devicePixelRatio, 1)
|
|
|
|
// Clear fixed width and height while calculating rect so it uses 100% instead
|
|
this.canvasEl.height = this.canvasEl.width = NaN
|
|
const { width, height } = this.canvasEl.getBoundingClientRect()
|
|
this.canvasEl.width = Math.round(width * scale)
|
|
this.canvasEl.height = Math.round(height * scale)
|
|
this.canvasEl.getContext('2d').scale(scale, scale)
|
|
this.canvas?.draw(true, true)
|
|
}
|
|
|
|
private updateVueAppNodeDefs(defs: Record<string, ComfyNodeDef>) {
|
|
// Frontend only nodes registered by custom nodes.
|
|
// Example: https://github.com/rgthree/rgthree-comfy/blob/dd534e5384be8cf0c0fa35865afe2126ba75ac55/src_web/comfyui/fast_groups_bypasser.ts#L10
|
|
const rawDefs = Object.fromEntries(
|
|
Object.entries(LiteGraph.registered_node_types).map(([name, node]) => [
|
|
name,
|
|
{
|
|
name,
|
|
display_name: name,
|
|
category: node.category || '__frontend_only__',
|
|
input: { required: {}, optional: {} },
|
|
output: [],
|
|
output_name: [],
|
|
output_is_list: [],
|
|
python_module: 'custom_nodes.frontend_only',
|
|
description: `Frontend only node for ${name}`
|
|
}
|
|
])
|
|
)
|
|
|
|
const allNodeDefs = {
|
|
...rawDefs,
|
|
...defs,
|
|
...SYSTEM_NODE_DEFS
|
|
}
|
|
|
|
const nodeDefStore = useNodeDefStore()
|
|
const nodeDefArray: ComfyNodeDef[] = Object.values(allNodeDefs)
|
|
useExtensionService().invokeExtensions(
|
|
'beforeRegisterVueAppNodeDefs',
|
|
nodeDefArray,
|
|
this
|
|
)
|
|
nodeDefStore.updateNodeDefs(nodeDefArray)
|
|
}
|
|
|
|
#translateNodeDefs(defs: Record<string, ComfyNodeDef>) {
|
|
return Object.fromEntries(
|
|
Object.entries(defs).map(([name, def]) => [
|
|
name,
|
|
{
|
|
...def,
|
|
display_name: st(
|
|
`nodeDefs.${name}.display_name`,
|
|
def.display_name ?? def.name
|
|
),
|
|
description: def.description
|
|
? st(`nodeDefs.${name}.description`, def.description)
|
|
: undefined,
|
|
category: def.category
|
|
.split('/')
|
|
.map((category) => st(`nodeCategories.${category}`, category))
|
|
.join('/')
|
|
}
|
|
])
|
|
)
|
|
}
|
|
|
|
async #getNodeDefs() {
|
|
return this.#translateNodeDefs(
|
|
await api.getNodeDefs({
|
|
validate: useSettingStore().get('Comfy.Validation.NodeDefs')
|
|
})
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Registers nodes with the graph
|
|
*/
|
|
async registerNodes() {
|
|
// Load node definitions from the backend
|
|
const defs = await this.#getNodeDefs()
|
|
await this.registerNodesFromDefs(defs)
|
|
await useExtensionService().invokeExtensionsAsync('registerCustomNodes')
|
|
if (this.vueAppReady) {
|
|
this.updateVueAppNodeDefs(defs)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove the impl after groupNode jest tests are removed.
|
|
* @deprecated Use useWidgetStore().getWidgetType instead
|
|
*/
|
|
getWidgetType(inputData, inputName: string) {
|
|
const type = inputData[0]
|
|
|
|
if (Array.isArray(type)) {
|
|
return 'COMBO'
|
|
} else if (`${type}:${inputName}` in this.widgets) {
|
|
return `${type}:${inputName}`
|
|
} else if (type in this.widgets) {
|
|
return type
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
async registerNodeDef(nodeId: string, nodeData: ComfyNodeDef) {
|
|
return await useLitegraphService().registerNodeDef(nodeId, nodeData)
|
|
}
|
|
|
|
async registerNodesFromDefs(defs: Record<string, ComfyNodeDef>) {
|
|
await useExtensionService().invokeExtensionsAsync('addCustomNodeDefs', defs)
|
|
|
|
// Register a node for each definition
|
|
for (const nodeId in defs) {
|
|
this.registerNodeDef(nodeId, defs[nodeId])
|
|
}
|
|
}
|
|
|
|
loadTemplateData(templateData) {
|
|
if (!templateData?.templates) {
|
|
return
|
|
}
|
|
|
|
const old = localStorage.getItem('litegrapheditor_clipboard')
|
|
|
|
var maxY, nodeBottom, node
|
|
|
|
for (const template of templateData.templates) {
|
|
if (!template?.data) {
|
|
continue
|
|
}
|
|
|
|
// Check for old clipboard format
|
|
const data = JSON.parse(template.data)
|
|
if (!data.reroutes) {
|
|
deserialiseAndCreate(template.data, app.canvas)
|
|
} else {
|
|
localStorage.setItem('litegrapheditor_clipboard', template.data)
|
|
app.canvas.pasteFromClipboard()
|
|
}
|
|
|
|
// Move mouse position down to paste the next template below
|
|
|
|
maxY = false
|
|
|
|
for (const i in app.canvas.selected_nodes) {
|
|
node = app.canvas.selected_nodes[i]
|
|
|
|
nodeBottom = node.pos[1] + node.size[1]
|
|
|
|
if (maxY === false || nodeBottom > maxY) {
|
|
maxY = nodeBottom
|
|
}
|
|
}
|
|
|
|
app.canvas.graph_mouse[1] = maxY + 50
|
|
}
|
|
|
|
localStorage.setItem('litegrapheditor_clipboard', old)
|
|
}
|
|
|
|
#showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
|
|
if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
|
|
useDialogService().showLoadWorkflowWarning({ missingNodeTypes })
|
|
}
|
|
}
|
|
|
|
#showMissingModelsError(missingModels, paths) {
|
|
if (useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')) {
|
|
useDialogService().showMissingModelsWarning({
|
|
missingModels,
|
|
paths
|
|
})
|
|
}
|
|
}
|
|
|
|
async loadGraphData(
|
|
graphData?: ComfyWorkflowJSON,
|
|
clean: boolean = true,
|
|
restore_view: boolean = true,
|
|
workflow: string | null | ComfyWorkflow = null,
|
|
{ showMissingNodesDialog = true, showMissingModelsDialog = true } = {}
|
|
) {
|
|
if (clean !== false) {
|
|
this.clean()
|
|
}
|
|
|
|
let reset_invalid_values = false
|
|
if (!graphData) {
|
|
graphData = defaultGraph
|
|
reset_invalid_values = true
|
|
}
|
|
|
|
if (typeof structuredClone === 'undefined') {
|
|
graphData = JSON.parse(JSON.stringify(graphData))
|
|
} else {
|
|
graphData = structuredClone(graphData)
|
|
}
|
|
|
|
if (useSettingStore().get('Comfy.Validation.Workflows')) {
|
|
// TODO: Show validation error in a dialog.
|
|
const validatedGraphData = await validateComfyWorkflow(
|
|
graphData,
|
|
/* onError=*/ (err) => {
|
|
useToastStore().addAlert(err)
|
|
}
|
|
)
|
|
// If the validation failed, use the original graph data.
|
|
// Ideally we should not block users from loading the workflow.
|
|
graphData = validatedGraphData ?? graphData
|
|
}
|
|
|
|
useWorkflowService().beforeLoadNewGraph()
|
|
|
|
const missingNodeTypes: MissingNodeType[] = []
|
|
const missingModels = []
|
|
await useExtensionService().invokeExtensionsAsync(
|
|
'beforeConfigureGraph',
|
|
graphData,
|
|
missingNodeTypes
|
|
// TODO: missingModels
|
|
)
|
|
for (let n of graphData.nodes) {
|
|
// Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
|
|
if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
|
|
if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
|
|
if (n.type == 'SDV_img2vid_Conditioning')
|
|
n.type = 'SVD_img2vid_Conditioning' //typo fix
|
|
|
|
// Find missing node types
|
|
if (!(n.type in LiteGraph.registered_node_types)) {
|
|
missingNodeTypes.push(n.type)
|
|
n.type = sanitizeNodeName(n.type)
|
|
}
|
|
}
|
|
if (
|
|
graphData.models &&
|
|
useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')
|
|
) {
|
|
for (const m of graphData.models) {
|
|
const models_available = await useModelStore().getLoadedModelFolder(
|
|
m.directory
|
|
)
|
|
if (models_available === null) {
|
|
// @ts-expect-error
|
|
m.directory_invalid = true
|
|
missingModels.push(m)
|
|
} else if (!(m.name in models_available.models)) {
|
|
missingModels.push(m)
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
// @ts-expect-error Discrepancies between zod and litegraph - in progress
|
|
this.graph.configure(graphData)
|
|
if (
|
|
restore_view &&
|
|
useSettingStore().get('Comfy.EnableWorkflowViewRestore') &&
|
|
graphData.extra?.ds
|
|
) {
|
|
// @ts-expect-error
|
|
// Need to set strict: true for zod to match the type [number, number]
|
|
// https://github.com/colinhacks/zod/issues/3056
|
|
this.canvas.ds.offset = graphData.extra.ds.offset
|
|
this.canvas.ds.scale = graphData.extra.ds.scale
|
|
}
|
|
} catch (error) {
|
|
let errorHint = []
|
|
// Try extracting filename to see if it was caused by an extension script
|
|
const filename =
|
|
error.fileName ||
|
|
(error.stack || '').match(/(\/extensions\/.*\.js)/)?.[1]
|
|
const pos = (filename || '').indexOf('/extensions/')
|
|
if (pos > -1) {
|
|
errorHint.push(
|
|
$el('span', {
|
|
textContent: 'This may be due to the following script:'
|
|
}),
|
|
$el('br'),
|
|
$el('span', {
|
|
style: {
|
|
fontWeight: 'bold'
|
|
},
|
|
textContent: filename.substring(pos)
|
|
})
|
|
)
|
|
}
|
|
|
|
// Show dialog to let the user know something went wrong loading the data
|
|
this.ui.dialog.show(
|
|
$el('div', [
|
|
$el('p', {
|
|
textContent: 'Loading aborted due to error reloading workflow data'
|
|
}),
|
|
$el('pre', {
|
|
style: { padding: '5px', backgroundColor: 'rgba(255,0,0,0.2)' },
|
|
textContent: error.toString()
|
|
}),
|
|
$el('pre', {
|
|
style: {
|
|
padding: '5px',
|
|
color: '#ccc',
|
|
fontSize: '10px',
|
|
maxHeight: '50vh',
|
|
overflow: 'auto',
|
|
backgroundColor: 'rgba(0,0,0,0.2)'
|
|
},
|
|
textContent: error.stack || 'No stacktrace available'
|
|
}),
|
|
...errorHint
|
|
]).outerHTML
|
|
)
|
|
|
|
return
|
|
}
|
|
for (const node of this.graph.nodes) {
|
|
const size = node.computeSize()
|
|
size[0] = Math.max(node.size[0], size[0])
|
|
size[1] = Math.max(node.size[1], size[1])
|
|
node.size = size
|
|
if (node.widgets) {
|
|
// If you break something in the backend and want to patch workflows in the frontend
|
|
// This is the place to do this
|
|
for (let widget of node.widgets) {
|
|
if (node.type == 'KSampler' || node.type == 'KSamplerAdvanced') {
|
|
if (widget.name == 'sampler_name') {
|
|
if (
|
|
typeof widget.value === 'string' &&
|
|
widget.value.startsWith('sample_')
|
|
) {
|
|
widget.value = widget.value.slice(7)
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
node.type == 'KSampler' ||
|
|
node.type == 'KSamplerAdvanced' ||
|
|
node.type == 'PrimitiveNode'
|
|
) {
|
|
if (widget.name == 'control_after_generate') {
|
|
if (widget.value === true) {
|
|
// @ts-expect-error change widget type from boolean to string
|
|
widget.value = 'randomize'
|
|
} else if (widget.value === false) {
|
|
// @ts-expect-error change widget type from boolean to string
|
|
widget.value = 'fixed'
|
|
}
|
|
}
|
|
}
|
|
if (reset_invalid_values) {
|
|
if (widget.type == 'combo') {
|
|
if (
|
|
!widget.options.values.includes(widget.value as string) &&
|
|
widget.options.values.length > 0
|
|
) {
|
|
widget.value = widget.options.values[0]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
useExtensionService().invokeExtensions('loadedGraphNode', node)
|
|
}
|
|
|
|
// TODO: Properly handle if both nodes and models are missing (sequential dialogs?)
|
|
if (missingNodeTypes.length && showMissingNodesDialog) {
|
|
this.#showMissingNodesError(missingNodeTypes)
|
|
}
|
|
if (missingModels.length && showMissingModelsDialog) {
|
|
const paths = await api.getFolderPaths()
|
|
this.#showMissingModelsError(missingModels, paths)
|
|
}
|
|
await useExtensionService().invokeExtensionsAsync(
|
|
'afterConfigureGraph',
|
|
missingNodeTypes
|
|
)
|
|
await useWorkflowService().afterLoadNewGraph(
|
|
workflow,
|
|
// @ts-expect-error zod types issue. Will be fixed after we enable ts-strict
|
|
this.graph.serialize()
|
|
)
|
|
requestAnimationFrame(() => {
|
|
this.graph.setDirtyCanvas(true, true)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Serializes a graph using preferred user settings.
|
|
* @param graph The litegraph to serialize.
|
|
* @returns A serialized graph (aka workflow) with preferred user settings.
|
|
*/
|
|
serializeGraph(graph: LGraph = this.graph) {
|
|
const sortNodes = useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
|
|
return graph.serialize({ sortNodes })
|
|
}
|
|
|
|
/**
|
|
* Converts the current graph workflow for sending to the API.
|
|
* Note: Node widgets are updated before serialization to prepare queueing.
|
|
* @returns The workflow and node links
|
|
*/
|
|
async graphToPrompt(graph = this.graph, clean = true) {
|
|
for (const outerNode of this.graph.computeExecutionOrder(false)) {
|
|
if (outerNode.widgets) {
|
|
for (const widget of outerNode.widgets) {
|
|
// Allow widgets to run callbacks before a prompt has been queued
|
|
// e.g. random seed before every gen
|
|
widget.beforeQueued?.()
|
|
}
|
|
}
|
|
|
|
const innerNodes = outerNode.getInnerNodes
|
|
? outerNode.getInnerNodes()
|
|
: [outerNode]
|
|
for (const node of innerNodes) {
|
|
if (node.isVirtualNode) {
|
|
// Don't serialize frontend only nodes but let them make changes
|
|
if (node.applyToGraph) {
|
|
node.applyToGraph()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const workflow = this.serializeGraph(graph)
|
|
|
|
// Remove localized_name from the workflow
|
|
for (const node of workflow.nodes) {
|
|
for (const slot of node.inputs) {
|
|
delete slot.localized_name
|
|
}
|
|
for (const slot of node.outputs) {
|
|
delete slot.localized_name
|
|
}
|
|
}
|
|
|
|
const output = {}
|
|
// Process nodes in order of execution
|
|
for (const outerNode of graph.computeExecutionOrder(false)) {
|
|
const skipNode =
|
|
outerNode.mode === LGraphEventMode.NEVER ||
|
|
outerNode.mode === LGraphEventMode.BYPASS
|
|
const innerNodes =
|
|
!skipNode && outerNode.getInnerNodes
|
|
? outerNode.getInnerNodes()
|
|
: [outerNode]
|
|
for (const node of innerNodes) {
|
|
if (node.isVirtualNode) {
|
|
continue
|
|
}
|
|
|
|
if (
|
|
node.mode === LGraphEventMode.NEVER ||
|
|
node.mode === LGraphEventMode.BYPASS
|
|
) {
|
|
// Don't serialize muted nodes
|
|
continue
|
|
}
|
|
|
|
const inputs = {}
|
|
const widgets = node.widgets
|
|
|
|
// Store all widget values
|
|
if (widgets) {
|
|
for (const i in widgets) {
|
|
const widget = widgets[i]
|
|
if (!widget.options || widget.options.serialize !== false) {
|
|
inputs[widget.name] = widget.serializeValue
|
|
? await widget.serializeValue(node, i)
|
|
: widget.value
|
|
}
|
|
}
|
|
}
|
|
|
|
// Store all node links
|
|
for (let i in node.inputs) {
|
|
let parent = node.getInputNode(i)
|
|
if (parent) {
|
|
let link = node.getInputLink(i)
|
|
while (
|
|
parent.mode === LGraphEventMode.BYPASS ||
|
|
parent.isVirtualNode
|
|
) {
|
|
let found = false
|
|
if (parent.isVirtualNode) {
|
|
link = parent.getInputLink(link.origin_slot)
|
|
if (link) {
|
|
parent = parent.getInputNode(link.target_slot)
|
|
if (parent) {
|
|
found = true
|
|
}
|
|
}
|
|
} else if (link && parent.mode === LGraphEventMode.BYPASS) {
|
|
let all_inputs = [link.origin_slot]
|
|
if (parent.inputs) {
|
|
all_inputs = all_inputs.concat(Object.keys(parent.inputs))
|
|
for (let parent_input in all_inputs) {
|
|
parent_input = all_inputs[parent_input]
|
|
if (
|
|
parent.inputs[parent_input]?.type === node.inputs[i].type
|
|
) {
|
|
link = parent.getInputLink(parent_input)
|
|
if (link) {
|
|
parent = parent.getInputNode(parent_input)
|
|
}
|
|
found = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
break
|
|
}
|
|
}
|
|
|
|
if (link) {
|
|
if (parent?.updateLink) {
|
|
link = parent.updateLink(link)
|
|
}
|
|
if (link) {
|
|
inputs[node.inputs[i].name] = [
|
|
String(link.origin_id),
|
|
parseInt(link.origin_slot)
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const node_data = {
|
|
inputs,
|
|
class_type: node.comfyClass
|
|
}
|
|
|
|
// Ignored by the backend.
|
|
node_data['_meta'] = {
|
|
title: node.title
|
|
}
|
|
|
|
output[String(node.id)] = node_data
|
|
}
|
|
}
|
|
|
|
// Remove inputs connected to removed nodes
|
|
if (clean) {
|
|
for (const o in output) {
|
|
for (const i in output[o].inputs) {
|
|
if (
|
|
Array.isArray(output[o].inputs[i]) &&
|
|
output[o].inputs[i].length === 2 &&
|
|
!output[output[o].inputs[i][0]]
|
|
) {
|
|
delete output[o].inputs[i]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return { workflow, output }
|
|
}
|
|
|
|
#formatPromptError(error) {
|
|
if (error == null) {
|
|
return '(unknown error)'
|
|
} else if (typeof error === 'string') {
|
|
return error
|
|
} else if (error.stack && error.message) {
|
|
return error.toString()
|
|
} else if (error.response) {
|
|
let message = error.response.error.message
|
|
if (error.response.error.details)
|
|
message += ': ' + error.response.error.details
|
|
for (const [nodeID, nodeError] of Object.entries(
|
|
error.response.node_errors
|
|
)) {
|
|
// @ts-expect-error
|
|
message += '\n' + nodeError.class_type + ':'
|
|
// @ts-expect-error
|
|
for (const errorReason of nodeError.errors) {
|
|
message +=
|
|
'\n - ' + errorReason.message + ': ' + errorReason.details
|
|
}
|
|
}
|
|
return message
|
|
}
|
|
return '(unknown error)'
|
|
}
|
|
|
|
async queuePrompt(number, batchCount = 1) {
|
|
this.#queueItems.push({ number, batchCount })
|
|
|
|
// Only have one action process the items so each one gets a unique seed correctly
|
|
if (this.#processingQueue) {
|
|
return
|
|
}
|
|
|
|
this.#processingQueue = true
|
|
this.lastNodeErrors = null
|
|
|
|
try {
|
|
while (this.#queueItems.length) {
|
|
;({ number, batchCount } = this.#queueItems.pop())
|
|
|
|
for (let i = 0; i < batchCount; i++) {
|
|
const p = await this.graphToPrompt()
|
|
|
|
try {
|
|
// @ts-expect-error Discrepancies between zod and litegraph - in progress
|
|
const res = await api.queuePrompt(number, p)
|
|
this.lastNodeErrors = res.node_errors
|
|
if (this.lastNodeErrors.length > 0) {
|
|
this.canvas.draw(true, true)
|
|
} else {
|
|
try {
|
|
useExecutionStore().storePrompt({
|
|
id: res.prompt_id,
|
|
nodes: Object.keys(p.output),
|
|
workflow: useWorkspaceStore().workflow
|
|
.activeWorkflow as ComfyWorkflow
|
|
})
|
|
} catch (error) {}
|
|
}
|
|
} catch (error) {
|
|
const formattedError = this.#formatPromptError(error)
|
|
this.ui.dialog.show(formattedError)
|
|
if (error.response) {
|
|
this.lastNodeErrors = error.response.node_errors
|
|
this.canvas.draw(true, true)
|
|
}
|
|
break
|
|
}
|
|
|
|
for (const n of p.workflow.nodes) {
|
|
const node = this.graph.getNodeById(n.id)
|
|
if (node.widgets) {
|
|
for (const widget of node.widgets) {
|
|
// Allow widgets to run callbacks after a prompt has been queued
|
|
// e.g. random seed after every gen
|
|
// @ts-expect-error
|
|
if (widget.afterQueued) {
|
|
// @ts-expect-error
|
|
widget.afterQueued()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.canvas.draw(true, true)
|
|
await this.ui.queue.update()
|
|
}
|
|
}
|
|
} finally {
|
|
this.#processingQueue = false
|
|
}
|
|
api.dispatchCustomEvent('promptQueued', { number, batchCount })
|
|
return !this.lastNodeErrors
|
|
}
|
|
|
|
showErrorOnFileLoad(file) {
|
|
this.ui.dialog.show(
|
|
$el('div', [
|
|
$el('p', { textContent: `Unable to find workflow in ${file.name}` })
|
|
]).outerHTML
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Loads workflow data from the specified file
|
|
* @param {File} file
|
|
*/
|
|
async handleFile(file) {
|
|
const removeExt = (f) => {
|
|
if (!f) return f
|
|
const p = f.lastIndexOf('.')
|
|
if (p === -1) return f
|
|
return f.substring(0, p)
|
|
}
|
|
const fileName = removeExt(file.name)
|
|
if (file.type === 'image/png') {
|
|
const pngInfo = await getPngMetadata(file)
|
|
if (pngInfo?.workflow) {
|
|
await this.loadGraphData(
|
|
JSON.parse(pngInfo.workflow),
|
|
true,
|
|
true,
|
|
fileName
|
|
)
|
|
} else if (pngInfo?.prompt) {
|
|
this.loadApiJson(JSON.parse(pngInfo.prompt), fileName)
|
|
} else if (pngInfo?.parameters) {
|
|
// Note: Not putting this in `importA1111` as it is mostly not used
|
|
// by external callers, and `importA1111` has no access to `app`.
|
|
useWorkflowService().beforeLoadNewGraph()
|
|
importA1111(this.graph, pngInfo.parameters)
|
|
// @ts-expect-error zod type issue on ComfyWorkflowJSON. Should be resolved after enabling ts-strict globally.
|
|
useWorkflowService().afterLoadNewGraph(fileName, this.serializeGraph())
|
|
} else {
|
|
this.showErrorOnFileLoad(file)
|
|
}
|
|
} else if (file.type === 'image/webp') {
|
|
const pngInfo = await getWebpMetadata(file)
|
|
// Support loading workflows from that webp custom node.
|
|
const workflow = pngInfo?.workflow || pngInfo?.Workflow
|
|
const prompt = pngInfo?.prompt || pngInfo?.Prompt
|
|
|
|
if (workflow) {
|
|
this.loadGraphData(JSON.parse(workflow), true, true, fileName)
|
|
} else if (prompt) {
|
|
this.loadApiJson(JSON.parse(prompt), fileName)
|
|
} else {
|
|
this.showErrorOnFileLoad(file)
|
|
}
|
|
} else if (file.type === 'audio/flac' || file.type === 'audio/x-flac') {
|
|
const pngInfo = await getFlacMetadata(file)
|
|
const workflow = pngInfo?.workflow || pngInfo?.Workflow
|
|
const prompt = pngInfo?.prompt || pngInfo?.Prompt
|
|
|
|
if (workflow) {
|
|
this.loadGraphData(JSON.parse(workflow), true, true, fileName)
|
|
} else if (prompt) {
|
|
this.loadApiJson(JSON.parse(prompt), fileName)
|
|
} else {
|
|
this.showErrorOnFileLoad(file)
|
|
}
|
|
} else if (
|
|
file.type === 'application/json' ||
|
|
file.name?.endsWith('.json')
|
|
) {
|
|
const reader = new FileReader()
|
|
reader.onload = async () => {
|
|
const readerResult = reader.result as string
|
|
const jsonContent = JSON.parse(readerResult)
|
|
if (jsonContent?.templates) {
|
|
this.loadTemplateData(jsonContent)
|
|
} else if (this.isApiJson(jsonContent)) {
|
|
this.loadApiJson(jsonContent, fileName)
|
|
} else {
|
|
await this.loadGraphData(
|
|
JSON.parse(readerResult),
|
|
true,
|
|
false,
|
|
fileName
|
|
)
|
|
}
|
|
}
|
|
reader.readAsText(file)
|
|
} else if (
|
|
file.name?.endsWith('.latent') ||
|
|
file.name?.endsWith('.safetensors')
|
|
) {
|
|
const info = await getLatentMetadata(file)
|
|
// TODO define schema to LatentMetadata
|
|
// @ts-expect-error
|
|
if (info.workflow) {
|
|
await this.loadGraphData(
|
|
// @ts-expect-error
|
|
JSON.parse(info.workflow),
|
|
true,
|
|
true,
|
|
fileName
|
|
)
|
|
// @ts-expect-error
|
|
} else if (info.prompt) {
|
|
// @ts-expect-error
|
|
this.loadApiJson(JSON.parse(info.prompt))
|
|
} else {
|
|
this.showErrorOnFileLoad(file)
|
|
}
|
|
} else {
|
|
this.showErrorOnFileLoad(file)
|
|
}
|
|
}
|
|
|
|
isApiJson(data) {
|
|
// @ts-expect-error
|
|
return Object.values(data).every((v) => v.class_type)
|
|
}
|
|
|
|
loadApiJson(apiData, fileName: string) {
|
|
useWorkflowService().beforeLoadNewGraph()
|
|
|
|
const missingNodeTypes = Object.values(apiData).filter(
|
|
// @ts-expect-error
|
|
(n) => !LiteGraph.registered_node_types[n.class_type]
|
|
)
|
|
if (missingNodeTypes.length) {
|
|
this.#showMissingNodesError(
|
|
// @ts-expect-error
|
|
missingNodeTypes.map((t) => t.class_type)
|
|
)
|
|
return
|
|
}
|
|
|
|
const ids = Object.keys(apiData)
|
|
app.graph.clear()
|
|
for (const id of ids) {
|
|
const data = apiData[id]
|
|
const node = LiteGraph.createNode(data.class_type)
|
|
node.id = isNaN(+id) ? id : +id
|
|
node.title = data._meta?.title ?? node.title
|
|
app.graph.add(node)
|
|
}
|
|
|
|
for (const id of ids) {
|
|
const data = apiData[id]
|
|
const node = app.graph.getNodeById(id)
|
|
for (const input in data.inputs ?? {}) {
|
|
const value = data.inputs[input]
|
|
if (value instanceof Array) {
|
|
const [fromId, fromSlot] = value
|
|
const fromNode = app.graph.getNodeById(fromId)
|
|
let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
|
|
if (toSlot == null || toSlot === -1) {
|
|
try {
|
|
// Target has no matching input, most likely a converted widget
|
|
const widget = node.widgets?.find((w) => w.name === input)
|
|
// @ts-expect-error
|
|
if (widget && node.convertWidgetToInput?.(widget)) {
|
|
toSlot = node.inputs?.length - 1
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
if (toSlot != null || toSlot !== -1) {
|
|
fromNode.connect(fromSlot, node, toSlot)
|
|
}
|
|
} else {
|
|
const widget = node.widgets?.find((w) => w.name === input)
|
|
if (widget) {
|
|
widget.value = value
|
|
widget.callback?.(value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
app.graph.arrange()
|
|
|
|
for (const id of ids) {
|
|
const data = apiData[id]
|
|
const node = app.graph.getNodeById(id)
|
|
for (const input in data.inputs ?? {}) {
|
|
const value = data.inputs[input]
|
|
if (value instanceof Array) {
|
|
const [fromId, fromSlot] = value
|
|
const fromNode = app.graph.getNodeById(fromId)
|
|
let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
|
|
if (toSlot == null || toSlot === -1) {
|
|
try {
|
|
// Target has no matching input, most likely a converted widget
|
|
const widget = node.widgets?.find((w) => w.name === input)
|
|
// @ts-expect-error
|
|
if (widget && node.convertWidgetToInput?.(widget)) {
|
|
toSlot = node.inputs?.length - 1
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
if (toSlot != null || toSlot !== -1) {
|
|
fromNode.connect(fromSlot, node, toSlot)
|
|
}
|
|
} else {
|
|
const widget = node.widgets?.find((w) => w.name === input)
|
|
if (widget) {
|
|
widget.value = value
|
|
widget.callback?.(value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
app.graph.arrange()
|
|
|
|
// @ts-expect-error zod type issue on ComfyWorkflowJSON. Should be resolved after enabling ts-strict globally.
|
|
useWorkflowService().afterLoadNewGraph(fileName, this.serializeGraph())
|
|
}
|
|
|
|
/**
|
|
* Registers a Comfy web extension with the app
|
|
* @param {ComfyExtension} extension
|
|
* @deprecated Use useExtensionService().registerExtension instead
|
|
*/
|
|
registerExtension(extension: ComfyExtension) {
|
|
useExtensionService().registerExtension(extension)
|
|
}
|
|
|
|
/**
|
|
* Refresh combo list on whole nodes
|
|
*/
|
|
async refreshComboInNodes() {
|
|
const requestToastMessage: ToastMessageOptions = {
|
|
severity: 'info',
|
|
summary: 'Update',
|
|
detail: 'Update requested'
|
|
}
|
|
if (this.vueAppReady) {
|
|
useToastStore().add(requestToastMessage)
|
|
}
|
|
|
|
const defs = await this.#getNodeDefs()
|
|
for (const nodeId in defs) {
|
|
this.registerNodeDef(nodeId, defs[nodeId])
|
|
}
|
|
for (let nodeNum in this.graph.nodes) {
|
|
const node = this.graph.nodes[nodeNum]
|
|
const def = defs[node.type]
|
|
// Allow primitive nodes to handle refresh
|
|
node.refreshComboInNode?.(defs)
|
|
|
|
if (!def) continue
|
|
|
|
for (const widgetNum in node.widgets) {
|
|
const widget = node.widgets[widgetNum]
|
|
if (
|
|
widget.type == 'combo' &&
|
|
def['input']['required'][widget.name] !== undefined
|
|
) {
|
|
widget.options.values = def['input']['required'][widget.name][0]
|
|
}
|
|
}
|
|
}
|
|
|
|
await useExtensionService().invokeExtensionsAsync(
|
|
'refreshComboInNodes',
|
|
defs
|
|
)
|
|
|
|
if (this.vueAppReady) {
|
|
this.updateVueAppNodeDefs(defs)
|
|
useToastStore().remove(requestToastMessage)
|
|
useToastStore().add({
|
|
severity: 'success',
|
|
summary: 'Updated',
|
|
detail: 'Node definitions updated',
|
|
life: 1000
|
|
})
|
|
}
|
|
}
|
|
|
|
resetView() {
|
|
app.canvas.ds.scale = 1
|
|
app.canvas.ds.offset = [0, 0]
|
|
app.graph.setDirtyCanvas(true, true)
|
|
}
|
|
|
|
/**
|
|
* Frees memory allocated to image preview blobs for a specific node, by revoking the URLs associated with them.
|
|
* @param nodeId ID of the node to revoke all preview images of
|
|
*/
|
|
revokePreviews(nodeId: NodeId) {
|
|
if (!this.nodePreviewImages[nodeId]?.[Symbol.iterator]) return
|
|
for (const url of this.nodePreviewImages[nodeId]) {
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
}
|
|
/**
|
|
* Clean current state
|
|
*/
|
|
clean() {
|
|
this.nodeOutputs = {}
|
|
for (const id of Object.keys(this.nodePreviewImages)) {
|
|
this.revokePreviews(id)
|
|
}
|
|
this.nodePreviewImages = {}
|
|
this.lastNodeErrors = null
|
|
this.lastExecutionError = null
|
|
}
|
|
|
|
clientPosToCanvasPos(pos: Vector2): Vector2 {
|
|
const rect = this.canvasContainer.getBoundingClientRect()
|
|
const containerOffsets = [rect.left, rect.top]
|
|
return _.zip(pos, this.canvas.ds.offset, containerOffsets).map(
|
|
([p, o1, o2]) => (p - o2) / this.canvas.ds.scale - o1
|
|
) as Vector2
|
|
}
|
|
|
|
canvasPosToClientPos(pos: Vector2): Vector2 {
|
|
const rect = this.canvasContainer.getBoundingClientRect()
|
|
const containerOffsets = [rect.left, rect.top]
|
|
return _.zip(pos, this.canvas.ds.offset, containerOffsets).map(
|
|
([p, o1, o2]) => (p + o1) * this.canvas.ds.scale + o2
|
|
) as Vector2
|
|
}
|
|
|
|
public goToNode(nodeId: NodeId) {
|
|
const graphNode = this.graph.getNodeById(nodeId)
|
|
if (!graphNode) return
|
|
this.canvas.animateToBounds(graphNode.boundingRect)
|
|
}
|
|
}
|
|
|
|
export const app = new ComfyApp()
|