Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 02:32:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Refactor] NodeSlot.drawCollapsed (#498)

Browse Source
This commit is contained in:
Chenlei Hu
2025-02-08 23:00:58 -05:00
committed by GitHub
parent 7472d1d9a1
commit f26807f931
2 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/LGraphCanvas.ts
View File

@@ -4826,19 +4826,9 @@ export class LGraphCanvas implements ConnectionColorContext {
x = node._collapsed_width * 0.5
y = -LiteGraph.NODE_TITLE_HEIGHT
}
ctx.fillStyle = "#686"
ctx.beginPath()
if (slot.type === LiteGraph.EVENT || slot.shape === RenderShape.BOX) {
ctx.rect(x - 7 + 0.5, y - 4, 14, 8)
} else if (slot.shape === RenderShape.ARROW) {
ctx.moveTo(x + 8, y)
ctx.lineTo(x + -4, y - 4)
ctx.lineTo(x + -4, y + 4)
ctx.closePath()
} else {
ctx.arc(x, y, 4, 0, Math.PI * 2)
}
ctx.fill()
toClass(NodeInputSlot, input_slot).drawCollapsed(ctx, {
pos: [x, y],
})
}
if (output_slot) {
@@ -4848,21 +4838,9 @@ export class LGraphCanvas implements ConnectionColorContext {
x = node._collapsed_width * 0.5
y = 0
}
ctx.fillStyle = "#686"
ctx.strokeStyle = "black"
ctx.beginPath()
if (slot.type === LiteGraph.EVENT || slot.shape === RenderShape.BOX) {
ctx.rect(x - 7 + 0.5, y - 4, 14, 8)
} else if (slot.shape === RenderShape.ARROW) {
ctx.moveTo(x + 6, y)
ctx.lineTo(x - 6, y - 4)
ctx.lineTo(x - 6, y + 4)
ctx.closePath()
} else {
ctx.arc(x, y, 4, 0, Math.PI * 2)
}
ctx.fill()
// ctx.stroke();
toClass(NodeOutputSlot, output_slot).drawCollapsed(ctx, {
pos: [x, y],
})
}
}

33
src/NodeSlot.ts
View File

@@ -186,6 +186,39 @@ export abstract class NodeSlot implements INodeSlot {
ctx.strokeStyle = originalStrokeStyle
ctx.lineWidth = originalLineWidth
}
drawCollapsed(ctx: CanvasRenderingContext2D, options: { pos: Point }) {
const [x, y] = options.pos
// Save original styles
const originalFillStyle = ctx.fillStyle
ctx.fillStyle = "#686"
ctx.beginPath()
if (this.type === SlotType.Event || this.shape === RenderShape.BOX) {
ctx.rect(x - 7 + 0.5, y - 4, 14, 8)
} else if (this.shape === RenderShape.ARROW) {
// Adjust arrow direction based on whether this is an input or output slot
const isInput = this instanceof NodeInputSlot
if (isInput) {
ctx.moveTo(x + 8, y)
ctx.lineTo(x - 4, y - 4)
ctx.lineTo(x - 4, y + 4)
} else {
ctx.moveTo(x + 6, y)
ctx.lineTo(x - 6, y - 4)
ctx.lineTo(x - 6, y + 4)
}
ctx.closePath()
} else {
ctx.arc(x, y, 4, 0, Math.PI * 2)
}
ctx.fill()
// Restore original styles
ctx.fillStyle = originalFillStyle
}
}
export class NodeInputSlot extends NodeSlot implements INodeInputSlot {