diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 058244b0a2..788de05b59 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -211,6 +211,8 @@ ) } + const ASSET_OFFSET_TOP = 45 + let lastNodes: [NodeLayout[], Node[], assetsMap: any] | undefined = undefined function layoutNodes(nodes: NodeLayout[]): Node[] { let lastResult = lastNodes?.[1] @@ -251,10 +253,10 @@ .coord(coordCenter()) .nodeSize((d) => { const id: string | undefined = d?.data?.['id'] ?? '' - const assetOffset = assetsMap?.[id]?.length ? 100 : 0 + const assetOffsetTop = assetsMap?.[id]?.length ? ASSET_OFFSET_TOP : 0 return [ (nodeWidths[id] ?? 1) * (NODE.width + NODE.gap.horizontal * 1), - NODE.height + NODE.gap.vertical + assetOffset + NODE.height + NODE.gap.vertical + assetOffsetTop ] as readonly [number, number] }) boxSize = layout(dag as any) @@ -292,7 +294,7 @@ function computeAssetNodes(nodes: Node[]) { const ASSET_X_GAP = 20 const ASSET_WIDTH = 180 - const ASSET_Y_OFFSET = 55 + const ASSET_TOP_OFFSET = 45 return nodes.flatMap((node) => { const assets = assetsMap?.[node.id] const assetNodes = assets?.map( @@ -300,12 +302,12 @@ ({ id: `${node.id}-asset-${formatAsset(asset)}`, type: 'asset', - data: { asset }, + data: { asset, accessType: 'read' }, position: { x: (ASSET_WIDTH + ASSET_X_GAP) * (assetIdx - assets.length / 2) + (NODE.width + ASSET_X_GAP) / 2, - y: ASSET_Y_OFFSET + y: -ASSET_TOP_OFFSET }, parentId: node.id, width: ASSET_WIDTH @@ -315,27 +317,40 @@ }) } + // When changing the height in layoutNodes, the node gets centered, so we have to adjust the y-offset + function fixAssetParentYOffset(nodes: Node[]): Node[] { + return nodes.map((n) => { + const assets = assetsMap?.[n.id] + if (!assets?.length) return n + return { + ...n, + position: { ...n.position, y: n.position.y + ASSET_OFFSET_TOP / 2 } + } + }) + } + function computeAssetEdges(edges: Edge[], assetNodes: (Node & AssetN)[]): Edge[] { - return assetNodes.map( - (n) => - ({ - id: `${n.id}-edge`, - source: n.parentId ?? '', - target: n.id, - type: 'empty', - data: { - insertable: false, - sourceId: n.id, - targetId: n.parentId, - moving: moving, - eventHandlers: eventHandler, - index: 0, - enableTrigger: false, - disableAi: disableAi, - disableMoveIds: [] - } - }) satisfies Edge - ) + return assetNodes.map((n) => { + const source = (n.data.accessType !== 'read' ? n.parentId : n.id) ?? '' + const target = (n.data.accessType !== 'read' ? n.id : n.parentId) ?? '' + return { + id: `${n.id}-edge`, + source, + target, + type: 'empty', + data: { + insertable: false, + sourceId: source, + targetId: target, + moving: moving, + eventHandlers: eventHandler, + index: 0, + enableTrigger: false, + disableAi: disableAi, + disableMoveIds: [] + } + } satisfies Edge + }) } let eventHandler = { @@ -427,7 +442,7 @@ nodes = layoutNodes(newGraph.nodes) const assetNodes = computeAssetNodes(nodes) - nodes = [...nodes, ...assetNodes] + nodes = [...fixAssetParentYOffset(nodes), ...assetNodes] edges = [...newGraph.edges, ...computeAssetEdges(newGraph.edges, assetNodes)] await tick() height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight) @@ -632,7 +647,8 @@ runFirstEffect onChange={() => inferAssets(v.language, v.content).then((assetsRaw) => { - if (assetsMap) assetsMap[mod.id] = assetsRaw.map(parseAsset).filter((a) => !!a) + const newAssets = assetsRaw.map(parseAsset).filter((a) => !!a) + if (assetsMap && !deepEqual(assetsMap[mod.id], newAssets)) assetsMap[mod.id] = newAssets })} /> {/if} diff --git a/frontend/src/lib/components/graph/graphBuilder.svelte.ts b/frontend/src/lib/components/graph/graphBuilder.svelte.ts index 5145537361..614ea5ce96 100644 --- a/frontend/src/lib/components/graph/graphBuilder.svelte.ts +++ b/frontend/src/lib/components/graph/graphBuilder.svelte.ts @@ -262,6 +262,7 @@ export type AssetN = { type: 'asset' data: { asset: Asset + accessType: 'read' | 'write' } }