Fix y positioning of nodes with assets

This commit is contained in:
Diego Imbert
2025-07-02 11:14:05 +02:00
parent b9ad78eed5
commit 42e2eadaf3
2 changed files with 34 additions and 7 deletions
@@ -211,7 +211,7 @@
)
}
const ASSET_OFFSET_TOP = 45
const NODE_WITH_ASSET_OFFSET_TOP = 45
let lastNodes: [NodeLayout[], Node[], assetsMap: any] | undefined = undefined
function layoutNodes(nodes: NodeLayout[]): Node[] {
@@ -253,7 +253,7 @@
.coord(coordCenter())
.nodeSize((d) => {
const id: string | undefined = d?.data?.['id'] ?? ''
const assetOffsetTop = assetsMap?.[id]?.length ? ASSET_OFFSET_TOP : 0
const assetOffsetTop = assetsMap?.[id]?.length ? NODE_WITH_ASSET_OFFSET_TOP : 0
return [
(nodeWidths[id] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
NODE.height + NODE.gap.vertical + assetOffsetTop
@@ -300,6 +300,11 @@
const allAssetEdges: Edge[] = []
const newNodes = [...nodes]
// If node at yPosition 310.5 has asset nodes on the top, every node
// at the same yPosition will need to get shifted by the same amount for everything
// to align
const yPosAccessTypeMap: Record<number, 'read'> = {}
for (const node of newNodes) {
const assets = assetsMap?.[node.id]
const assetNodes = assets?.map(
@@ -319,6 +324,10 @@
}) satisfies Node & AssetN
)
if (assets?.length) {
yPosAccessTypeMap[node.position.y] = 'read'
}
const assetEdges = assetNodes?.map((n) => {
const source = (n.data.accessType !== 'read' ? n.parentId : n.id) ?? ''
const target = (n.data.accessType !== 'read' ? n.id : n.parentId) ?? ''
@@ -341,14 +350,21 @@
} satisfies Edge
})
if (assets?.length) {
node.position.y += ASSET_TOP_OFFSET / 2
}
allAssetEdges.push(...(assetEdges ?? []))
allAssetNodes.push(...(assetNodes ?? []))
}
console.log('yPosAccessTypeMap', yPosAccessTypeMap)
// Fix y positions of all nodes that were shifted by layoutNodes
for (const node of newNodes) {
if (node.position.y in yPosAccessTypeMap) {
const accessType = yPosAccessTypeMap[node.position.y]
if (accessType === 'read') {
node.position.y = node.position.y + NODE_WITH_ASSET_OFFSET_TOP / 2
}
}
}
return [
[...newNodes, ...allAssetNodes],
[...edges, ...allAssetEdges]
@@ -441,7 +457,6 @@
return
}
let newGraph = graph
;[nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges)
await tick()
height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight)
+12
View File
@@ -1464,3 +1464,15 @@ export function isS3Uri(uri: string): uri is S3Uri {
const match = uri.match(/^s3:\/\/([^/]*)\/(.*)$/)
return !!match && match.length === 3
}
export function transpose<T>(matrix: T[][]): T[][] {
const maxW = Math.max(...matrix.map((row) => row.length))
const maxH = matrix.length
const transposed: T[][] = Array.from({ length: maxW }, () => Array(maxH).fill(undefined))
for (let i = 0; i < maxH; i++) {
for (let j = 0; j < matrix[i].length; j++) {
transposed[j][i] = matrix[i][j]
}
}
return transposed
}