Spaces:
Build error
Build error
File size: 2,227 Bytes
a8b3f00 |
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 |
import { useCallback } from 'react'
import ELK from 'elkjs/lib/elk.bundled.js'
import {
useReactFlow,
useStoreApi,
} from 'reactflow'
import { cloneDeep } from 'lodash-es'
import type {
Edge,
Node,
} from '../types'
import { useWorkflowStore } from '../store'
import { AUTO_LAYOUT_OFFSET } from '../constants'
import { useNodesSyncDraft } from './use-nodes-sync-draft'
const layoutOptions = {
'elk.algorithm': 'layered',
'elk.direction': 'RIGHT',
'elk.layered.spacing.nodeNodeBetweenLayers': '60',
'elk.spacing.nodeNode': '40',
'elk.layered.nodePlacement.strategy': 'SIMPLE',
}
const elk = new ELK()
export const getLayoutedNodes = async (nodes: Node[], edges: Edge[]) => {
const graph = {
id: 'root',
layoutOptions,
children: nodes.map((n) => {
return {
...n,
width: n.width ?? 150,
height: n.height ?? 50,
targetPosition: 'left',
sourcePosition: 'right',
}
}),
edges: cloneDeep(edges),
}
const layoutedGraph = await elk.layout(graph as any)
const layoutedNodes = nodes.map((node) => {
const layoutedNode = layoutedGraph.children?.find(
lgNode => lgNode.id === node.id,
)
return {
...node,
position: {
x: (layoutedNode?.x ?? 0) + AUTO_LAYOUT_OFFSET.x,
y: (layoutedNode?.y ?? 0) + AUTO_LAYOUT_OFFSET.y,
},
}
})
return {
layoutedNodes,
}
}
export const useNodesLayout = () => {
const store = useStoreApi()
const reactflow = useReactFlow()
const workflowStore = useWorkflowStore()
const { handleSyncWorkflowDraft } = useNodesSyncDraft()
const handleNodesLayout = useCallback(async () => {
workflowStore.setState({ nodeAnimation: true })
const {
getNodes,
edges,
setNodes,
} = store.getState()
const { setViewport } = reactflow
const nodes = getNodes()
const {
layoutedNodes,
} = await getLayoutedNodes(nodes, edges)
setNodes(layoutedNodes)
const zoom = 0.7
setViewport({
x: 0,
y: 0,
zoom,
})
setTimeout(() => {
handleSyncWorkflowDraft()
})
}, [store, reactflow, handleSyncWorkflowDraft, workflowStore])
return {
handleNodesLayout,
}
}
|