diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts index c069bb36b..20e26e211 100644 --- a/src/lib/litegraph/src/LGraphNode.ts +++ b/src/lib/litegraph/src/LGraphNode.ts @@ -3833,33 +3833,12 @@ export class LGraphNode ? this.getInputPos(slotIndex) : this.getOutputPos(slotIndex) - if (LiteGraph.vueNodesMode) { - // Vue-based slot dimensions - const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components - - if (slot.isWidgetInputSlot) { - // Widget slots have a 20x20 clickable area centered at the position - slot.boundingRect[0] = pos[0] - 10 - slot.boundingRect[1] = pos[1] - 10 - slot.boundingRect[2] = 20 - slot.boundingRect[3] = 20 - } else { - // Regular slots have a 20x20 clickable area for the connector - // but the full slot height for vertical spacing - slot.boundingRect[0] = pos[0] - 10 - slot.boundingRect[1] = pos[1] - dimensions.SLOT_HEIGHT / 2 - slot.boundingRect[2] = 20 - slot.boundingRect[3] = dimensions.SLOT_HEIGHT - } - } else { - // Traditional LiteGraph dimensions - slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 - slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 - slot.boundingRect[2] = slot.isWidgetInputSlot - ? BaseWidget.margin - : LiteGraph.NODE_SLOT_HEIGHT - slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT - } + slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 + slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 + slot.boundingRect[2] = slot.isWidgetInputSlot + ? BaseWidget.margin + : LiteGraph.NODE_SLOT_HEIGHT + slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT } #measureSlots(): ReadOnlyRect | null { diff --git a/src/lib/litegraph/src/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts index a7c1140ae..85911e5b9 100644 --- a/src/lib/litegraph/src/LiteGraphGlobal.ts +++ b/src/lib/litegraph/src/LiteGraphGlobal.ts @@ -24,26 +24,6 @@ import { } from './types/globalEnums' import { createUuidv4 } from './utils/uuid' -/** - * Vue node dimensions configuration for the contract between LiteGraph and Vue components. - * These values ensure both systems can independently calculate node, slot, and widget positions - * to place them in identical locations. - * - * IMPORTANT: These values must match the actual rendered dimensions of Vue components - * for the positioning contract to work correctly. - */ -export const COMFY_VUE_NODE_DIMENSIONS = { - spacing: { - BETWEEN_SLOTS_AND_BODY: 8, - BETWEEN_WIDGETS: 8 - }, - components: { - HEADER_HEIGHT: 34, // 18 header + 16 padding - SLOT_HEIGHT: 24, - STANDARD_WIDGET_HEIGHT: 30 - } -} as const - /** * The Global Scope. It contains all the registered node classes. */ @@ -95,14 +75,6 @@ export class LiteGraphGlobal { WIDGET_SECONDARY_TEXT_COLOR = '#999' WIDGET_DISABLED_TEXT_COLOR = '#666' - /** - * Vue node dimensions configuration for the contract between LiteGraph and Vue components. - * These values ensure both systems can independently calculate node, slot, and widget positions - * to place them in identical locations. - */ - // WARNING THIS WILL BE REMOVED IN FAVOR OF THE SLOTS LAYOUT TREE useDomSlotRegistration - COMFY_VUE_NODE_DIMENSIONS = COMFY_VUE_NODE_DIMENSIONS - LINK_COLOR = '#9A9' EVENT_LINK_COLOR = '#A86' CONNECTING_LINK_COLOR = '#AFA' diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts index ddfc12c40..46202a219 100644 --- a/src/lib/litegraph/src/litegraph.ts +++ b/src/lib/litegraph/src/litegraph.ts @@ -104,7 +104,6 @@ export { BadgePosition, LGraphBadge } from './LGraphBadge' export { LGraphCanvas } from './LGraphCanvas' export { LGraphGroup } from './LGraphGroup' export { LGraphNode, type NodeId } from './LGraphNode' -export { COMFY_VUE_NODE_DIMENSIONS } from './LiteGraphGlobal' export { LLink } from './LLink' export { createBounds } from './measure' export { Reroute, type RerouteId } from './Reroute' diff --git a/src/renderer/core/canvas/litegraph/slotCalculations.ts b/src/renderer/core/canvas/litegraph/slotCalculations.ts index b56d95b97..f181267b3 100644 --- a/src/renderer/core/canvas/litegraph/slotCalculations.ts +++ b/src/renderer/core/canvas/litegraph/slotCalculations.ts @@ -9,7 +9,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode' import type { INodeInputSlot, INodeOutputSlot, - INodeSlot, Point, ReadOnlyPoint } from '@/lib/litegraph/src/interfaces' @@ -79,21 +78,6 @@ export function calculateInputSlotPosFromSlot( const { pos } = input if (pos) return [nodeX + pos[0], nodeY + pos[1]] - // Check if we should use Vue positioning - if (LiteGraph.vueNodesMode) { - if (isWidgetInputSlot(input)) { - // Widget slot - pass the slot object - return calculateVueSlotPosition(context, true, input, -1) - } else { - // Regular slot - find its index in default vertical inputs - const defaultVerticalInputs = getDefaultVerticalInputs(context) - const slotIndex = defaultVerticalInputs.indexOf(input) - if (slotIndex !== -1) { - return calculateVueSlotPosition(context, true, input, slotIndex) - } - } - } - // Default vertical slots const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5 const nodeOffsetY = context.slotStartY || 0 @@ -131,15 +115,6 @@ export function calculateOutputSlotPos( const outputPos = outputSlot.pos if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]] - // Check if we should use Vue positioning - if (LiteGraph.vueNodesMode) { - const defaultVerticalOutputs = getDefaultVerticalOutputs(context) - const slotIndex = defaultVerticalOutputs.indexOf(outputSlot) - if (slotIndex !== -1) { - return calculateVueSlotPosition(context, false, outputSlot, slotIndex) - } - } - // Default vertical slots const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5 const nodeOffsetY = context.slotStartY || 0 @@ -195,8 +170,23 @@ export function getSlotPosition( : calculateOutputSlotPos(context, slotIndex) } - // Fallback to node's own methods if layout not available - return isInput ? node.getInputPos(slotIndex) : node.getOutputPos(slotIndex) + // Fallback: calculate directly from node properties if layout not available + const context: SlotPositionContext = { + nodeX: node.pos[0], + nodeY: node.pos[1], + nodeWidth: node.size[0], + nodeHeight: node.size[1], + collapsed: node.flags.collapsed || false, + collapsedWidth: node._collapsed_width, + slotStartY: node.constructor.slot_start_y, + inputs: node.inputs, + outputs: node.outputs, + widgets: node.widgets + } + + return isInput + ? calculateInputSlotPos(context, slotIndex) + : calculateOutputSlotPos(context, slotIndex) } /** @@ -218,66 +208,3 @@ function getDefaultVerticalOutputs( ): INodeOutputSlot[] { return context.outputs.filter((slot) => !slot.pos) } - -/** - * Calculate slot position using Vue node dimensions. - * This method uses the COMFY_VUE_NODE_DIMENSIONS constants to match Vue component rendering. - * @param context Node context - * @param isInput Whether this is an input slot (true) or output slot (false) - * @param slot The slot object (for widget detection) - * @param slotIndex The index of the slot in the appropriate array - * @returns The [x, y] position of the slot center in graph coordinates - */ -function calculateVueSlotPosition( - context: SlotPositionContext, - isInput: boolean, - slot: INodeSlot, - slotIndex: number -): Point { - const { nodeX, nodeY, nodeWidth, widgets } = context - const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components - const spacing = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.spacing - - let slotCenterY: number - - // IMPORTANT: LiteGraph's node position (nodeY) is at the TOP of the body (below the header) - // The header is rendered ABOVE this position at negative Y coordinates - // So we need to adjust for the difference between LiteGraph's header (30px) and Vue's header (34px) - const headerDifference = - dimensions.HEADER_HEIGHT - LiteGraph.NODE_TITLE_HEIGHT - - if (isInput && isWidgetInputSlot(slot as INodeInputSlot)) { - // Widget input slot - calculate based on widget position - // Count regular (non-widget) input slots - const regularInputCount = getDefaultVerticalInputs(context).length - - // Find widget index - const widgetIndex = - widgets?.findIndex( - (w) => w.name === (slot as INodeInputSlot).widget?.name - ) ?? 0 - - // Y position relative to the node body top (not the header) - slotCenterY = - headerDifference + - regularInputCount * dimensions.SLOT_HEIGHT + - (regularInputCount > 0 ? spacing.BETWEEN_SLOTS_AND_BODY : 0) + - widgetIndex * - (dimensions.STANDARD_WIDGET_HEIGHT + spacing.BETWEEN_WIDGETS) + - dimensions.STANDARD_WIDGET_HEIGHT / 2 - } else { - // Regular slot (input or output) - // Slots start at the top of the body, but we need to account for Vue's larger header - slotCenterY = - headerDifference + - slotIndex * dimensions.SLOT_HEIGHT + - dimensions.SLOT_HEIGHT / 2 - } - - // Calculate X position - // Input slots: 10px from left edge (center of 20x20 connector) - // Output slots: 10px from right edge (center of 20x20 connector) - const slotCenterX = isInput ? 10 : nodeWidth - 10 - - return [nodeX + slotCenterX, nodeY + slotCenterY] -} diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue index 58238d608..124597d6b 100644 --- a/src/renderer/extensions/vueNodes/components/InputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue @@ -2,7 +2,7 @@
⚠️
{ // Get slot color based on type const slotColor = computed(() => getSlotColor(props.slotData.type)) -// Get slot height from litegraph constants -const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT - const transformState = inject( 'transformState', undefined diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue index eb3196625..e83019aa9 100644 --- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue @@ -2,7 +2,7 @@
⚠️
{ // Get slot color based on type const slotColor = computed(() => getSlotColor(props.slotData.type)) -// Get slot height from litegraph constants -const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT - const transformState = inject( 'transformState', undefined diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue index 5ecba2f5b..5d7e46f5d 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue @@ -1,21 +1,16 @@