diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 0ad3ca837d..f0c89e523b 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -585,7 +585,7 @@ let assetNodesResult = $showAssets ? computeAssetNodes( newNodes.map((n) => ({ - data: { assets: n.data?.assets as AssetWithAltAccessType[] }, + data: { assets: n.data?.assets as AssetWithAltAccessType[], offset: n.data?.offset as number }, id: n.id, position: n.position })) diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte index 7b144a3fb6..8d33b6d1e2 100644 --- a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte +++ b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte @@ -11,7 +11,7 @@ let computeAssetNodesCache: [NodeDep[], ReturnType] | undefined type NodeDep = { - data: object & { assets?: AssetWithAltAccessType[] | undefined } + data: object & { assets?: AssetWithAltAccessType[] | undefined; offset?: number } id: string position: { x: number; y: number } } @@ -78,13 +78,14 @@ width: inputAssetWidth, position: { x: - displayedInputAssets.length === 1 + (node.data.offset ?? 0) + + (displayedInputAssets.length === 1 ? (NODE.width - inputAssetWidth) / 2 - 10 // Ensure we see the edge : (inputAssetWidth + inputAssetXGap) * (i - displayedInputAssets.length / 2) + (NODE.width + inputAssetXGap) / 2 + (overflowedInputAssets.length ? (-ASSETS_OVERFLOWED_NODE_WIDTH - inputAssetXGap) / 2 - : 0), + : 0)), y: READ_ASSET_Y_OFFSET }, selectable: false @@ -115,13 +116,14 @@ width: outputAssetWidth, position: { x: - displayedOutputAssets.length === 1 + (node.data.offset ?? 0) + + (displayedOutputAssets.length === 1 ? (NODE.width - outputAssetWidth) / 2 - 10 // Ensure we see the edge : (outputAssetWidth + outputAssetXGap) * (i - displayedOutputAssets.length / 2) + (NODE.width + outputAssetXGap) / 2 + (overflowedOutputAssets.length ? (-ASSETS_OVERFLOWED_NODE_WIDTH - outputAssetXGap) / 2 - : 0), + : 0)), y: WRITE_ASSET_Y_OFFSET }, selectable: false @@ -155,7 +157,7 @@ parentId: node.id, width: ASSETS_OVERFLOWED_NODE_WIDTH, position: { - x: MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14, + x: (node.data.offset ?? 0) + MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14, y: READ_ASSET_Y_OFFSET } } satisfies Node & AssetsOverflowedN) @@ -174,7 +176,7 @@ parentId: node.id, width: ASSETS_OVERFLOWED_NODE_WIDTH, position: { - x: MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14, + x: (node.data.offset ?? 0) + MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14, y: WRITE_ASSET_Y_OFFSET } } satisfies Node & AssetsOverflowedN)