Fix UI crash when selecting broken node + TS fixes (#3859)

Author: webfiltered

src/components/graph/DomWidgets.vue

@@ -16,12 +16,12 @@ import { computed, watch } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { type DomWidgetState, useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(
-  () => Array.from(domWidgetStore.widgetStates.values()) as DomWidgetState[]
+const widgetStates = computed(() =>
+  Array.from(domWidgetStore.widgetStates.values())
 )
 
 const updateWidgets = () => {

src/components/graph/GraphCanvas.vue

@@ -293,7 +293,7 @@ onMounted(async () => {
   workspaceStore.spinner = true
   // ChangeTracker needs to be initialized before setup, as it will overwrite
   // some listeners of litegraph canvas.
-  ChangeTracker.init(comfyApp)
+  ChangeTracker.init()
   await loadCustomNodesI18n()
   try {
     await settingStore.loadSettingValues()

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -36,7 +36,7 @@ const buttonHovered = ref(false)
 const selectedOutputNodes = computed(
   () =>
     canvasStore.selectedItems.filter(
-      (item) => isLGraphNode(item) && item.constructor.nodeData.output_node
+      (item) => isLGraphNode(item) && item.constructor.nodeData?.output_node
     ) as LGraphNode[]
 )
 
@@ -45,7 +45,7 @@ const isDisabled = computed(() => selectedOutputNodes.value.length === 0)
 function outputNodeStokeStyle(this: LGraphNode) {
   if (
     this.selected &&
-    this.constructor.nodeData.output_node &&
+    this.constructor.nodeData?.output_node &&
     buttonHovered.value
   ) {
     return { color: 'orange', lineWidth: 2, padding: 10 }

src/composables/useCoreCommands.ts

@@ -320,7 +320,7 @@ export function useCoreCommands(): ComfyCommand[] {
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
         const queueNodeIds = getSelectedNodes()
-          .filter((node) => node.constructor.nodeData.output_node)
+          .filter((node) => node.constructor.nodeData?.output_node)
           .map((node) => node.id)
         if (queueNodeIds.length === 0) {
           toastStore.add({

src/extensions/core/groupNode.ts

@@ -797,7 +797,7 @@ export class GroupNodeConfig {
 
 export class GroupNodeHandler {
   node: LGraphNode
-  groupData
+  groupData: any
   innerNodes: any
 
   constructor(node: LGraphNode) {

src/extensions/core/nodeTemplates.ts

@@ -401,6 +401,7 @@ app.registerExtension({
                   // @ts-expect-error
                   data.groupNodes = {}
                 }
+                if (nodeData == null) throw new TypeError('nodeData is not set')
                 // @ts-expect-error
                 data.groupNodes[nodeData.name] = groupData
                 // @ts-expect-error

src/extensions/core/uploadAudio.ts

@@ -117,7 +117,10 @@ app.registerExtension({
           node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
         audioUIWidget.serialize = false
 
-        const isOutputNode = node.constructor.nodeData.output_node
+        const { nodeData } = node.constructor
+        if (nodeData == null) throw new TypeError('nodeData is null')
+
+        const isOutputNode = nodeData.output_node
         if (isOutputNode) {
           // Hide the audio widget when there is no audio initially.
           audioUIWidget.element.classList.add('empty-audio-widget')

src/schemas/comfyWorkflowSchema.ts

@@ -216,6 +216,7 @@ const zComfyNode = z
 
 const zGroup = z
   .object({
+    id: z.number().optional(),
     title: z.string(),
     bounding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
     color: z.string().optional(),

src/scripts/changeTracker.ts

@@ -10,6 +10,7 @@ import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
 import { api } from './api'
 import type { ComfyApp } from './app'
+import { app } from './app'
 
 function clone<T>(obj: T): T {
   return JSON.parse(JSON.stringify(obj))
@@ -36,11 +37,6 @@ export class ChangeTracker {
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
 
-  static app?: ComfyApp
-  get app(): ComfyApp {
-    return ChangeTracker.app!
-  }
-
   constructor(
     /**
      * The workflow that this change tracker is tracking
@@ -68,18 +64,18 @@ export class ChangeTracker {
 
   store() {
     this.ds = {
-      scale: this.app.canvas.ds.scale,
-      offset: [this.app.canvas.ds.offset[0], this.app.canvas.ds.offset[1]]
+      scale: app.canvas.ds.scale,
+      offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
     }
   }
 
   restore() {
     if (this.ds) {
-      this.app.canvas.ds.scale = this.ds.scale
-      this.app.canvas.ds.offset = this.ds.offset
+      app.canvas.ds.scale = this.ds.scale
+      app.canvas.ds.offset = this.ds.offset
     }
     if (this.nodeOutputs) {
-      this.app.nodeOutputs = this.nodeOutputs
+      app.nodeOutputs = this.nodeOutputs
     }
   }
 
@@ -105,10 +101,8 @@ export class ChangeTracker {
   }
 
   checkState() {
-    if (!this.app.graph || this.changeCount) return
-    // @ts-expect-error zod type issue on ComfyWorkflowJSON. ComfyWorkflowJSON
-    // is stricter than LiteGraph's serialisation schema.
-    const currentState = clone(this.app.graph.serialize()) as ComfyWorkflowJSON
+    if (!app.graph || this.changeCount) return
+    const currentState = clone(app.graph.serialize()) as ComfyWorkflowJSON
     if (!this.activeState) {
       this.activeState = currentState
       return
@@ -132,7 +126,7 @@ export class ChangeTracker {
       target.push(this.activeState)
       this.restoringState = true
       try {
-        await this.app.loadGraphData(prevState, false, false, this.workflow, {
+        await app.loadGraphData(prevState, false, false, this.workflow, {
           showMissingModelsDialog: false,
           showMissingNodesDialog: false,
           checkForRerouteMigration: false
@@ -189,13 +183,11 @@ export class ChangeTracker {
     }
   }
 
-  static init(app: ComfyApp) {
+  static init() {
     const getCurrentChangeTracker = () =>
       useWorkflowStore().activeWorkflow?.changeTracker
     const checkState = () => getCurrentChangeTracker()?.checkState()
 
-    ChangeTracker.app = app
-
     let keyIgnored = false
     window.addEventListener(
       'keydown',
@@ -237,7 +229,7 @@ export class ChangeTracker {
           if (await changeTracker.undoRedo(e)) return
 
           // If our active element is some type of input then handle changes after they're done
-          if (ChangeTracker.bindInput(app, bindInputEl)) return
+          if (ChangeTracker.bindInput(bindInputEl)) return
           logger.debug('checkState on keydown')
           changeTracker.checkState()
         })
@@ -339,7 +331,7 @@ export class ChangeTracker {
     })
   }
 
-  static bindInput(_app: ComfyApp, activeEl: Element | null): boolean {
+  static bindInput(activeEl: Element | null): boolean {
     if (
       !activeEl ||
       activeEl.tagName === 'CANVAS' ||

src/stores/domWidgetStore.ts

@@ -2,14 +2,14 @@
  * Stores all DOM widgets that are used in the canvas.
  */
 import { defineStore } from 'pinia'
-import { markRaw, ref } from 'vue'
+import { type Raw, markRaw, ref } from 'vue'
 
 import type { PositionConfig } from '@/composables/element/useAbsolutePosition'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 
 export interface DomWidgetState extends PositionConfig {
   // Raw widget instance
-  widget: BaseDOMWidget<object | string>
+  widget: Raw<BaseDOMWidget<object | string>>
   visible: boolean
   readonly: boolean
   zIndex: number
@@ -23,7 +23,7 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
     widget: BaseDOMWidget<V>
   ) => {
     widgetStates.value.set(widget.id, {
-      widget: markRaw(widget) as unknown as BaseDOMWidget<object | string>,
+      widget: markRaw(widget) as unknown as Raw<BaseDOMWidget<object | string>>,
       visible: true,
       readonly: false,
       zIndex: 0,