[API] Add LinkConnector - replaces connecting_links (#726)

### LinkConnector

Replaces the minimal-change effort of `connecting_links` with a more
reliable implementation.

- Subscribable, event-based API
- Uses browser-standard `e.preventDefault()` to cancel `before-*` events
- Uses standard `state` POJO - can be proxied without issue
- Structures code and separates concerns out of `LGraphCanvas`
- Link creation calls can now be made from anywhere, without the need
for a rewrite
- New canvas sub-components now live in `src/canvas/`

### Rendering

- Skips link segments by setting a `_dragging` bool flag on the LLink or
Reroute
- Moves some previously nested code to event listeners, configured in
the `LGraphCanvas` constructor

### Deprecation

`LGraphCanvas.connecting_links` is now deprecated and will later be
removed.

Until it is removed, to prevent breaking extensions it will continue to
be set and cleared by a legacy callback. The contents of this property
are ignored; code search revealed no exentsions actually modifying the
array.
This commit is contained in:
filtered
2025-03-09 10:48:45 +11:00
committed by GitHub
parent 8e59fbfaa2
commit c0bfe5489f
12 changed files with 950 additions and 330 deletions

View File

@@ -2,7 +2,6 @@ import type { DragAndScale } from "./DragAndScale"
import type {
CanvasColour,
ColorOption,
ConnectingLink,
Dictionary,
IColorable,
IContextMenuValue,
@@ -3256,7 +3255,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
drawWidgets(ctx: CanvasRenderingContext2D, options: {
colorContext: ConnectionColorContext
linkOverWidget: IWidget | null | undefined
linkOverWidgetType: ISlotType
linkOverWidgetType?: ISlotType
lowQuality?: boolean
editorAlpha?: number
}): void {
@@ -3281,6 +3280,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
// Manually draw a slot next to the widget simulating an input
new NodeInputSlot({
name: "",
// @ts-expect-error https://github.com/Comfy-Org/litegraph.js/issues/616
type: linkOverWidgetType,
link: 0,
// @ts-expect-error https://github.com/Comfy-Org/litegraph.js/issues/616
@@ -3419,18 +3419,18 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
* Draws the node's input and output slots.
*/
drawSlots(ctx: CanvasRenderingContext2D, options: {
connectingLink: ConnectingLink | undefined
fromSlot?: INodeInputSlot | INodeOutputSlot
colorContext: ConnectionColorContext
editorAlpha: number
lowQuality: boolean
}) {
const { connectingLink, colorContext, editorAlpha, lowQuality } = options
const { fromSlot, colorContext, editorAlpha, lowQuality } = options
for (const slot of this.slots) {
// change opacity of incompatible slots when dragging a connection
const layoutElement = slot._layoutElement
const slotInstance = toNodeSlotClass(slot)
const isValid = slotInstance.isValidTarget(connectingLink)
const isValid = !fromSlot || slotInstance.isValidTarget(fromSlot)
const highlight = isValid && this.#isMouseOverSlot(slot)
const labelColor = highlight
? this.highlightColor