Node source/id badge (#781)

* Add basic node badge

* Node source badge

* Prevent manager badge rendering

* Update litegraph (Badge support)

* Add playwright tests

* Separate nodes

* nit

* Checkout devtools repo for browser test expectation CI

* Fix failing unittests

* Rename setting

* Hide all badges in playwright tests

* Handle group node

* Update test expectations [skip ci]

* Fix unittest

---------

Co-authored-by: github-actions <github-actions@github.com>

src/types/apiTypes.ts

@@ -3,6 +3,7 @@ import { zComfyWorkflow, zNodeId } from './comfyWorkflow'
 import { fromZodError } from 'zod-validation-error'
 import { colorPalettesSchema } from './colorPalette'
 import { LinkReleaseTriggerAction } from './searchBoxTypes'
+import { NodeBadgeMode } from './nodeSource'
 
 const zNodeType = z.string()
 const zQueueIndex = z.number()
@@ -424,6 +425,10 @@ const zLinkReleaseTriggerAction = z.enum(
   Object.values(LinkReleaseTriggerAction) as [string, ...string[]]
 )
 
+const zNodeBadgeMode = z.enum(
+  Object.values(NodeBadgeMode) as [string, ...string[]]
+)
+
 const zSettings = z.record(z.any()).and(
   z
     .object({
@@ -484,7 +489,9 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Workflow.ModelDownload.AllowedSources': z.array(z.string()),
       'Comfy.Workflow.ModelDownload.AllowedSuffixes': z.array(z.string()),
       'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
-      'Comfy.Window.UnloadConfirmation': z.boolean()
+      'Comfy.Window.UnloadConfirmation': z.boolean(),
+      'Comfy.NodeBadge.NodeSourceBadgeMode': zNodeBadgeMode,
+      'Comfy.NodeBadge.NodeIdBadgeMode': zNodeBadgeMode
     })
     .optional()
 )

src/types/colorPalette.ts

@@ -52,7 +52,9 @@ const litegraphBaseSchema = z
     WIDGET_SECONDARY_TEXT_COLOR: z.string(),
     LINK_COLOR: z.string(),
     EVENT_LINK_COLOR: z.string(),
-    CONNECTING_LINK_COLOR: z.string()
+    CONNECTING_LINK_COLOR: z.string(),
+    BADGE_FG_COLOR: z.string().optional(),
+    BADGE_BG_COLOR: z.string().optional()
   })
   .passthrough()
 

src/types/comfyLGraphNode.ts

@@ -0,0 +1,11 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { ComfyNodeDef } from './apiTypes'
+
+export declare class ComfyLGraphNode extends LGraphNode {
+  static comfyClass: string
+  static title: string
+  static nodeData?: ComfyNodeDef
+  static category: string
+
+  constructor(title?: string)
+}

src/types/nodeSource.ts

@@ -3,6 +3,7 @@ export type NodeSource = {
   type: NodeSourceType
   className: string
   displayText: string
+  badgeText: string
 }
 
 export const getNodeSource = (python_module: string): NodeSource => {
@@ -11,15 +12,23 @@ export const getNodeSource = (python_module: string): NodeSource => {
     return {
       type: 'core',
       className: 'comfy-core',
-      displayText: 'Comfy Core'
+      displayText: 'Comfy Core',
+      badgeText: '🦊'
     }
   } else if (modules[0] === 'custom_nodes') {
     return {
       type: 'custom_nodes',
       className: 'comfy-custom-nodes',
-      displayText: modules[1]
+      displayText: modules[1],
+      badgeText: modules[1]
     }
   } else {
     throw new Error(`Unknown node source: ${python_module}`)
   }
 }
+
+export enum NodeBadgeMode {
+  None = 'None',
+  ShowAll = 'Show all',
+  HideBuiltIn = 'Hide built-in'
+}