- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 60% | -6/10 | -50% | -4/8 | -100% | -2/2 | -60% | -6/10 | -
| src/layout | -
-
- |
- 81.4% | -836/1027 | -62.2% | -367/590 | -86.36% | -76/88 | -84% | -788/938 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 | -1x -1x - - - - - -624x - -624x - - - -624x - - - - - - - -624x - - - - | /** Setting ID for debug logging */
-const SETTINGS_PREFIX = "Node Organizer";
-const SETTINGS_IDS = {
- DEBUG_LOGGING: `${SETTINGS_PREFIX}.Debug Logging`,
-};
-
-/** Check if debug logging is enabled */
-export function isDebugEnabled(): boolean {
- try {
- // Access app only if it exists (not in test environment)
- Iif (typeof globalThis !== "undefined" && "app" in globalThis) {
- const app = (globalThis as { app?: { extensionManager?: { setting?: { get: <T>(id: string) => T } } } }).app;
- return app?.extensionManager?.setting?.get<boolean>(SETTINGS_IDS.DEBUG_LOGGING) ?? false;
- }
- return false;
- } catch {
- return false;
- }
-}
-
-/** Log message only if debug logging is enabled */
-export function debugLog(message: string, ...args: unknown[]): void {
- Iif (isDebugEnabled()) {
- console.log(`[node-organizer] ${message}`, ...args);
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| debug.ts | -
-
- |
- 60% | -6/10 | -50% | -4/8 | -100% | -2/2 | -60% | -6/10 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 | - - - - - - - - - - - - - - - - - - - - - - - - - - - -205x - - -205x - -23x - - - -182x -245x -245x - - - - - - - -182x - -182x - - - - - -182x - - - - - - - - - - -23x -23x - -23x -52x -52x -52x - -52x - - - - - - -52x - - -23x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -182x - -182x - -245x - -245x -70x - - - -70x -70x - -70x -21x -21x -21x -21x -21x - - - -245x - -224x - - - - - - - - -182x - - -182x -182x - -182x -224x -245x - - - - - -224x - - -182x - - - - - - - - - - - - - - - -126x - - | import type { PackedRow, LayoutConfig } from "./types";
-
-/** Node size info for packing */
-interface NodeSize {
- id: number;
- width: number;
- height: number;
-}
-
-/**
- * Pack nodes into rows using First-Fit Decreasing Height (FFDH) algorithm
- *
- * Strategy:
- * 1. Sort nodes by height descending (tall nodes first)
- * 2. For each node, try to fit into existing row
- * 3. If no row fits, create new row
- * 4. Rows are sorted by height for visual consistency
- *
- * @param nodeIds - Node IDs to pack
- * @param sizes - Map of node ID to size
- * @param config - Layout configuration
- * @returns Array of packed rows
- */
-export function packNodesIntoRows(
- nodeIds: number[],
- sizes: Map<number, { width: number; height: number }>,
- config: LayoutConfig
-): PackedRow[] {
- Iif (nodeIds.length === 0) return [];
-
- // maxColumns: 0=auto, 1=disabled (vertical stack), 2+=fixed columns
- if (config.maxColumns === 1) {
- // Vertical stacking - one node per row
- return packVertically(nodeIds, sizes, config.verticalGap);
- }
-
- // Build sized node list
- const nodeSizes: NodeSize[] = nodeIds.map((id) => {
- const size = sizes.get(id);
- return {
- id,
- width: size?.width ?? 200,
- height: size?.height ?? 100,
- };
- });
-
- // Sort by height descending (FFDH: tall nodes first)
- nodeSizes.sort((a, b) => b.height - a.height);
-
- Iif (config.maxColumns >= 2) {
- // Fixed column count
- return packFixedColumns(nodeSizes, config.maxColumns, config.verticalGap);
- }
-
- // Auto mode: use maxRowWidth
- return packByWidth(nodeSizes, config.maxRowWidth, config.horizontalGap, config.verticalGap);
-}
-
-/**
- * Pack nodes vertically (one per row) - legacy behavior
- */
-function packVertically(
- nodeIds: number[],
- sizes: Map<number, { width: number; height: number }>,
- verticalGap: number
-): PackedRow[] {
- const rows: PackedRow[] = [];
- let yOffset = 0;
-
- for (const id of nodeIds) {
- const size = sizes.get(id);
- const height = size?.height ?? 100;
- const width = size?.width ?? 200;
-
- rows.push({
- nodes: [id],
- height,
- yOffset,
- width,
- });
-
- yOffset += height + verticalGap;
- }
-
- return rows;
-}
-
-/**
- * Pack nodes into fixed number of columns
- * Distributes nodes round-robin by height to balance columns
- */
-function packFixedColumns(
- nodeSizes: NodeSize[],
- columnCount: number,
- verticalGap: number
-): PackedRow[] {
- // Group nodes by similar height into rows
- const rows: PackedRow[] = [];
- let currentRow: NodeSize[] = [];
-
- for (const node of nodeSizes) {
- currentRow.push(node);
-
- if (currentRow.length >= columnCount) {
- // Row is full
- const rowHeight = Math.max(...currentRow.map((n) => n.height));
- const rowWidth = currentRow.reduce((sum, n) => sum + n.width, 0);
-
- rows.push({
- nodes: currentRow.map((n) => n.id),
- height: rowHeight,
- yOffset: 0, // Set later
- width: rowWidth,
- });
-
- currentRow = [];
- }
- }
-
- // Handle remaining nodes in last partial row
- if (currentRow.length > 0) {
- const rowHeight = Math.max(...currentRow.map((n) => n.height));
- const rowWidth = currentRow.reduce((sum, n) => sum + n.width, 0);
-
- rows.push({
- nodes: currentRow.map((n) => n.id),
- height: rowHeight,
- yOffset: 0,
- width: rowWidth,
- });
- }
-
- // Calculate y offsets
- let yOffset = 0;
- for (const row of rows) {
- row.yOffset = yOffset;
- yOffset += row.height + verticalGap;
- }
-
- return rows;
-}
-
-/**
- * Pack nodes by maximum row width (auto column count)
- * Uses FFDH: First-Fit Decreasing Height
- */
-function packByWidth(
- nodeSizes: NodeSize[],
- maxRowWidth: number,
- horizontalGap: number,
- verticalGap: number
-): PackedRow[] {
- const rows: Array<{
- nodes: NodeSize[];
- height: number;
- currentWidth: number;
- }> = [];
-
- for (const node of nodeSizes) {
- // Try to fit into existing row
- let placed = false;
-
- for (const row of rows) {
- const newWidth = row.currentWidth + horizontalGap + node.width;
-
- // Check if node fits and heights are compatible
- // Allow 50% height variance to keep rows visually balanced
- const heightRatio = row.height > 0 ? node.height / row.height : 1;
- const heightCompatible = heightRatio >= 0.5 && heightRatio <= 2.0;
-
- if (newWidth <= maxRowWidth && heightCompatible) {
- row.nodes.push(node);
- row.currentWidth = newWidth;
- row.height = Math.max(row.height, node.height);
- placed = true;
- break;
- }
- }
-
- if (!placed) {
- // Create new row
- rows.push({
- nodes: [node],
- height: node.height,
- currentWidth: node.width,
- });
- }
- }
-
- // Sort rows by their tallest node height (tallest first for visual hierarchy)
- rows.sort((a, b) => b.height - a.height);
-
- // Convert to PackedRow format with y offsets
- const result: PackedRow[] = [];
- let yOffset = 0;
-
- for (const row of rows) {
- result.push({
- nodes: row.nodes.map((n) => n.id),
- height: row.height,
- yOffset,
- width: row.currentWidth,
- });
-
- yOffset += row.height + verticalGap;
- }
-
- return result;
-}
-
-/**
- * Calculate total height of packed rows
- */
-export function getPackedHeight(rows: PackedRow[]): number {
- if (rows.length === 0) return 0;
- const lastRow = rows[rows.length - 1];
- return lastRow.yOffset + lastRow.height;
-}
-
-/**
- * Calculate max width across all packed rows
- */
-export function getPackedWidth(rows: PackedRow[]): number {
- return Math.max(0, ...rows.map((r) => r.width));
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -60x - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -364x -364x -364x -364x - -364x -364x -364x -364x - - -364x - - - - - - - - -30x -98x -98x - -98x -462x -364x -28x -28x -28x -28x - - - - -98x -98x -28x - - - - -98x -30x -70x - - -30x -98x -98x -98x -98x -98x -28x - - - - - - - - -1533x -1533x -1533x -1533x - -1533x -1533x - -1533x - - - - - - - - - - -30x -30x -30x - - -30x -30x - -30x -374x -374x - - - - -30x - - -30x -30x - - - - - - -30x - - - - - - - - -30x -30x - - -30x -30x - -30x - - - - - -30x - -30x -98x - -98x - - - - - - - - - -98x - - - -30x - - - - -30x - -30x -374x -374x - -374x -1533x -203x -189x -189x - - - - -374x -175x -175x - - - - -30x -98x - - -98x - - - - - - -98x -30x - -30x -161x - - - -44x -44x - -98x - - - - - -98x -98x - - - -98x -98x -28x -28x - -98x -14x - -98x - - -98x -98x - - - - - - - - - -30x - -30x - -374x -73x - - - -301x - - - -301x - -301x - - -154x - -154x - -70x - - -70x - - - - - - - - - - - - - - - - - -147x -147x - - - - - - - - - - - - - - - - - - - -30x -30x - - - - - - -30x -30x - - - - - - - - -30x -420x -420x - -420x -420x - - -420x - - - - -420x -420x - -420x -231x -231x - -420x -140x -140x - - - -420x -98x -98x -98x -42x - - - -378x -378x - -378x -378x -280x - -378x -280x - - - - - - -30x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -30x - - - - - - - - - - - - - - - - - - - - - - - -98x -175x -175x - -98x -7x - - - -91x - -91x - -21x -21x -21x - -21x -49x - -49x -49x - -49x -77x -77x - - - -49x -49x - - -49x -49x - - - -21x -21x - - -21x - - -70x -70x - -70x -98x -98x - - - -70x -70x - - -70x - - - - - - - -721x -721x -63x - -721x - - | import type {
- LGraph,
- LGraphNode,
- LGraphGroup,
- LayoutNode,
- LayoutGroup,
- LayoutState,
- LayoutConfig,
- RerouteChain,
-} from "./types";
-import { DEFAULT_CONFIG } from "./types";
-import { classifyNodes } from "./node-classifier";
-import { findRerouteChains, getRerouteNodeIds, getVirtualEdges } from "./reroute-collapse";
-import { getInternalEdges, assignMemberLayers } from "./layout-utils";
-import { debugLog } from "../debug";
-
-/**
- * Runtime subgraph I/O node (has pos/size like regular nodes, not bounding)
- */
-interface RuntimeIONode {
- id: number;
- pos: [number, number];
- size: [number, number];
-}
-
-/**
- * Check if an object looks like a subgraph I/O node at runtime
- * Runtime has pos/size (not bounding like JSON export)
- */
-function isValidIONode(obj: unknown): obj is RuntimeIONode {
- Eif (!obj || typeof obj !== "object") return false;
- const candidate = obj as Record<string, unknown>;
- // Must have numeric id
- if (typeof candidate.id !== "number") return false;
- // Use duck typing - pos/size may be getters returning array-like objects
- const pos = candidate.pos as [number, number] | undefined;
- const size = candidate.size as [number, number] | undefined;
- if (!pos || typeof pos[0] !== "number" || typeof pos[1] !== "number") return false;
- if (!size || typeof size[0] !== "number" || typeof size[1] !== "number") return false;
- return true;
-}
-
-/**
- * Convert runtime I/O node to LGraphNode-like object for layout
- */
-function ioNodeToLGraphNode(ioNode: RuntimeIONode, type: "input" | "output"): LGraphNode {
- return {
- id: ioNode.id,
- type: `subgraph_${type}`,
- title: type === "input" ? "Input" : "Output",
- pos: [ioNode.pos[0], ioNode.pos[1]],
- size: [ioNode.size[0], ioNode.size[1]],
- inputs: [],
- outputs: [],
- };
-}
-
-/** Title bar height for groups */
-const GROUP_TITLE_HEIGHT = 50;
-
-/**
- * Check if outer group's bounds fully contain inner group's bounds
- */
-function groupContainsGroup(outer: LGraphGroup, inner: LGraphGroup): boolean {
- const ox = outer.pos[0];
- const oy = outer.pos[1];
- const ow = outer.size[0];
- const oh = outer.size[1];
-
- const ix = inner.pos[0];
- const iy = inner.pos[1];
- const iw = inner.size[0];
- const ih = inner.size[1];
-
- // Inner's bounds must be fully within outer's bounds
- return ix >= ox && iy >= oy && ix + iw <= ox + ow && iy + ih <= oy + oh;
-}
-
-/**
- * Build parent-child hierarchy for groups based on bounds containment
- * Assigns parentGroup, childGroups, and depth to each LayoutGroup
- */
-function buildGroupHierarchy(layoutGroups: LayoutGroup[]): void {
- // For each group, find its parent (smallest containing group)
- for (const inner of layoutGroups) {
- let bestParent: LayoutGroup | null = null;
- let bestArea = Infinity;
-
- for (const outer of layoutGroups) {
- if (outer === inner) continue;
- if (groupContainsGroup(outer.group, inner.group)) {
- const area = outer.group.size[0] * outer.group.size[1];
- Eif (area < bestArea) {
- bestArea = area;
- bestParent = outer;
- }
- }
- }
-
- inner.parentGroup = bestParent;
- if (bestParent) {
- bestParent.childGroups.push(inner);
- }
- }
-
- // Calculate depths using BFS from roots
- const roots = layoutGroups.filter((g) => !g.parentGroup);
- const queue: Array<{ group: LayoutGroup; depth: number }> = roots.map(
- (g) => ({ group: g, depth: 0 })
- );
-
- while (queue.length > 0) {
- const item = queue.shift();
- Iif (!item) break;
- const { group, depth } = item;
- group.depth = depth;
- for (const child of group.childGroups) {
- queue.push({ group: child, depth: depth + 1 });
- }
- }
-}
-
-/**
- * Check if a node's origin is inside a group's content area
- */
-function nodeInsideGroup(node: LGraphNode, group: LGraphGroup): boolean {
- const gx = group.pos[0];
- const gy = group.pos[1] + GROUP_TITLE_HEIGHT;
- const gw = group.size[0];
- const gh = group.size[1] - GROUP_TITLE_HEIGHT;
-
- const nx = node.pos?.[0] ?? 0;
- const ny = node.pos?.[1] ?? 0;
-
- return nx >= gx && nx < gx + gw && ny >= gy && ny < gy + gh;
-}
-
-/**
- * Build layout graph from ComfyUI graph
- * Groups are treated as "mega-nodes" with full hierarchy support
- */
-export function buildLayoutGraph(
- graph: LGraph,
- config: Partial<LayoutConfig> = {}
-): LayoutState {
- const fullConfig: LayoutConfig = { ...DEFAULT_CONFIG, ...config };
- const nodes = new Map<number, LayoutNode>();
- const groups: LayoutGroup[] = [];
-
- // First pass: Extract all nodes
- const graphNodes = graph._nodes ?? [];
- const allNodes = new Map<number, LGraphNode>();
-
- for (const node of graphNodes) {
- Iif (!node || node.id === undefined) continue;
- allNodes.set(node.id, node);
- }
-
- // Track subgraph I/O nodes separately (they need special position handling)
- // Runtime I/O nodes have pos/size like regular nodes
- const ioNodes = new Map<number, RuntimeIONode>();
-
- // Check for subgraph I/O nodes (Subgraph extends LGraph)
- const graphAny = graph as unknown as Record<string, unknown>;
- Iif (isValidIONode(graphAny.inputNode)) {
- const inputNode = graphAny.inputNode as RuntimeIONode;
- const inputLGraphNode = ioNodeToLGraphNode(inputNode, "input");
- allNodes.set(inputNode.id, inputLGraphNode);
- ioNodes.set(inputNode.id, inputNode);
- debugLog(`Found subgraph input node id=${inputNode.id} at [${inputNode.pos}]`);
- }
- Iif (isValidIONode(graphAny.outputNode)) {
- const outputNode = graphAny.outputNode as RuntimeIONode;
- const outputLGraphNode = ioNodeToLGraphNode(outputNode, "output");
- allNodes.set(outputNode.id, outputLGraphNode);
- ioNodes.set(outputNode.id, outputNode);
- debugLog(`Found subgraph output node id=${outputNode.id} at [${outputNode.pos}]`);
- }
-
- // Classify nodes into connected/disconnected/reroutes
- const classified = classifyNodes(graph);
- const disconnectedNodes = classified.disconnected;
-
- // Find and collapse reroute chains if enabled
- let rerouteChains: RerouteChain[] = [];
- let collapsedRerouteIds = new Set<number>();
-
- Iif (fullConfig.collapseReroutes && classified.reroutes.size > 0) {
- rerouteChains = findRerouteChains(graph, classified.reroutes);
- collapsedRerouteIds = getRerouteNodeIds(rerouteChains);
- }
-
- // Second pass: Create LayoutGroup objects (without hierarchy yet)
- const graphGroups = graph._groups ?? [];
-
- for (const group of graphGroups) {
- Iif (!group || !group.pos || !group.size) continue;
-
- const layoutGroup: LayoutGroup = {
- group,
- memberIds: new Set<number>(),
- childGroups: [],
- parentGroup: null,
- depth: 0,
- width: 0,
- height: 0,
- };
-
- groups.push(layoutGroup);
- }
-
- // Third pass: Build group hierarchy (parent-child relationships)
- buildGroupHierarchy(groups);
-
- // Fourth pass: Assign nodes to their INNERMOST containing group
- // A node belongs only to the deepest group that contains it
- // Membership is determined from original workflow positions (user's design intent)
- const nodeToGroup = new Map<number, LayoutGroup>();
-
- for (const [nodeId, node] of allNodes) {
- let bestGroup: LayoutGroup | null = null;
- let maxDepth = -1;
-
- for (const layoutGroup of groups) {
- if (nodeInsideGroup(node, layoutGroup.group)) {
- if (layoutGroup.depth > maxDepth) {
- maxDepth = layoutGroup.depth;
- bestGroup = layoutGroup;
- }
- }
- }
-
- if (bestGroup) {
- bestGroup.memberIds.add(nodeId);
- nodeToGroup.set(nodeId, bestGroup);
- }
- }
-
- // Log group membership
- for (const layoutGroup of groups) {
- const parentInfo = layoutGroup.parentGroup
- ? ` (inside "${layoutGroup.parentGroup.group.title}")`
- : "";
- debugLog(
- `Group "${layoutGroup.group.title}": ${layoutGroup.memberIds.size} direct members, ${layoutGroup.childGroups.length} child groups${parentInfo}`
- );
- }
-
- // Fifth pass: Calculate group sizes bottom-up (deepest first)
- // Build groupsByDepth array for bottom-up processing
- const maxDepth = Math.max(0, ...groups.map((g) => g.depth));
- const groupsByDepth: LayoutGroup[][] = [];
-
- for (let d = 0; d <= maxDepth; d++) {
- groupsByDepth.push(groups.filter((g) => g.depth === d));
- }
-
- // Process from deepest to shallowest
- for (let depth = maxDepth; depth >= 0; depth--) {
- for (const layoutGroup of groupsByDepth[depth]) {
- // Calculate dimensions based on internal structure
- const { width: memberWidth, height: memberHeight } = calculateGroupMemberDimensions(
- layoutGroup,
- allNodes,
- fullConfig
- );
-
- let totalWidth = memberWidth;
- let totalHeight = memberHeight;
-
- // Include child groups (already calculated in previous iterations)
- // Child groups add to height below members
- let childGroupsHeight = 0;
- for (const child of layoutGroup.childGroups) {
- totalWidth = Math.max(totalWidth, child.width);
- childGroupsHeight += child.height + fullConfig.verticalGap;
- }
- if (memberHeight > 0 && childGroupsHeight > 0) {
- totalHeight += fullConfig.verticalGap; // Gap between members and children
- }
- totalHeight += childGroupsHeight;
-
- // Add padding and title
- layoutGroup.width = totalWidth + fullConfig.groupPadding * 2;
- layoutGroup.height =
- totalHeight + fullConfig.groupPadding * 2 + GROUP_TITLE_HEIGHT;
- }
- }
-
- // Sixth pass: Create LayoutNodes
- // - Standalone connected nodes become regular layout nodes
- // - Top-level groups get a representative node
- // - Nested groups are handled internally by their parent
- // - Disconnected nodes and collapsed reroutes are EXCLUDED (placed separately later)
- const groupRepresentatives = new Map<LayoutGroup, number>();
-
- for (const [id, node] of allNodes) {
- // Skip disconnected nodes - they'll be placed in a separate zone
- if (disconnectedNodes.has(id)) {
- continue;
- }
-
- // Skip collapsed reroute nodes - they'll be restored after layout
- Iif (collapsedRerouteIds.has(id)) {
- continue;
- }
-
- const group = nodeToGroup.get(id);
-
- if (group) {
- // This node is in a group
- // Only create representative for top-level groups
- const topLevelGroup = getTopLevelGroup(group);
-
- if (!groupRepresentatives.has(topLevelGroup)) {
- // First member becomes the representative for the top-level group
- groupRepresentatives.set(topLevelGroup, id);
-
- // Create layout node with TOP-LEVEL GROUP dimensions
- nodes.set(id, {
- node,
- id,
- layer: -1,
- orderInLayer: 0,
- predecessors: [],
- successors: [],
- width: topLevelGroup.width,
- height: topLevelGroup.height,
- x: 0,
- y: 0,
- isGroupRepresentative: true,
- group: topLevelGroup,
- });
- }
- // Skip non-representative group members - they'll be positioned relative to group
- } else {
- // Standalone node (or I/O node)
- const runtimeIONode = ioNodes.get(id);
- nodes.set(id, {
- node,
- id,
- layer: -1,
- orderInLayer: 0,
- predecessors: [],
- successors: [],
- width: node.size?.[0] ?? 200,
- height: node.size?.[1] ?? 100,
- x: 0,
- y: 0,
- isSubgraphIO: runtimeIONode !== undefined,
- runtimeIONode,
- });
- }
- }
-
- // Seventh pass: Build adjacency from links
- // For group members, redirect connections to the top-level group representative
- // Skip links involving collapsed reroutes (handled via virtual edges)
- const links = graph.links;
- Eif (links) {
- // Handle different link storage formats:
- // - Map<number, LLink> (newer ComfyUI)
- // - Record<number, LLink> (object with numeric keys)
- // - LLink[] (array, common in subgraphs)
- let linkEntries: Iterable<[number, { origin_id: number; target_id: number } | null]>;
-
- if (links instanceof Map) {
- linkEntries = links.entries();
- E} else if (Array.isArray(links)) {
- // Array of link objects (subgraph format)
- linkEntries = links.map((link, i) => [i, link] as const);
- } else {
- // Object with numeric keys
- linkEntries = Object.entries(links).map(([k, v]) => [Number(k), v] as const);
- }
-
- for (const [, link] of linkEntries) {
- Iif (!link || typeof link !== "object") continue;
- Iif (typeof link.origin_id !== "number" || typeof link.target_id !== "number") continue;
-
- let sourceId = link.origin_id;
- let targetId = link.target_id;
-
- // Skip links involving collapsed reroutes (handled via virtual edges)
- Iif (collapsedRerouteIds.has(sourceId) || collapsedRerouteIds.has(targetId)) {
- continue;
- }
-
- // Redirect group members to their top-level group representative
- const sourceGroup = nodeToGroup.get(sourceId);
- const targetGroup = nodeToGroup.get(targetId);
-
- if (sourceGroup) {
- const topLevel = getTopLevelGroup(sourceGroup);
- sourceId = groupRepresentatives.get(topLevel)!;
- }
- if (targetGroup) {
- const topLevel = getTopLevelGroup(targetGroup);
- targetId = groupRepresentatives.get(topLevel)!;
- }
-
- // Skip internal group connections (within same top-level group)
- if (sourceGroup && targetGroup) {
- const sourceTop = getTopLevelGroup(sourceGroup);
- const targetTop = getTopLevelGroup(targetGroup);
- if (sourceTop === targetTop) {
- continue;
- }
- }
-
- const sourceNode = nodes.get(sourceId);
- const targetNode = nodes.get(targetId);
-
- Eif (sourceNode && targetNode) {
- if (!sourceNode.successors.includes(targetId)) {
- sourceNode.successors.push(targetId);
- }
- if (!targetNode.predecessors.includes(sourceId)) {
- targetNode.predecessors.push(sourceId);
- }
- }
- }
- }
-
- // Eighth pass: Add virtual edges from collapsed reroute chains
- Iif (rerouteChains.length > 0) {
- const virtualEdges = getVirtualEdges(rerouteChains);
-
- for (const [sourceId, targetIds] of virtualEdges) {
- // Handle group redirection for source
- const sourceGroup = nodeToGroup.get(sourceId);
- let effectiveSourceId = sourceId;
- if (sourceGroup) {
- const topLevel = getTopLevelGroup(sourceGroup);
- effectiveSourceId = groupRepresentatives.get(topLevel)!;
- }
-
- const sourceNode = nodes.get(effectiveSourceId);
- if (!sourceNode) continue;
-
- for (const targetId of targetIds) {
- // Handle group redirection for target
- const targetGroup = nodeToGroup.get(targetId);
- let effectiveTargetId = targetId;
- if (targetGroup) {
- const topLevel = getTopLevelGroup(targetGroup);
- effectiveTargetId = groupRepresentatives.get(topLevel)!;
- }
-
- const targetNode = nodes.get(effectiveTargetId);
- if (!targetNode) continue;
-
- // Skip if same group
- if (sourceGroup && targetGroup) {
- const sourceTop = getTopLevelGroup(sourceGroup);
- const targetTop = getTopLevelGroup(targetGroup);
- if (sourceTop === targetTop) continue;
- }
-
- if (!sourceNode.successors.includes(effectiveTargetId)) {
- sourceNode.successors.push(effectiveTargetId);
- }
- if (!targetNode.predecessors.includes(effectiveSourceId)) {
- targetNode.predecessors.push(effectiveSourceId);
- }
- }
- }
- }
-
- return {
- nodes,
- layers: [],
- groups,
- config: fullConfig,
- nodeToGroup,
- groupRepresentatives,
- allNodes,
- groupsByDepth,
- disconnectedNodes,
- rerouteChains,
- };
-}
-
-/**
- * Calculate group member dimensions based on internal structure
- * For groups with internal connections: uses layer-aware sizing (width = sum of layer widths, height = max layer height)
- * For groups without internal connections: uses simple vertical stacking (width = max, height = sum)
- */
-function calculateGroupMemberDimensions(
- layoutGroup: LayoutGroup,
- allNodes: Map<number, LGraphNode>,
- config: LayoutConfig
-): { width: number; height: number } {
- const memberNodes = [...layoutGroup.memberIds]
- .map((id) => allNodes.get(id))
- .filter((n): n is LGraphNode => n !== undefined);
-
- if (memberNodes.length === 0) {
- return { width: 0, height: 0 };
- }
-
- // Check for internal connections between members
- const edges = getInternalEdges(layoutGroup.memberIds, allNodes);
-
- if (edges.length > 0) {
- // Has internal layers - calculate per-layer dimensions
- const layers = assignMemberLayers(layoutGroup.memberIds, edges, allNodes);
- let totalWidth = 0;
- let maxHeight = 0;
-
- for (const layer of layers) {
- Iif (layer.length === 0) continue;
-
- let layerMaxWidth = 0;
- let layerHeight = 0;
-
- for (const node of layer) {
- layerMaxWidth = Math.max(layerMaxWidth, node.size?.[0] ?? 200);
- layerHeight += (node.size?.[1] ?? 100) + config.verticalGap;
- }
-
- // Remove trailing gap
- Eif (layerHeight > 0) {
- layerHeight -= config.verticalGap;
- }
-
- totalWidth += layerMaxWidth + config.horizontalGap;
- maxHeight = Math.max(maxHeight, layerHeight);
- }
-
- // Remove trailing gap
- Eif (totalWidth > 0) {
- totalWidth -= config.horizontalGap;
- }
-
- return { width: totalWidth, height: maxHeight };
- } else {
- // No internal connections - simple vertical stacking
- let maxWidth = 0;
- let totalHeight = 0;
-
- for (const node of memberNodes) {
- maxWidth = Math.max(maxWidth, node.size?.[0] ?? 200);
- totalHeight += (node.size?.[1] ?? 100) + config.verticalGap;
- }
-
- // Remove trailing gap
- Eif (totalHeight > 0) {
- totalHeight -= config.verticalGap;
- }
-
- return { width: maxWidth, height: totalHeight };
- }
-}
-
-/**
- * Get the top-level group (root of hierarchy) for a given group
- */
-function getTopLevelGroup(group: LayoutGroup): LayoutGroup {
- let current = group;
- while (current.parentGroup) {
- current = current.parentGroup;
- }
- return current;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 | - - - -1x - - - - - - -30x - -30x - - - - -30x -30x - - -30x -44x -98x - - -98x - - - - - -98x -98x -98x -98x - - -98x -175x -175x - -175x -175x -175x -175x - -175x -175x -175x -175x - - - -98x -28x -28x -28x -28x -28x - -28x -28x -28x -28x - - - -98x - - - - - -98x -98x -98x -98x -98x - -98x - - - - -98x - -98x - - - -30x - - - - - - - - - - - - - -98x -98x -98x - -98x -98x -98x - - - -98x - - - -98x - - - -98x - - - - - -98x - - - - - - - - -98x -98x - - - - - - - | import type { LayoutState, LGraphGroup } from "./types";
-import { debugLog } from "../debug";
-
-/** Title bar height for groups */
-const GROUP_TITLE_HEIGHT = 50;
-
-/**
- * Resize groups to fit their contents after layout
- * Uses bottom-up processing: deepest groups first, then parents
- */
-export function resizeGroupsToFit(state: LayoutState): number {
- const { groupsByDepth, allNodes, config } = state;
-
- Iif (!groupsByDepth || !allNodes) {
- debugLog("Missing groupsByDepth or allNodes");
- return 0;
- }
-
- let resizedCount = 0;
- const maxDepth = groupsByDepth.length - 1;
-
- // Process from deepest to shallowest (bottom-up)
- for (let depth = maxDepth; depth >= 0; depth--) {
- for (const layoutGroup of groupsByDepth[depth]) {
- const { group, memberIds, childGroups } = layoutGroup;
-
- // Skip groups with no content
- Iif (memberIds.size === 0 && childGroups.length === 0) {
- debugLog(`Skipping empty group "${group.title}"`);
- continue;
- }
-
- // Calculate bounding box from positioned members and child groups
- let minX = Infinity;
- let minY = Infinity;
- let maxX = -Infinity;
- let maxY = -Infinity;
-
- // Include direct member nodes
- for (const nodeId of memberIds) {
- const node = allNodes.get(nodeId);
- Iif (!node) continue;
-
- const nx = node.pos?.[0] ?? 0;
- const ny = node.pos?.[1] ?? 0;
- const nw = node.size?.[0] ?? 200;
- const nh = node.size?.[1] ?? 100;
-
- minX = Math.min(minX, nx);
- minY = Math.min(minY, ny);
- maxX = Math.max(maxX, nx + nw);
- maxY = Math.max(maxY, ny + nh);
- }
-
- // Include child groups (already resized in previous iterations)
- for (const child of childGroups) {
- const cg = child.group;
- const cx = cg.pos[0];
- const cy = cg.pos[1];
- const cw = cg.size[0];
- const ch = cg.size[1];
-
- minX = Math.min(minX, cx);
- minY = Math.min(minY, cy);
- maxX = Math.max(maxX, cx + cw);
- maxY = Math.max(maxY, cy + ch);
- }
-
- // Handle empty bounds (shouldn't happen but be safe)
- Iif (minX === Infinity) {
- debugLog(`No content bounds for group "${group.title}"`);
- continue;
- }
-
- // Calculate final group bounds with padding
- const padding = config.groupPadding;
- const newX = minX - padding;
- const newY = minY - padding - GROUP_TITLE_HEIGHT;
- const newWidth = maxX - minX + padding * 2;
- const newHeight = maxY - minY + padding * 2 + GROUP_TITLE_HEIGHT;
-
- debugLog(
- `Resizing group "${group.title}" (depth ${layoutGroup.depth}) to [${newX}, ${newY}, ${newWidth}, ${newHeight}]`
- );
-
- // Update group bounds
- updateGroupBounds(group, newX, newY, newWidth, newHeight);
-
- resizedCount++;
- }
- }
-
- return resizedCount;
-}
-
-/**
- * Update group bounds using multiple methods for compatibility
- */
-function updateGroupBounds(
- group: LGraphGroup,
- x: number,
- y: number,
- width: number,
- height: number
-): void {
- // Method 1: Direct pos/size array mutation (most common)
- Eif (Array.isArray(group.pos)) {
- group.pos[0] = x;
- group.pos[1] = y;
- }
- Eif (Array.isArray(group.size)) {
- group.size[0] = width;
- group.size[1] = height;
- }
-
- // Method 2: Try _pos/_size internal properties
- const g = group as LGraphGroup & {
- _pos?: [number, number];
- _size?: [number, number];
- };
- Iif (Array.isArray(g._pos)) {
- g._pos[0] = x;
- g._pos[1] = y;
- }
- Iif (Array.isArray(g._size)) {
- g._size[0] = width;
- g._size[1] = height;
- }
-
- // Method 3: Update _bounding Rectangle if present
- Iif (group._bounding) {
- const b = group._bounding;
- b.x = x;
- b.y = y;
- b.width = width;
- b.height = height;
- }
-
- // Method 4: Try bounding array (older format)
- const gAny = group as LGraphGroup & { bounding?: number[] };
- Iif (Array.isArray(gAny.bounding)) {
- gAny.bounding[0] = x;
- gAny.bounding[1] = y;
- gAny.bounding[2] = width;
- gAny.bounding[3] = height;
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| bin-pack.ts | -
-
- |
- 60% | -45/75 | -56.66% | -17/30 | -52.94% | -9/17 | -63.63% | -42/66 | -
| graph-builder.ts | -
-
- |
- 74.29% | -185/249 | -59.87% | -97/162 | -81.25% | -13/16 | -78.07% | -178/228 | -
| groups.ts | -
-
- |
- 74.02% | -57/77 | -56.25% | -18/32 | -100% | -2/2 | -74.66% | -56/75 | -
| index.ts | -
-
- |
- 91.66% | -22/24 | -60% | -6/10 | -50% | -1/2 | -95.65% | -22/23 | -
| layer-assign.ts | -
-
- |
- 96% | -48/50 | -77.77% | -14/18 | -100% | -5/5 | -95.83% | -46/48 | -
| layout-utils.ts | -
-
- |
- 94.64% | -53/56 | -69.44% | -25/36 | -100% | -3/3 | -98.11% | -52/53 | -
| node-classifier.ts | -
-
- |
- 69.44% | -25/36 | -46.87% | -15/32 | -100% | -2/2 | -75% | -24/32 | -
| ordering.ts | -
-
- |
- 95.74% | -90/94 | -66% | -33/50 | -100% | -14/14 | -96.34% | -79/82 | -
| positioning.ts | -
-
- |
- 84.93% | -310/365 | -64.54% | -142/220 | -100% | -27/27 | -87.27% | -288/330 | -
| types.ts | -
-
- |
- 100% | -1/1 | -100% | -0/0 | -100% | -0/0 | -100% | -1/1 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31x -31x - - -31x -31x -1x - - - - - - - - -30x - - -30x - - -30x - - -30x -30x - - - -30x - - -30x - - -30x - - -30x - - - -30x - - -30x - - - -30x - - -30x -31x -31x - -31x - - - -31x - - - - - - - - - - - | import type { LGraph, LayoutConfig, LayoutResult } from "./types";
-import { DEFAULT_CONFIG } from "./types";
-import { buildLayoutGraph } from "./graph-builder";
-import { assignLayers } from "./layer-assign";
-import { minimizeCrossings } from "./ordering";
-import {
- assignLayerXPositions,
- assignNodeYPositions,
- recalculateLayerXPositions,
- applyPositions,
- compactVertically,
- resolveAllOverlaps,
-} from "./positioning";
-import { resizeGroupsToFit } from "./groups";
-import { debugLog } from "../debug";
-
-/**
- * Main entry point: layout the entire graph
- *
- * Pipeline:
- * 1. Build layout graph (classify nodes, collapse reroutes, filter disconnected)
- * 2. Assign layers via longest-path algorithm
- * 3. Minimize edge crossings via size-aware barycenter heuristic
- * 4. Assign X/Y coordinates with bin packing
- * 5. Compact vertically to reduce gaps
- * 6. Apply positions (includes disconnected zone and reroute restoration)
- * 7. Resize groups to fit their members
- */
-export function layoutGraph(
- graph: LGraph,
- config?: Partial<LayoutConfig>
-): LayoutResult {
- const startTime = performance.now();
- const fullConfig: LayoutConfig = { ...DEFAULT_CONFIG, ...config };
-
- // Handle empty graph
- const nodeList = graph._nodes ?? [];
- if (nodeList.length === 0) {
- return {
- nodeCount: 0,
- layerCount: 0,
- groupCount: 0,
- executionMs: 0,
- };
- }
-
- // Phase 1: Build layout graph (includes classification and reroute collapse)
- const state = buildLayoutGraph(graph, fullConfig);
-
- // Phase 2: Assign layers
- assignLayers(state);
-
- // Phase 3: Minimize crossings (size-aware barycenter)
- minimizeCrossings(state);
-
- // Phase 4: Assign coordinates (with bin packing)
- assignLayerXPositions(state);
- assignNodeYPositions(state);
-
- // Phase 4b: Recalculate X after bin packing updates maxWidth
- // (bin packing may place multiple nodes in a row, making layer wider)
- recalculateLayerXPositions(state);
-
- // Phase 5: Compact vertically
- compactVertically(state);
-
- // Phase 6: Apply to ComfyUI nodes (includes disconnected and reroute handling)
- applyPositions(state);
-
- // Phase 7: Resize groups
- const groupCount = resizeGroupsToFit(state);
-
- // Phase 8: Resolve all overlaps (groups + nodes unified)
- // Uses scanline algorithm with priority-based monotonic pushing
- resolveAllOverlaps(state);
-
- // Trigger canvas redraw
- Iif (graph.setDirtyCanvas) {
- graph.setDirtyCanvas(true, true);
- }
-
- const executionMs = performance.now() - startTime;
-
- // Count total nodes including disconnected and reroutes
- const disconnectedCount = state.disconnectedNodes?.size ?? 0;
- const rerouteCount = state.rerouteChains?.reduce((sum, c) => sum + c.nodes.length, 0) ?? 0;
- const totalNodes = state.nodes.size + disconnectedCount + rerouteCount;
-
- debugLog(
- `Layout complete: ${totalNodes} nodes (${state.nodes.size} in DAG, ${disconnectedCount} disconnected, ${rerouteCount} reroutes), ${state.layers.length} layers in ${executionMs.toFixed(1)}ms`
- );
-
- return {
- nodeCount: totalNodes,
- layerCount: state.layers.length,
- groupCount,
- executionMs,
- };
-}
-
-// Re-export types and config
-export type { LayoutConfig, LayoutResult } from "./types";
-export { DEFAULT_CONFIG } from "./types";
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 | - - - - - - - -30x - - -30x -30x -30x - - -30x -217x -217x -63x - - - - -30x -217x -217x - -217x -217x -280x -280x -280x -154x - - - - - -30x -217x - - - - - -30x -217x - -217x - -63x - - -154x -154x -280x -280x -280x - - -154x - - - - -30x -217x - - - - - -30x -30x -217x -217x -217x - - - -196x -30x - -30x -154x - -154x -154x -217x - - -154x - - - -217x - - - -30x - - | import type { LayoutState, LayoutNode, Layer } from "./types";
-
-/**
- * Assign layers to nodes using longest-path algorithm
- * Sources (no predecessors) get layer 0
- * Each node gets max(predecessor layers) + 1
- */
-export function assignLayers(state: LayoutState): void {
- const { nodes } = state;
-
- // Topological sort via Kahn's algorithm
- const inDegree = new Map<number, number>();
- const queue: number[] = [];
- const order: number[] = [];
-
- // Initialize in-degrees
- for (const [id, node] of nodes) {
- inDegree.set(id, node.predecessors.length);
- if (node.predecessors.length === 0) {
- queue.push(id);
- }
- }
-
- // Process nodes in topological order
- while (queue.length > 0) {
- const nodeId = queue.shift()!;
- order.push(nodeId);
-
- const node = nodes.get(nodeId)!;
- for (const succId of node.successors) {
- const deg = (inDegree.get(succId) ?? 1) - 1;
- inDegree.set(succId, deg);
- if (deg === 0) {
- queue.push(succId);
- }
- }
- }
-
- // Handle cycles: add remaining nodes (shouldn't happen in valid DAG)
- for (const [id] of nodes) {
- Iif (!order.includes(id)) {
- order.push(id);
- }
- }
-
- // Assign layers via longest path from sources
- for (const nodeId of order) {
- const node = nodes.get(nodeId)!;
-
- if (node.predecessors.length === 0) {
- // Source node: layer 0
- node.layer = 0;
- } else {
- // Max layer of predecessors + 1
- let maxPredLayer = 0;
- for (const predId of node.predecessors) {
- const pred = nodes.get(predId);
- Eif (pred && pred.layer >= 0) {
- maxPredLayer = Math.max(maxPredLayer, pred.layer + 1);
- }
- }
- node.layer = maxPredLayer;
- }
- }
-
- // Ensure all nodes have valid layer (handle edge cases)
- for (const node of nodes.values()) {
- Iif (node.layer < 0) {
- node.layer = 0;
- }
- }
-
- // Build layer structures
- const layerMap = new Map<number, LayoutNode[]>();
- for (const node of nodes.values()) {
- const arr = layerMap.get(node.layer) ?? [];
- arr.push(node);
- layerMap.set(node.layer, arr);
- }
-
- // Sort layers by index and create Layer objects
- const sortedLayerIndices = [...layerMap.keys()].sort((a, b) => a - b);
- const layers: Layer[] = [];
-
- for (const index of sortedLayerIndices) {
- const layerNodes = layerMap.get(index)!;
- // Sort nodes in layer by ID for initial deterministic order
- layerNodes.sort((a, b) => a.id - b.id);
- layerNodes.forEach((n, i) => {
- n.orderInLayer = i;
- });
-
- layers.push({
- index,
- nodes: layerNodes,
- x: 0,
- maxWidth: Math.max(...layerNodes.map((n) => n.width), 100),
- });
- }
-
- state.layers = layers;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 | - - - - - - - - - -189x - - -189x -189x -350x -350x - -350x -490x -406x -462x - - - - - - -189x -350x -350x - -350x -308x -280x -280x -84x - - - - - -189x - - - - - - - - - - - - -42x -42x - -42x -154x -154x - - -42x -84x -84x - - - -42x -42x - - -42x -154x -70x -70x - - - -42x -154x -154x - -154x - -84x -84x - - -84x -84x -84x -84x - - - - - -42x -154x - - - - - -42x -98x - -42x -154x -154x -154x -154x - - - -42x - - | import type { LGraphNode } from "./types";
-
-/**
- * Get internal edges between group members by examining node connections
- * Returns array of [sourceId, targetId] pairs where both are in the group
- */
-export function getInternalEdges(
- memberIds: Set<number>,
- allNodes: Map<number, LGraphNode>
-): Array<[number, number]> {
- const edges: Array<[number, number]> = [];
-
- // Build a map of linkId -> sourceNodeId for all member outputs
- const linkToSource = new Map<number, number>();
- for (const memberId of memberIds) {
- const node = allNodes.get(memberId);
- Iif (!node?.outputs) continue;
-
- for (const output of node.outputs) {
- if (output.links) {
- for (const linkId of output.links) {
- linkToSource.set(linkId, memberId);
- }
- }
- }
- }
-
- // Check each member's inputs to find internal connections
- for (const memberId of memberIds) {
- const node = allNodes.get(memberId);
- Iif (!node?.inputs) continue;
-
- for (const input of node.inputs) {
- if (input.link !== null && input.link !== undefined) {
- const sourceId = linkToSource.get(input.link);
- if (sourceId !== undefined && memberIds.has(sourceId)) {
- edges.push([sourceId, memberId]);
- }
- }
- }
- }
-
- return edges;
-}
-
-/**
- * Assign layers to group members using longest-path algorithm
- * Returns members grouped by layer (index 0 = sources)
- */
-export function assignMemberLayers(
- memberIds: Set<number>,
- edges: Array<[number, number]>,
- allNodes: Map<number, LGraphNode>
-): LGraphNode[][] {
- // Build adjacency and in-degree
- const successors = new Map<number, number[]>();
- const inDegree = new Map<number, number>();
-
- for (const id of memberIds) {
- successors.set(id, []);
- inDegree.set(id, 0);
- }
-
- for (const [source, target] of edges) {
- successors.get(source)!.push(target);
- inDegree.set(target, (inDegree.get(target) ?? 0) + 1);
- }
-
- // Longest-path layer assignment via topological sort
- const nodeLayer = new Map<number, number>();
- const queue: number[] = [];
-
- // Start with sources (in-degree 0)
- for (const id of memberIds) {
- if ((inDegree.get(id) ?? 0) === 0) {
- queue.push(id);
- nodeLayer.set(id, 0);
- }
- }
-
- while (queue.length > 0) {
- const current = queue.shift()!;
- const currentLayer = nodeLayer.get(current) ?? 0;
-
- for (const succ of successors.get(current) ?? []) {
- // Update successor layer to max of current paths
- const succLayer = nodeLayer.get(succ) ?? 0;
- nodeLayer.set(succ, Math.max(succLayer, currentLayer + 1));
-
- // Decrease in-degree and add to queue when all predecessors processed
- const newInDegree = (inDegree.get(succ) ?? 1) - 1;
- inDegree.set(succ, newInDegree);
- Eif (newInDegree === 0) {
- queue.push(succ);
- }
- }
- }
-
- // Handle any unvisited nodes (cycles or disconnected)
- for (const id of memberIds) {
- Iif (!nodeLayer.has(id)) {
- nodeLayer.set(id, 0);
- }
- }
-
- // Group by layer
- const maxLayer = Math.max(...nodeLayer.values(), 0);
- const layers: LGraphNode[][] = Array.from({ length: maxLayer + 1 }, () => []);
-
- for (const id of memberIds) {
- const node = allNodes.get(id);
- Eif (node) {
- const layer = nodeLayer.get(id) ?? 0;
- layers[layer].push(node);
- }
- }
-
- return layers;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 | - - - - - - - - -30x -30x -420x - - - - - - - - - - - - - - - - - - - - -30x - - -30x -30x -420x -420x - -420x -420x - - - - -30x -30x -30x - -30x -30x -374x - -374x - - - -374x - -374x - - - - - -374x -301x - -73x - - - -30x - - - -30x - - | import type { LGraph, LLink, ClassifiedNodes } from "./types";
-import { debugLog } from "../debug";
-
-/**
- * Iterate over links in a graph (handles Map, Record, and Array formats)
- */
-function* iterateLinks(
- links: Map<number, LLink> | Record<number, LLink> | LLink[]
-): Generator<LLink> {
- if (links instanceof Map) {
- for (const link of links.values()) {
- Eif (link) yield link;
- }
- E} else if (Array.isArray(links)) {
- for (const link of links) {
- if (link) yield link;
- }
- } else {
- for (const link of Object.values(links)) {
- if (link) yield link;
- }
- }
-}
-
-/**
- * Classify nodes into connected, disconnected, and reroutes
- *
- * - connected: nodes with at least one link
- * - disconnected: nodes with no links (annotations, bookmarks, etc.)
- * - reroutes: nodes with type "Reroute" (handled separately for chain collapse)
- */
-export function classifyNodes(graph: LGraph): ClassifiedNodes {
- const hasLinks = new Set<number>();
-
- // Mark all nodes that appear in any link
- Eif (graph.links) {
- for (const link of iterateLinks(graph.links)) {
- Eif (typeof link.origin_id === "number") {
- hasLinks.add(link.origin_id);
- }
- Eif (typeof link.target_id === "number") {
- hasLinks.add(link.target_id);
- }
- }
- }
-
- const connected = new Set<number>();
- const disconnected = new Set<number>();
- const reroutes = new Set<number>();
-
- const nodes = graph._nodes ?? [];
- for (const node of nodes) {
- Iif (!node || node.id === undefined) continue;
-
- const nodeType = node.type ?? "";
-
- // Check if this is a reroute node
- // Common reroute types: "Reroute", "Reroute (rgthree)", etc.
- const isReroute = nodeType === "Reroute" || nodeType.startsWith("Reroute ");
-
- Iif (isReroute) {
- reroutes.add(node.id);
- // Reroutes are also tracked as connected if they have links
- if (hasLinks.has(node.id)) {
- connected.add(node.id);
- }
- } else if (hasLinks.has(node.id)) {
- connected.add(node.id);
- } else {
- disconnected.add(node.id);
- }
- }
-
- debugLog(
- `Classified: ${connected.size} connected, ${disconnected.size} disconnected, ${reroutes.size} reroutes`
- );
-
- return { connected, disconnected, reroutes };
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 | - - - - - - - -30x - -30x - - -28x -154x -154x -217x - - - - -28x -28x - - -28x - -42x - - - -42x - - - - - - - - - - - - -28x -154x -154x - -217x -217x - - - - - - - - - - - - - - -28x - -28x -126x - - -126x - -126x -154x -154x -154x - -154x -280x -280x - -175x -175x -175x - - - -154x -154x - - - - - - - - - -154x -126x -42x -42x -42x -42x - - - -126x -154x - - - -126x -126x -154x -154x - - -154x -126x - - -126x - - - - - - - - - - - - -14x - -14x -70x - - -70x - -70x -126x -126x -126x - -126x -189x -189x - -119x -119x -119x - - - -126x -98x - -28x - - - - - - - -126x -70x -56x -56x -56x -56x - - - -70x -126x - - - -70x -70x -126x -126x - - -126x -70x - - -70x - - | import type { LayoutState, Layer, LayoutNode } from "./types";
-
-/**
- * Minimize edge crossings using size-aware barycenter heuristic
- * Uses cumulative height positions instead of simple indices
- * Alternates forward and backward sweeps
- */
-export function minimizeCrossings(state: LayoutState): void {
- const { layers, nodes, config } = state;
-
- if (layers.length < 2) return;
-
- // Initial ordering: sort by node height (tall nodes first reduces gaps)
- for (const layer of layers) {
- layer.nodes.sort((a, b) => b.height - a.height);
- layer.nodes.forEach((n, i) => {
- n.orderInLayer = i;
- });
- }
-
- // Pre-compute cumulative height positions for size-aware barycenter
- const heightPositions = new Map<number, number>();
- updateHeightPositions(layers, heightPositions, config.verticalGap);
-
- // Iterative improvement with forward/backward sweeps
- for (let iter = 0; iter < config.maxIterations; iter++) {
- const improved =
- iter % 2 === 0
- ? sweepForward(layers, nodes, heightPositions, config.verticalGap)
- : sweepBackward(layers, nodes, heightPositions, config.verticalGap);
-
- if (!improved) break;
- }
-}
-
-/**
- * Compute cumulative height positions for each node
- * This gives a position-like weight for size-aware ordering
- */
-function updateHeightPositions(
- layers: Layer[],
- positions: Map<number, number>,
- verticalGap: number
-): void {
- for (const layer of layers) {
- let y = 0;
- for (const node of layer.nodes) {
- // Position is center of node
- positions.set(node.id, y + node.height / 2);
- y += node.height + verticalGap;
- }
- }
-}
-
-/**
- * Forward sweep: order each layer based on predecessors in previous layer
- * Uses height-aware positions for better size consideration
- */
-function sweepForward(
- layers: Layer[],
- nodes: Map<number, LayoutNode>,
- heightPositions: Map<number, number>,
- verticalGap: number
-): boolean {
- let improved = false;
-
- for (let i = 1; i < layers.length; i++) {
- const currLayer = layers[i];
-
- // Compute size-aware barycenter for each node
- const barycenters = new Map<number, number>();
-
- for (const node of currLayer.nodes) {
- if (node.predecessors.length > 0) {
- let sum = 0;
- let count = 0;
-
- for (const predId of node.predecessors) {
- const pred = nodes.get(predId);
- if (pred && pred.layer === i - 1) {
- // Use height position instead of simple index
- const pos = heightPositions.get(predId) ?? pred.orderInLayer;
- sum += pos;
- count++;
- }
- }
-
- if (count > 0) {
- barycenters.set(node.id, sum / count);
- } else E{
- barycenters.set(node.id, heightPositions.get(node.id) ?? 0);
- }
- } else E{
- barycenters.set(node.id, heightPositions.get(node.id) ?? 0);
- }
- }
-
- // Sort by barycenter, tie-break by ID for determinism
- const oldOrder = currLayer.nodes.map((n) => n.id).join(",");
- currLayer.nodes.sort((a, b) => {
- const aBar = barycenters.get(a.id) ?? 0;
- const bBar = barycenters.get(b.id) ?? 0;
- const diff = aBar - bBar;
- return diff !== 0 ? diff : a.id - b.id;
- });
-
- // Reassign integer order
- currLayer.nodes.forEach((n, idx) => {
- n.orderInLayer = idx;
- });
-
- // Update height positions for next iteration
- let y = 0;
- for (const node of currLayer.nodes) {
- heightPositions.set(node.id, y + node.height / 2);
- y += node.height + verticalGap;
- }
-
- const newOrder = currLayer.nodes.map((n) => n.id).join(",");
- if (oldOrder !== newOrder) improved = true;
- }
-
- return improved;
-}
-
-/**
- * Backward sweep: order each layer based on successors in next layer
- * Uses height-aware positions for better size consideration
- */
-function sweepBackward(
- layers: Layer[],
- nodes: Map<number, LayoutNode>,
- heightPositions: Map<number, number>,
- verticalGap: number
-): boolean {
- let improved = false;
-
- for (let i = layers.length - 2; i >= 0; i--) {
- const currLayer = layers[i];
-
- // Compute size-aware barycenter for each node based on successors
- const barycenters = new Map<number, number>();
-
- for (const node of currLayer.nodes) {
- if (node.successors.length > 0) {
- let sum = 0;
- let count = 0;
-
- for (const succId of node.successors) {
- const succ = nodes.get(succId);
- if (succ && succ.layer === i + 1) {
- // Use height position instead of simple index
- const pos = heightPositions.get(succId) ?? succ.orderInLayer;
- sum += pos;
- count++;
- }
- }
-
- if (count > 0) {
- barycenters.set(node.id, sum / count);
- } else {
- barycenters.set(node.id, heightPositions.get(node.id) ?? 0);
- }
- } else E{
- barycenters.set(node.id, heightPositions.get(node.id) ?? 0);
- }
- }
-
- // Sort by barycenter, tie-break by ID for determinism
- const oldOrder = currLayer.nodes.map((n) => n.id).join(",");
- currLayer.nodes.sort((a, b) => {
- const aBar = barycenters.get(a.id) ?? 0;
- const bBar = barycenters.get(b.id) ?? 0;
- const diff = aBar - bBar;
- return diff !== 0 ? diff : a.id - b.id;
- });
-
- // Reassign integer order
- currLayer.nodes.forEach((n, idx) => {
- n.orderInLayer = idx;
- });
-
- // Update height positions for next iteration
- let y = 0;
- for (const node of currLayer.nodes) {
- heightPositions.set(node.id, y + node.height / 2);
- y += node.height + verticalGap;
- }
-
- const newOrder = currLayer.nodes.map((n) => n.id).join(",");
- Iif (oldOrder !== newOrder) improved = true;
- }
-
- return improved;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 -567 -568 -569 -570 -571 -572 -573 -574 -575 -576 -577 -578 -579 -580 -581 -582 -583 -584 -585 -586 -587 -588 -589 -590 -591 -592 -593 -594 -595 -596 -597 -598 -599 -600 -601 -602 -603 -604 -605 -606 -607 -608 -609 -610 -611 -612 -613 -614 -615 -616 -617 -618 -619 -620 -621 -622 -623 -624 -625 -626 -627 -628 -629 -630 -631 -632 -633 -634 -635 -636 -637 -638 -639 -640 -641 -642 -643 -644 -645 -646 -647 -648 -649 -650 -651 -652 -653 -654 -655 -656 -657 -658 -659 -660 -661 -662 -663 -664 -665 -666 -667 -668 -669 -670 -671 -672 -673 -674 -675 -676 -677 -678 -679 -680 -681 -682 -683 -684 -685 -686 -687 -688 -689 -690 -691 -692 -693 -694 -695 -696 -697 -698 -699 -700 -701 -702 -703 -704 -705 -706 -707 -708 -709 -710 -711 -712 -713 -714 -715 -716 -717 -718 -719 -720 -721 -722 -723 -724 -725 -726 -727 -728 -729 -730 -731 -732 -733 -734 -735 -736 -737 -738 -739 -740 -741 -742 -743 -744 -745 -746 -747 -748 -749 -750 -751 -752 -753 -754 -755 -756 -757 -758 -759 -760 -761 -762 -763 -764 -765 -766 -767 -768 -769 -770 -771 -772 -773 -774 -775 -776 -777 -778 -779 -780 -781 -782 -783 -784 -785 -786 -787 -788 -789 -790 -791 -792 -793 -794 -795 -796 -797 -798 -799 -800 -801 -802 -803 -804 | - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - -60x - -60x -14x - - -46x -46x -146x -146x -146x - - -46x - - - - - - - -30x -30x - -30x -30x -154x -154x - - - - - - - - - -30x -30x - - -30x -30x -154x -217x - - - - -30x -30x -154x -154x - - - -30x -154x -217x -217x - - - - - - - - - - -30x - - -30x - -30x - -217x -217x - -154x -154x - - -154x -70x -70x -70x -70x - - - -154x - -112x -112x -147x - - - -147x -112x - -112x - - -112x -126x -126x - - -126x -14x - - - - -126x -189x -147x -147x -147x -147x - - - - - -112x -112x -14x - - - - -30x - - - - - - - -30x - -30x -7x - - - -23x -23x -73x -21x - -52x - - -23x - - - - - -23x -23x -52x -52x -52x - - - - - - - -23x - - - - - -23x -23x - -23x -52x -52x -52x - -52x - - -52x -52x - - - - -23x - - - - - - - - - - -30x - - -30x -217x - -70x - - - -147x - - - - - - - - -147x - - -147x - - - - -147x -147x -147x - - - - -30x - -98x - -30x -70x -70x - -70x -70x - - -70x -70x - -70x - - - - -30x - - -30x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -98x -98x -175x -175x -175x -175x - - - -98x - - - -98x - - -98x - -98x - -98x -91x - -21x - -21x -21x -49x -49x - - -49x - -49x -49x - -49x -77x -77x -77x -77x - - -77x -77x - - -49x -49x - - - - -70x - - -70x -70x -98x - - - - - - -98x -70x - -70x -70x -98x -98x -98x -98x -98x -98x -98x -98x - - -98x - -70x - - - - -98x - -28x -28x - - -28x - - -28x -28x -28x -28x - - -28x - - -98x - - - - - - - - -266x - -266x -266x - -266x -364x -364x - - -266x -266x - - - - - - - - -30x - - - -30x - -30x -217x - -154x - -42x - - -112x -112x - -112x -112x - - - -30x - - -28x -154x - -154x -154x - -154x -154x - -154x -217x - - - - - - - - - -30x -30x - -30x - - -30x -98x -70x -98x -98x - - - - - - - - - - - - - - - -30x -374x -199x - -199x -374x -374x -374x - - - - - - - - - - - - - -30x - - - - - - - - - - - - - -29x -29x -29x - -29x -29x -36x -36x - - -624x - -36x -331x - -331x -1485x - - - -1485x - -1485x - - -1141x -1141x - -7x -7x -7x -7x -7x - - - - - -29x -7x - -29x - - - - - - - - - - - - - -29x -29x -29x - -29x -29x -29x -29x - - -624x - -29x -268x - -268x -1233x - - - -1233x - -1233x - - -106x -106x - - - - - - - - - - - -29x - - -29x - - - - - - - - - - - - -7x -7x -7x -7x -7x - - - -7x - - - - - - - - - - - - - - - - - -7x -7x -7x -7x - -7x - - - - - - - - - - - -29x -268x -268x - - -268x - -7x - -7x -7x -7x - - -7x -14x -14x -14x -14x - - - -7x - - - - - - - - - - - - - - - -30x -30x - -30x -30x -1x -1x - - - -29x - - -29x - - -29x - -29x - - | import type { LayoutState, LayoutGroup, LGraphNode, LGraphGroup, LayoutConfig, PackedRow, LayoutNode } from "./types";
-
-/**
- * Entity type for unified overlap resolution
- * Represents either a group or a standalone node
- */
-interface LayoutEntity {
- id: string;
- type: "group" | "node";
- priority: number;
- x: number;
- y: number;
- width: number;
- height: number;
- initialX: number; // Original position before overlap resolution
- initialY: number; // Original position before overlap resolution
- group?: LGraphGroup;
- node?: LGraphNode;
- layoutGroup?: LayoutGroup;
-}
-import { packNodesIntoRows, getPackedWidth } from "./bin-pack";
-import { restoreReroutePositions } from "./reroute-collapse";
-import { getInternalEdges, assignMemberLayers } from "./layout-utils";
-import { debugLog } from "../debug";
-
-/** Title bar height for groups */
-const GROUP_TITLE_HEIGHT = 50;
-
-/**
- * Calculate disconnected zone width if there are disconnected nodes
- */
-function getDisconnectedZoneWidth(state: LayoutState): number {
- const { disconnectedNodes, allNodes, config } = state;
-
- if (!disconnectedNodes || disconnectedNodes.size === 0 || !allNodes) {
- return 0;
- }
-
- let maxWidth = 0;
- for (const nodeId of disconnectedNodes) {
- const node = allNodes.get(nodeId);
- Eif (node) {
- maxWidth = Math.max(maxWidth, node.size?.[0] ?? 200);
- }
- }
- return maxWidth + config.disconnectedGap;
-}
-
-/**
- * Assign X coordinates to layers
- * Accounts for disconnected zone on the left if present
- */
-export function assignLayerXPositions(state: LayoutState): void {
- const { layers, config } = state;
- const disconnectedZoneWidth = getDisconnectedZoneWidth(state);
-
- let x = config.startX + disconnectedZoneWidth;
- for (const layer of layers) {
- layer.x = x;
- x += layer.maxWidth + config.horizontalGap;
- }
-}
-
-/**
- * Recalculate layer X positions after bin packing updates maxWidth
- * Also updates node X positions to maintain their offset within each layer
- * Must be called AFTER assignNodeYPositions which updates layer.maxWidth
- */
-export function recalculateLayerXPositions(state: LayoutState): void {
- const { layers, config } = state;
- const disconnectedZoneWidth = getDisconnectedZoneWidth(state);
-
- // Store each node's offset from its layer's current X
- const nodeOffsets = new Map<number, number>();
- for (const layer of layers) {
- for (const node of layer.nodes) {
- nodeOffsets.set(node.id, node.x - layer.x);
- }
- }
-
- // Recalculate layer X positions using updated maxWidth
- let x = config.startX + disconnectedZoneWidth;
- for (const layer of layers) {
- layer.x = x;
- x += layer.maxWidth + config.horizontalGap;
- }
-
- // Update node X positions based on new layer X + original offset
- for (const layer of layers) {
- for (const node of layer.nodes) {
- const offset = nodeOffsets.get(node.id) ?? 0;
- node.x = layer.x + offset;
- }
- }
-}
-
-/**
- * Assign Y coordinates to nodes within each layer using bin packing
- * Supports multi-column layout based on config.maxColumns
- * Tracks reserved regions to prevent group/node overlaps within same layer
- */
-export function assignNodeYPositions(state: LayoutState): void {
- const { layers, config } = state;
-
- // Store packed rows for reference
- const packedRows = new Map<number, PackedRow[]>();
-
- for (const layer of layers) {
- // Separate groups (placed first, full width) from standalone nodes
- const groupNodes = layer.nodes.filter((n) => n.isGroupRepresentative);
- const standaloneNodes = layer.nodes.filter((n) => !n.isGroupRepresentative);
-
- let y = config.startY;
- const reservedRegions: Array<{ top: number; bottom: number }> = [];
-
- // Position groups first, tracking their Y regions
- for (const node of groupNodes) {
- node.x = layer.x;
- node.y = y;
- reservedRegions.push({ top: y, bottom: y + node.height });
- y += node.height + config.verticalGap;
- }
-
- // Bin pack standalone nodes, avoiding reserved regions
- if (standaloneNodes.length > 0) {
- // Build size map for bin packing
- const sizes = new Map<number, { width: number; height: number }>();
- for (const node of standaloneNodes) {
- sizes.set(node.id, { width: node.width, height: node.height });
- }
-
- // Pack nodes into rows
- const nodeIds = standaloneNodes.map((n) => n.id);
- const rows = packNodesIntoRows(nodeIds, sizes, config);
-
- packedRows.set(layer.index, rows);
-
- // Assign positions based on packed rows
- for (const row of rows) {
- let rowX = layer.x;
- let rowY = y + row.yOffset;
-
- // Check if row overlaps any reserved region
- for (const region of reservedRegions) {
- Iif (rowY < region.bottom && rowY + row.height > region.top) {
- rowY = region.bottom + config.verticalGap;
- }
- }
-
- for (const nodeId of row.nodes) {
- const node = standaloneNodes.find((n) => n.id === nodeId);
- Eif (node) {
- node.x = rowX;
- node.y = rowY;
- rowX += node.width + config.horizontalGap;
- }
- }
- }
-
- // Update layer maxWidth to account for packed rows
- const maxRowWidth = getPackedWidth(rows);
- if (maxRowWidth > layer.maxWidth) {
- layer.maxWidth = maxRowWidth;
- }
- }
- }
-
- state.packedRows = packedRows;
-}
-
-/**
- * Place disconnected nodes in the left margin zone
- * Uses bin packing for compact arrangement
- */
-export function placeDisconnectedNodes(state: LayoutState): void {
- const { disconnectedNodes, allNodes, nodeToGroup, config } = state;
-
- if (!disconnectedNodes || disconnectedNodes.size === 0 || !allNodes) {
- return;
- }
-
- // Filter out disconnected nodes that are inside groups - they're positioned with their group
- const standaloneDisconnected: number[] = [];
- for (const nodeId of disconnectedNodes) {
- if (nodeToGroup?.has(nodeId)) {
- continue; // Skip - this node is inside a group
- }
- standaloneDisconnected.push(nodeId);
- }
-
- Iif (standaloneDisconnected.length === 0) {
- debugLog(`All ${disconnectedNodes.size} disconnected nodes are inside groups`);
- return;
- }
-
- // Build size map
- const sizes = new Map<number, { width: number; height: number }>();
- for (const nodeId of standaloneDisconnected) {
- const node = allNodes.get(nodeId);
- Eif (node) {
- sizes.set(nodeId, {
- width: node.size?.[0] ?? 200,
- height: node.size?.[1] ?? 100,
- });
- }
- }
-
- // Pack into rows using config settings
- const rows = packNodesIntoRows(standaloneDisconnected, sizes, {
- ...config,
- maxColumns: 1, // Stack vertically in left margin
- });
-
- // Position at startX, startY (left of main DAG)
- const x = config.startX;
- const y = config.startY;
-
- for (const row of rows) {
- for (const nodeId of row.nodes) {
- const node = allNodes.get(nodeId);
- Eif (node && node.pos) {
- // Skip locked/pinned nodes
- Iif (node.flags?.pinned || node.locked) {
- continue;
- }
- node.pos[0] = x;
- node.pos[1] = y + row.yOffset;
- }
- }
- }
-
- debugLog(
- `Placed ${standaloneDisconnected.length} disconnected nodes in left margin (${disconnectedNodes.size - standaloneDisconnected.length} inside groups)`
- );
-}
-
-/**
- * Apply computed positions to actual ComfyUI nodes
- * Handles standalone nodes, subgraph I/O nodes, top-level groups, and nested groups recursively
- * Also restores reroute positions and places disconnected nodes
- */
-export function applyPositions(state: LayoutState): void {
- const { nodes, groupRepresentatives, allNodes, groups, config, rerouteChains } = state;
-
- // First: Apply positions to standalone nodes (including I/O nodes)
- for (const layoutNode of nodes.values()) {
- if (layoutNode.isGroupRepresentative) {
- // This is a group - handled below with recursive positioning
- continue;
- }
-
- // Handle subgraph I/O nodes (update pos array directly)
- Iif (layoutNode.isSubgraphIO && layoutNode.runtimeIONode) {
- layoutNode.runtimeIONode.pos[0] = layoutNode.x;
- layoutNode.runtimeIONode.pos[1] = layoutNode.y;
- debugLog(
- `Positioned I/O node id=${layoutNode.id} to [${layoutNode.x}, ${layoutNode.y}]`
- );
- continue;
- }
-
- const comfyNode = layoutNode.node;
-
- // Skip locked/pinned nodes
- Iif (comfyNode.flags?.pinned || comfyNode.locked) {
- continue;
- }
-
- // Update position
- Eif (comfyNode.pos) {
- comfyNode.pos[0] = layoutNode.x;
- comfyNode.pos[1] = layoutNode.y;
- }
- }
-
- // Second: Position group contents recursively (top-level groups only)
- Eif (groupRepresentatives && allNodes && groups) {
- // Find top-level groups (no parent)
- const topLevelGroups = groups.filter((g) => !g.parentGroup);
-
- for (const topGroup of topLevelGroups) {
- const repId = groupRepresentatives.get(topGroup);
- Iif (repId === undefined) continue;
-
- const repNode = nodes.get(repId);
- Iif (!repNode) continue;
-
- // Start positioning at the group's content area
- const startX = repNode.x + config.groupPadding;
- const startY = repNode.y + config.groupPadding + GROUP_TITLE_HEIGHT;
-
- positionGroupContents(topGroup, startX, startY, allNodes, config);
- }
- }
-
- // Third: Place disconnected nodes in left margin
- placeDisconnectedNodes(state);
-
- // Fourth: Restore reroute positions along their chain edges
- Iif (rerouteChains && rerouteChains.length > 0 && allNodes) {
- // Build positions and sizes maps from actual nodes
- const positions = new Map<number, { x: number; y: number }>();
- const sizes = new Map<number, { width: number; height: number }>();
-
- for (const [id, node] of allNodes) {
- if (node.pos) {
- positions.set(id, { x: node.pos[0], y: node.pos[1] });
- }
- if (node.size) {
- sizes.set(id, { width: node.size[0], height: node.size[1] });
- }
- }
-
- // Also include layout node positions (for nodes we just positioned)
- for (const layoutNode of nodes.values()) {
- positions.set(layoutNode.id, { x: layoutNode.x, y: layoutNode.y });
- sizes.set(layoutNode.id, { width: layoutNode.width, height: layoutNode.height });
- }
-
- // Restore reroute positions
- restoreReroutePositions(rerouteChains, positions, sizes);
-
- // Apply restored positions to actual nodes
- for (const chain of rerouteChains) {
- for (const rerouteId of chain.nodes) {
- const pos = positions.get(rerouteId);
- const node = allNodes.get(rerouteId);
- if (pos && node && node.pos) {
- node.pos[0] = pos.x;
- node.pos[1] = pos.y;
- }
- }
- }
-
- debugLog(
- `Restored ${rerouteChains.length} reroute chains`
- );
- }
-}
-
-/**
- * Re-layout group contents using proper Sugiyama-style layout for connected members
- * or bin packing for disconnected members
- * Returns the final Y position after all contents
- */
-function positionGroupContents(
- group: LayoutGroup,
- startX: number,
- startY: number,
- allNodes: Map<number, LGraphNode>,
- config: LayoutConfig
-): number {
- // Collect non-locked members
- const members: LGraphNode[] = [];
- for (const nodeId of group.memberIds) {
- const node = allNodes.get(nodeId);
- Iif (!node) continue;
- Iif (node.flags?.pinned || node.locked) continue;
- members.push(node);
- }
-
- // Handle empty group
- Iif (members.length === 0 && group.childGroups.length === 0) {
- return startY;
- }
-
- debugLog(`layoutGroupContents "${group.group.title}": startX=${startX}, members=${members.length}, childGroups=${group.childGroups.length}`);
-
- // Get internal edges between members
- const edges = getInternalEdges(group.memberIds, allNodes);
-
- let finalY = startY;
-
- if (members.length > 0) {
- if (edges.length > 0) {
- // Has internal connections - use layer-based layout
- const layers = assignMemberLayers(group.memberIds, edges, allNodes);
-
- let x = startX;
- for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
- const layer = layers[layerIdx];
- Iif (layer.length === 0) continue;
-
- // Sort layer by height (tallest first for stable layout)
- layer.sort((a, b) => (b.size?.[1] ?? 100) - (a.size?.[1] ?? 100));
-
- let y = startY;
- let layerMaxWidth = 0;
-
- for (const node of layer) {
- Eif (node.pos) {
- node.pos[0] = x;
- node.pos[1] = y;
- debugLog(` Member ${node.id} (${node.type}): layer ${layerIdx}, pos [${x}, ${y}]`);
- }
-
- layerMaxWidth = Math.max(layerMaxWidth, node.size?.[0] ?? 200);
- y += (node.size?.[1] ?? 100) + config.verticalGap;
- }
-
- finalY = Math.max(finalY, y - config.verticalGap);
- x += layerMaxWidth + config.horizontalGap;
- }
- } else {
- // No internal connections - use simple vertical stacking with bin pack
- // Sort by height for consistent layout
- members.sort((a, b) => (b.size?.[1] ?? 100) - (a.size?.[1] ?? 100));
-
- // Build sizes map
- const sizes = new Map<number, { width: number; height: number }>();
- for (const node of members) {
- sizes.set(node.id, {
- width: node.size?.[0] ?? 200,
- height: node.size?.[1] ?? 100,
- });
- }
-
- // Pack into rows
- const nodeIds = members.map((n) => n.id);
- const rows = packNodesIntoRows(nodeIds, sizes, config);
-
- let y = startY;
- for (const row of rows) {
- let x = startX;
- for (const nodeId of row.nodes) {
- const node = allNodes.get(nodeId);
- Eif (node?.pos) {
- node.pos[0] = x;
- node.pos[1] = y;
- debugLog(` Member ${node.id} (${node.type}): packed pos [${x}, ${y}]`);
- x += (node.size?.[0] ?? 200) + config.horizontalGap;
- }
- }
- y += row.height + config.verticalGap;
- }
- finalY = y - config.verticalGap;
- }
- }
-
- // Position child groups after members
- for (const child of group.childGroups) {
- // Calculate child group's content area
- const childStartX = startX;
- const childStartY = finalY + config.verticalGap;
-
- // First, layout the child group's contents
- const childEndY = positionGroupContents(child, childStartX, childStartY + GROUP_TITLE_HEIGHT, allNodes, config);
-
- // Update child group position
- Eif (child.group.pos) {
- child.group.pos[0] = childStartX - config.groupPadding;
- child.group.pos[1] = childStartY - config.groupPadding;
- debugLog(` Child group "${child.group.title}": pos [${child.group.pos[0]}, ${child.group.pos[1]}]`);
- }
-
- finalY = childEndY + config.groupPadding;
- }
-
- return finalY;
-}
-
-/**
- * Calculate vertical bounds of nodes in a layer
- * Returns actual min/max Y by iterating all nodes, not assuming array order
- * (Array order is by barycenter, not Y position after bin-packing)
- */
-function getLayerBounds(nodes: LayoutNode[]): { minY: number; maxY: number } | null {
- Iif (nodes.length === 0) return null;
-
- let minY = Infinity;
- let maxY = -Infinity;
-
- for (const node of nodes) {
- minY = Math.min(minY, node.y);
- maxY = Math.max(maxY, node.y + node.height);
- }
-
- Iif (minY === Infinity) return null;
- return { minY, maxY };
-}
-
-/**
- * Compact vertical layout to reduce gaps
- * Centers layers against the tallest non-group layer
- * Groups are excluded from max calculation to prevent Y explosion
- */
-export function compactVertically(state: LayoutState): void {
- const { layers } = state;
-
- // Calculate max height from STANDALONE nodes only (exclude groups)
- // Groups are outliers that can be 4000px+, which would push all other layers down
- let maxTotalHeight = 0;
-
- for (const layer of layers) {
- const standaloneNodes = layer.nodes.filter((n) => !n.isGroupRepresentative);
-
- if (standaloneNodes.length === 0) {
- // Layer is all groups, skip from max calculation
- continue;
- }
-
- const bounds = getLayerBounds(standaloneNodes);
- Iif (!bounds) continue;
-
- const layerHeight = bounds.maxY - bounds.minY;
- maxTotalHeight = Math.max(maxTotalHeight, layerHeight);
- }
-
- // If no standalone layers, skip centering entirely
- if (maxTotalHeight === 0) return;
-
- // Center each layer against maxTotalHeight
- for (const layer of layers) {
- Iif (layer.nodes.length === 0) continue;
-
- const bounds = getLayerBounds(layer.nodes);
- Iif (!bounds) continue;
-
- const layerHeight = bounds.maxY - bounds.minY;
- const offset = (maxTotalHeight - layerHeight) / 2;
-
- for (const node of layer.nodes) {
- node.y += offset;
- }
- }
-}
-
-/**
- * Collect all entities (groups and standalone nodes) for overlap resolution
- * Assigns priority: groups=100, connected nodes=50, disconnected=10
- */
-function collectEntities(state: LayoutState): LayoutEntity[] {
- const entities: LayoutEntity[] = [];
- const { groups, allNodes, nodeToGroup, disconnectedNodes } = state;
-
- Iif (!allNodes) return entities;
-
- // Add top-level groups (high priority - they anchor)
- for (const lg of groups ?? []) {
- if (lg.parentGroup) continue; // Skip nested, handled with parent
- const x = lg.group.pos?.[0] ?? 0;
- const y = lg.group.pos?.[1] ?? 0;
- entities.push({
- id: `group_${lg.group.title ?? entities.length}`,
- type: "group",
- priority: 100,
- x,
- y,
- width: lg.group.size?.[0] ?? 0,
- height: lg.group.size?.[1] ?? 0,
- initialX: x,
- initialY: y,
- group: lg.group,
- layoutGroup: lg,
- });
- }
-
- // Add standalone nodes (lower priority)
- for (const [nodeId, node] of allNodes) {
- if (nodeToGroup?.has(nodeId)) continue; // Inside group
- Iif (node.flags?.pinned || node.locked) continue;
-
- const isDisconnected = disconnectedNodes?.has(nodeId) ?? false;
- const x = node.pos?.[0] ?? 0;
- const y = node.pos?.[1] ?? 0;
- entities.push({
- id: `node_${nodeId}`,
- type: "node",
- priority: isDisconnected ? 10 : 50,
- x,
- y,
- width: node.size?.[0] ?? 200,
- height: node.size?.[1] ?? 100,
- initialX: x,
- initialY: y,
- node,
- });
- }
-
- return entities;
-}
-
-/**
- * Scanline overlap resolution for X-axis (push right)
- * Entities are sorted by X, overlapping entities are pushed right
- * Higher priority entities anchor, lower priority pushed
- * Only updates entity.x/y - does NOT modify node.pos (deferred to applyFinalPositions)
- * Returns true if any entity was moved
- */
-function scanlineResolveX(
- entities: LayoutEntity[],
- config: LayoutConfig
-): boolean {
- let anyChanged = false;
- let iterations = 0;
- const maxIterations = entities.length * 2;
-
- let changed = true;
- while (changed && iterations < maxIterations) {
- changed = false;
- iterations++;
-
- // Sort by X position, then priority, then ID (deterministic)
- entities.sort((a, b) => a.x - b.x || b.priority - a.priority || a.id.localeCompare(b.id));
-
- for (let i = 0; i < entities.length; i++) {
- const anchor = entities[i];
-
- for (let j = i + 1; j < entities.length; j++) {
- const pushed = entities[j];
-
- // Check Y overlap (must overlap on Y axis to need X separation)
- const yOverlap =
- anchor.y < pushed.y + pushed.height + config.verticalGap &&
- pushed.y < anchor.y + anchor.height + config.verticalGap;
- if (!yOverlap) continue;
-
- // Check X overlap
- const requiredX = anchor.x + anchor.width + config.horizontalGap;
- if (pushed.x < requiredX) {
- // Overlap! Push entity j to the right (entity only, not node.pos)
- const dx = requiredX - pushed.x;
- pushed.x = requiredX;
- changed = true;
- anyChanged = true;
- debugLog(`Scanline X: ${pushed.id} right ${dx.toFixed(0)}px (avoid ${anchor.id})`);
- }
- }
- }
- }
-
- if (iterations > 1) {
- debugLog(`X-axis scanline: ${iterations} iterations`);
- }
- return anyChanged;
-}
-
-/**
- * Scanline overlap resolution for Y-axis (push down)
- * Entities are sorted by Y, overlapping entities are pushed down
- * Higher priority entities anchor, lower priority pushed
- * Only updates entity.x/y - does NOT modify node.pos (deferred to applyFinalPositions)
- * Returns true if any entity was moved
- */
-function scanlineResolveY(
- entities: LayoutEntity[],
- config: LayoutConfig
-): boolean {
- let anyChanged = false;
- let iterations = 0;
- const maxIterations = entities.length * 2;
-
- let changed = true;
- while (changed && iterations < maxIterations) {
- changed = false;
- iterations++;
-
- // Sort by Y position, then priority, then ID (deterministic)
- entities.sort((a, b) => a.y - b.y || b.priority - a.priority || a.id.localeCompare(b.id));
-
- for (let i = 0; i < entities.length; i++) {
- const anchor = entities[i];
-
- for (let j = i + 1; j < entities.length; j++) {
- const pushed = entities[j];
-
- // Check X overlap (must overlap on X axis to need Y separation)
- const xOverlap =
- anchor.x < pushed.x + pushed.width + config.horizontalGap &&
- pushed.x < anchor.x + anchor.width + config.horizontalGap;
- if (!xOverlap) continue;
-
- // Check Y overlap
- const requiredY = anchor.y + anchor.height + config.verticalGap;
- Iif (pushed.y < requiredY) {
- // Overlap! Push entity j down (entity only, not node.pos)
- const dy = requiredY - pushed.y;
- pushed.y = requiredY;
- changed = true;
- anyChanged = true;
- debugLog(`Scanline Y: ${pushed.id} down ${dy.toFixed(0)}px (avoid ${anchor.id})`);
- }
- }
- }
- }
-
- Iif (iterations > 1) {
- debugLog(`Y-axis scanline: ${iterations} iterations`);
- }
- return anyChanged;
-}
-
-/**
- * Recursively shift all member nodes and nested child groups
- */
-function shiftGroupContentsRecursively(
- layoutGroup: LayoutGroup,
- dx: number,
- dy: number,
- allNodes: Map<number, LGraphNode>
-): void {
- // Shift member nodes of this group
- for (const nodeId of layoutGroup.memberIds) {
- const node = allNodes.get(nodeId);
- Eif (node?.pos) {
- node.pos[0] += dx;
- node.pos[1] += dy;
- }
- }
- // Shift child groups and their contents recursively
- for (const child of layoutGroup.childGroups) {
- if (child.group.pos) {
- child.group.pos[0] += dx;
- child.group.pos[1] += dy;
- }
- shiftGroupContentsRecursively(child, dx, dy, allNodes);
- }
-}
-
-/**
- * Recursively shift child groups and their members
- */
-function shiftChildGroups(
- layoutGroup: LayoutGroup,
- dx: number,
- dy: number,
- allNodes: Map<number, LGraphNode>
-): void {
- for (const child of layoutGroup.childGroups) {
- Eif (child.group.pos) {
- child.group.pos[0] += dx;
- child.group.pos[1] += dy;
- }
- shiftGroupContentsRecursively(child, dx, dy, allNodes);
- }
-}
-
-/**
- * Apply final entity positions to node.pos after scanline resolution
- * Calculates deltas from initial positions and applies to groups/nodes
- */
-function applyFinalPositions(
- entities: LayoutEntity[],
- allNodes: Map<number, LGraphNode>
-): void {
- for (const entity of entities) {
- const dx = entity.x - entity.initialX;
- const dy = entity.y - entity.initialY;
-
- // Skip if no movement
- if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01) continue;
-
- if (entity.type === "group" && entity.group && entity.layoutGroup) {
- // Set group's final position
- Eif (entity.group.pos) {
- entity.group.pos[0] = entity.x;
- entity.group.pos[1] = entity.y;
- }
- // Shift all member nodes by the same delta
- for (const nodeId of entity.layoutGroup.memberIds) {
- const node = allNodes.get(nodeId);
- Eif (node?.pos) {
- node.pos[0] += dx;
- node.pos[1] += dy;
- }
- }
- // Shift child groups recursively
- shiftChildGroups(entity.layoutGroup, dx, dy, allNodes);
- E} else if (entity.type === "node" && entity.node?.pos) {
- // Set node's final position
- entity.node.pos[0] = entity.x;
- entity.node.pos[1] = entity.y;
- }
- }
-}
-
-/**
- * Unified overlap resolution using scanline algorithm
- * Uses priority-based monotonic pushing (right/down only) to prevent oscillation
- * Groups have highest priority and anchor in place
- * Idempotent: decouples entity tracking from node.pos writes
- */
-export function resolveAllOverlaps(state: LayoutState): void {
- const { allNodes, config } = state;
- Iif (!allNodes) return;
-
- const entities = collectEntities(state);
- if (entities.length < 2) {
- debugLog(`Overlap resolution: ${entities.length} entities (skipped)`);
- return;
- }
-
- // Pass 1: X-axis (left-to-right pushing) - updates entity.x only
- scanlineResolveX(entities, config);
-
- // Pass 2: Y-axis (top-to-bottom pushing) - updates entity.y only
- scanlineResolveY(entities, config);
-
- // Pass 3: Apply final positions to node.pos
- applyFinalPositions(entities, allNodes);
-
- debugLog(`Overlap resolution: ${entities.length} entities processed`);
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /**
- * Minimal type definitions for ComfyUI/LiteGraph
- * These match the runtime global objects, not the package exports
- */
-
-/** Point as [x, y] */
-export type Point = [x: number, y: number];
-
-/** Size as [width, height] */
-export type Size = [width: number, height: number];
-
-/** Node input slot */
-export interface NodeInputSlot {
- name: string;
- type: string;
- link: number | null;
-}
-
-/** Node output slot */
-export interface NodeOutputSlot {
- name: string;
- type: string;
- links: number[] | null;
-}
-
-/** Node flags */
-export interface NodeFlags {
- pinned?: boolean;
- collapsed?: boolean;
-}
-
-/** LiteGraph Node */
-export interface LGraphNode {
- id: number;
- type: string;
- title: string;
- pos: Point;
- size: Size;
- inputs: NodeInputSlot[];
- outputs: NodeOutputSlot[];
- flags?: NodeFlags;
- locked?: boolean;
- order?: number;
-}
-
-/** LiteGraph Group */
-export interface LGraphGroup {
- id: number;
- title: string;
- pos: Point;
- size: Size;
- _nodes?: LGraphNode[];
- _children?: Set<{ id: number }>;
- _bounding?: {
- x: number;
- y: number;
- width: number;
- height: number;
- set?: (x: number, y: number, w: number, h: number) => void;
- };
- resizeTo?: (items: Iterable<LGraphNode>, padding?: number) => void;
-}
-
-/** LiteGraph Link */
-export interface LLink {
- id: number;
- origin_id: number;
- origin_slot: number;
- target_id: number;
- target_slot: number;
- type: string;
-}
-
-/** Subgraph I/O node (uses bounding array format) */
-export interface SubgraphIONode {
- id: number;
- bounding: [x: number, y: number, width: number, height: number];
-}
-
-/** LiteGraph Graph (or Subgraph with I/O nodes) */
-export interface LGraph {
- _nodes: LGraphNode[];
- _groups: LGraphGroup[];
- /** Links can be Map, Record, or Array depending on context */
- links: Map<number, LLink> | Record<number, LLink> | LLink[];
- setDirtyCanvas?: (fg: boolean, bg: boolean) => void;
- /** Subgraph input node (only on Subgraph, not root LGraph) */
- inputNode?: SubgraphIONode;
- /** Subgraph output node (only on Subgraph, not root LGraph) */
- outputNode?: SubgraphIONode;
-}
-
-/** Layout node with computed metadata */
-export interface LayoutNode {
- /** Reference to ComfyUI node */
- node: LGraphNode;
- /** Node ID */
- id: number;
- /** DAG depth (0 = sources/inputs) */
- layer: number;
- /** Vertical position within layer */
- orderInLayer: number;
- /** Node IDs this depends on (predecessors) */
- predecessors: number[];
- /** Node IDs that depend on this (successors) */
- successors: number[];
- /** Node width (or group width if representative) */
- width: number;
- /** Node height (or group height if representative) */
- height: number;
- /** Computed X coordinate */
- x: number;
- /** Computed Y coordinate */
- y: number;
- /** True if this node represents a group in the layout */
- isGroupRepresentative?: boolean;
- /** The group this node represents (if isGroupRepresentative) */
- group?: LayoutGroup;
- /** True if this is a subgraph I/O node (input or output boundary) */
- isSubgraphIO?: boolean;
- /** Reference to runtime I/O node for position updates (has pos/size) */
- runtimeIONode?: { id: number; pos: [number, number]; size: [number, number] };
-}
-
-/** Layer = vertical column of nodes */
-export interface Layer {
- /** Layer index (0 = leftmost) */
- index: number;
- /** Nodes in this layer */
- nodes: LayoutNode[];
- /** Computed X position for this layer */
- x: number;
- /** Max node width in this layer */
- maxWidth: number;
-}
-
-/** Layout group tracking with hierarchy support */
-export interface LayoutGroup {
- /** Reference to ComfyUI group */
- group: LGraphGroup;
- /** Node IDs directly contained (not in child groups) */
- memberIds: Set<number>;
- /** Child groups (nested inside this group) */
- childGroups: LayoutGroup[];
- /** Parent group (group containing this one), null for top-level */
- parentGroup: LayoutGroup | null;
- /** Nesting depth (0 = top-level) */
- depth: number;
- /** Calculated width for the group */
- width: number;
- /** Calculated height for the group */
- height: number;
-}
-
-/** Layout configuration */
-export interface LayoutConfig {
- /** Horizontal gap between layers */
- horizontalGap: number;
- /** Vertical gap between nodes in same layer */
- verticalGap: number;
- /** Padding inside groups */
- groupPadding: number;
- /** Layout origin X */
- startX: number;
- /** Layout origin Y */
- startY: number;
- /** Max barycenter iterations */
- maxIterations: number;
- /** Max columns per layer (0=auto, 1=disabled/vertical stack, 2+=fixed) */
- maxColumns: number;
- /** Max row width before new row when maxColumns=0 */
- maxRowWidth: number;
- /** Collapse reroute chains into edge waypoints */
- collapseReroutes: boolean;
- /** Gap between disconnected zone and DAG */
- disconnectedGap: number;
-}
-
-/** Default configuration */
-export const DEFAULT_CONFIG: LayoutConfig = {
- horizontalGap: 100,
- verticalGap: 40,
- groupPadding: 30,
- startX: 100,
- startY: 100,
- maxIterations: 24,
- maxColumns: 0,
- maxRowWidth: 800,
- collapseReroutes: true,
- disconnectedGap: 150,
-};
-
-/** Node classification result */
-export interface ClassifiedNodes {
- /** Nodes with connections (participate in DAG) */
- connected: Set<number>;
- /** Nodes without any connections */
- disconnected: Set<number>;
- /** Reroute nodes (for special handling) */
- reroutes: Set<number>;
-}
-
-/** Reroute chain for collapse/restore */
-export interface RerouteChain {
- /** Reroute node IDs in order */
- nodes: number[];
- /** Source node before chain */
- sourceNode: number;
- /** Source slot index */
- sourceSlot: number;
- /** Target nodes after chain */
- targets: Array<{ node: number; slot: number }>;
-}
-
-/** Packed row within a layer (for bin packing) */
-export interface PackedRow {
- /** Node IDs in this row */
- nodes: number[];
- /** Max node height in row */
- height: number;
- /** Vertical offset from layer start */
- yOffset: number;
- /** Total width of nodes + gaps in row */
- width: number;
-}
-
-/** Graph layout state */
-export interface LayoutState {
- /** All layout nodes by ID (includes group representatives) */
- nodes: Map<number, LayoutNode>;
- /** Layers of nodes */
- layers: Layer[];
- /** Groups */
- groups: LayoutGroup[];
- /** Config */
- config: LayoutConfig;
- /** Maps node ID to its group (if any) */
- nodeToGroup?: Map<number, LayoutGroup>;
- /** Maps group to its representative node ID */
- groupRepresentatives?: Map<LayoutGroup, number>;
- /** All original ComfyUI nodes by ID */
- allNodes?: Map<number, LGraphNode>;
- /** Groups organized by depth (index 0 = deepest) for bottom-up processing */
- groupsByDepth?: LayoutGroup[][];
- /** Disconnected node IDs (placed in separate zone) */
- disconnectedNodes?: Set<number>;
- /** Collapsed reroute chains (restored after layout) */
- rerouteChains?: RerouteChain[];
- /** Packed rows per layer (for bin-packed layout) */
- packedRows?: Map<number, PackedRow[]>;
-}
-
-/** Layout result */
-export interface LayoutResult {
- /** Number of nodes processed */
- nodeCount: number;
- /** Number of layers */
- layerCount: number;
- /** Number of groups resized */
- groupCount: number;
- /** Execution time in ms */
- executionMs: number;
-}
- |