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

[Refactor] Rename layout method to arrange/measure (#911)

Browse Source 
Prefer verb function names.
This commit is contained in:
filtered
2025-04-09 17:49:41 +10:00
committed by GitHub
parent 05e8e25b6b
commit 297b557b94
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/LGraphCanvas.ts
View File

@@ -4295,7 +4295,7 @@ export class LGraphCanvas implements ConnectionColorContext {
// render inputs and outputs // render inputs and outputs
if (!node.collapsed) { if (!node.collapsed) {
node.layout() node.arrange()
node.drawSlots(ctx, { node.drawSlots(ctx, {
fromSlot: this.linkConnector.renderLinks[0]?.fromSlot, fromSlot: this.linkConnector.renderLinks[0]?.fromSlot,
colorContext: this, colorContext: this,

29
src/LGraphNode.ts
View File

@@ -3490,7 +3490,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
return [...this.inputs, ...this.outputs] return [...this.inputs, ...this.outputs]
} }
#layoutSlot(slot: INodeSlot, options: { #measureSlot(slot: INodeSlot, options: {
slotIndex: number slotIndex: number
}): void { }): void {
const { slotIndex } = options const { slotIndex } = options
@@ -3508,7 +3508,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
}) })
} }
#layoutSlots(): ReadOnlyRect | null { #measureSlots(): ReadOnlyRect | null {
const slots: LayoutElement<INodeSlot>[] = [] const slots: LayoutElement<INodeSlot>[] = []
for (const [i, slot] of this.inputs.entries()) { for (const [i, slot] of this.inputs.entries()) {
@@ -3517,7 +3517,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
/** Widget input slots are handled in {@link layoutWidgetInputSlots} */ /** Widget input slots are handled in {@link layoutWidgetInputSlots} */
if (this.widgets?.length && isWidgetInputSlot(slot)) continue if (this.widgets?.length && isWidgetInputSlot(slot)) continue
this.#layoutSlot(slot, { this.#measureSlot(slot, {
slotIndex: i, slotIndex: i,
}) })
if (slot._layoutElement) { if (slot._layoutElement) {
@@ -3525,7 +3525,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
} }
} }
for (const [i, slot] of this.outputs.entries()) { for (const [i, slot] of this.outputs.entries()) {
this.#layoutSlot(slot, { this.#measureSlot(slot, {
slotIndex: i, slotIndex: i,
}) })
if (slot._layoutElement) { if (slot._layoutElement) {
@@ -3612,12 +3612,12 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
} }
/** /**
* Lays out the node's widgets vertically. * Arranges the node's widgets vertically.
* Sets following properties on each widget: * Sets following properties on each widget:
* - {@link IBaseWidget.computedHeight} * - {@link IBaseWidget.computedHeight}
* - {@link IBaseWidget.y} * - {@link IBaseWidget.y}
*/ */
#layoutWidgets(options: { widgetStartY: number }): void { #arrangeWidgets(options: { widgetStartY: number }): void {
if (!this.widgets || !this.widgets.length) return if (!this.widgets || !this.widgets.length) return
const bodyHeight = this.bodyHeight const bodyHeight = this.bodyHeight
@@ -3692,9 +3692,9 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
} }
/** /**
* Lays out the node's widget input slots. * Arranges the layout of the node's widget input slots.
*/ */
#layoutWidgetInputSlots(): void { #arrangeWidgetInputSlots(): void {
if (!this.widgets) return if (!this.widgets) return
const slotByWidgetName = new Map<string, INodeInputSlot & { index: number }>() const slotByWidgetName = new Map<string, INodeInputSlot & { index: number }>()
@@ -3713,15 +3713,18 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
const actualSlot = this.inputs[slot.index] const actualSlot = this.inputs[slot.index]
const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
actualSlot.pos = [offset, widget.y + offset] actualSlot.pos = [offset, widget.y + offset]
this.#layoutSlot(actualSlot, { slotIndex: slot.index }) this.#measureSlot(actualSlot, { slotIndex: slot.index })
} }
} }
layout(): void { /**
const slotsBounds = this.#layoutSlots() * Arranges node elements in preparation for rendering (slots & widgets).
*/
arrange(): void {
const slotsBounds = this.#measureSlots()
const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] : 0 const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] : 0
this.#layoutWidgets({ widgetStartY }) this.#arrangeWidgets({ widgetStartY })
this.#layoutWidgetInputSlots() this.#arrangeWidgetInputSlots()
} }
/** /**