mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-24 14:45:36 +00:00

Files

AustinMroz e28c1e7e43 Show multitype slices of shared color (#11250 )

A tiny update requested by the backend team.

Previously, multitype slot indicators would have inputs that resolve to
the same connection color display be combined into a single slice. For
example, both `INT` and `FLOAT` have the same color, so an `INT,FLOAT`
slot displays as a solid color instead of 2 semi-circles. This was a
conscientious decision to improve readability on slots that allow many
types, but meant that the more common cases (like `INT,FLOAT`) would
have no indicator at all. Since priority is given to types based on
order of listing, node authors can still control which types are elided
on a slot accepting many types.

<img width="430" height="320" alt="image"
src="https://github.com/user-attachments/assets/1fc7fb1c-a634-487c-bc03-711637aeef13"
/>

- I do not believe there are any core nodes affected by this change.
- The vue implementation of merging slot colors never functioned
properly, but is still removed.
- Vue was bugged to incorrectly pass slot types for widgets. This is
also fixed.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11250-Show-multitype-slices-of-shared-color-3436d73d365081b6b484ea74423435a1)
by [Unito](https://www.unito.io)

2026-04-17 22:19:59 +00:00

imgs

Add 'src/lib/litegraph/' from commit '1b58bf4966e9cdaa04bfaa40f5650b6c6680ab97'

2025-08-03 14:55:05 -04:00

public/css

Chore: Oxfmt formatting pass (#8341 )

2026-01-27 17:59:19 -08:00

src

Show multitype slices of shared color (#11250 )

2026-04-17 22:19:59 +00:00

AGENTS.md

docs: add widget serialization reference (widget.serialize vs widget.options.serialize) (#9102 )

2026-02-22 16:40:43 -08:00

API.md

docs: audit and update litegraph documentation (#8588 )

2026-02-03 15:07:43 -08:00

CLAUDE.md

Chore: Oxfmt formatting pass (#8341 )

2026-01-27 17:59:19 -08:00

LICENSE

Add 'src/lib/litegraph/' from commit '1b58bf4966e9cdaa04bfaa40f5650b6c6680ab97'

2025-08-03 14:55:05 -04:00

README.md

docs: audit and update litegraph documentation (#8588 )

2026-02-03 15:07:43 -08:00

README.md

@ComfyOrg/litegraph

This is the litegraph version used in ComfyUI_frontend.

It is a fork of the original litegraph.js. Some APIs may by unchanged, however it is largely incompatible with the original.

Some early highlights:

Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
Emit search box triggering custom events (https://github.com/Comfy-Org/litegraph.js/pull/10)
Truncate overflowing combo widget text (https://github.com/Comfy-Org/litegraph.js/pull/17)
Sort node based on ID on graph serialization (https://github.com/Comfy-Org/litegraph.js/pull/21)
Fix empty input not used when connecting links (https://github.com/Comfy-Org/litegraph.js/pull/24)
Batch output connection move/disconnect (https://github.com/Comfy-Org/litegraph.js/pull/39)
And now with hundreds more...

Usage

This library is included as a git subtree in the ComfyUI frontend project at src/lib/litegraph.

litegraph.js

A TypeScript library to create graphs in the browser similar to Unreal Blueprints.

Description of the original litegraph.js

A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.

It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.

Features

Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
Optimized to support hundreds of nodes per graph (on editor but also on execution)
Customizable theme (colors, shapes, background)
Callbacks to personalize every action/drawing/event of nodes
Graphs can be executed in NodeJS
Highly customizable nodes (color, shape, widgets, custom rendering)
Easy to integrate in any JS application (one single file, no dependencies)
Typescript support

Integration

This library is integrated as a git subtree in the ComfyUI frontend project. To use it in your code:

import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph'

How to code a new Node type

Here is an example of how to build a node that sums two inputs:

import { LiteGraph, LGraphNode } from './litegraph'

class MyAddNode extends LGraphNode {
  // Name to show
  title = 'Sum'

  constructor() {
    this.addInput('A', 'number')
    this.addInput('B', 'number')
    this.addOutput('A+B', 'number')
    this.properties.precision = 1
  }

  // Function to call when the node is executed
  onExecute() {
    var A = this.getInputData(0)
    if (A === undefined) A = 0
    var B = this.getInputData(1)
    if (B === undefined) B = 0
    this.setOutputData(0, A + B)
  }
}

// Register the node type
LiteGraph.registerNodeType('basic/sum', MyAddNode)

Server side

It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).

import { LiteGraph, LGraph } from './litegraph.js'

const graph = new LGraph()

const firstNode = LiteGraph.createNode('basic/sum')
graph.add(firstNode)

const secondNode = LiteGraph.createNode('basic/sum')
graph.add(secondNode)

firstNode.connect(0, secondNode, 1)

graph.start()