auto layout

web/app/components/workflow/block-selector/index.tsx

@@ -99,7 +99,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={`w-[256px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
+        <div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
           <div className='px-2 pt-2'>
             <div
               className='flex items-center px-2 rounded-lg bg-gray-100'

web/app/components/workflow/constants.ts

@@ -230,8 +230,12 @@ export const NODE_WIDTH = 220
 export const X_OFFSET = 64
 export const NODE_WIDTH_X_OFFSET = NODE_WIDTH + X_OFFSET
 export const Y_OFFSET = 39
-export const TREE_DEEPTH = 20
+export const TREE_DEEPTH = 30
 export const START_INITIAL_POSITION = { x: 80, y: 282 }
+export const AUTO_LAYOUT_OFFSET = {
+  x: -42,
+  y: 243,
+}
 
 export const RETRIEVAL_OUTPUT_STRUCT = `{
   "content": "",

web/app/components/workflow/hooks/use-workflow.ts

@@ -8,6 +8,7 @@ import produce from 'immer'
 import {
   getIncomers,
   getOutgoers,
+  useReactFlow,
   useStoreApi,
 } from 'reactflow'
 import type { Connection } from 'reactflow'
@@ -20,13 +21,15 @@ import type { Node } from '../types'
 import { BlockEnum } from '../types'
 import { useWorkflowStore } from '../store'
 import {
+  AUTO_LAYOUT_OFFSET,
   START_INITIAL_POSITION,
   SUPPORT_OUTPUT_VARS_NODE,
 } from '../constants'
 import {
   useNodesExtraData,
   useNodesInitialData,
 } from './use-nodes-data'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   fetchNodesDefaultConfigs,
@@ -43,28 +46,37 @@ export const useIsChatMode = () => {
 
 export const useWorkflow = () => {
   const store = useStoreApi()
+  const reactflow = useReactFlow()
   const nodesExtraData = useNodesExtraData()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
 
   const handleLayout = useCallback(async () => {
     const {
       getNodes,
       edges,
       setNodes,
     } = store.getState()
+    const { setViewport } = reactflow
     const nodes = getNodes()
     const layout = getLayoutByDagre(nodes, edges)
 
     const newNodes = produce(nodes, (draft) => {
       draft.forEach((node) => {
         const nodeWithPosition = layout.node(node.id)
         node.position = {
-          x: nodeWithPosition.x,
-          y: nodeWithPosition.y,
+          x: nodeWithPosition.x + AUTO_LAYOUT_OFFSET.x,
+          y: nodeWithPosition.y + AUTO_LAYOUT_OFFSET.y,
         }
       })
     })
     setNodes(newNodes)
-  }, [store])
+    setViewport({
+      x: 0,
+      y: 0,
+      zoom: 0.8,
+    })
+    setTimeout(() => handleSyncWorkflowDraft())
+  }, [store, reactflow, handleSyncWorkflowDraft])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
     const {

web/app/components/workflow/utils.ts

@@ -146,10 +146,12 @@ export const getNodesPositionMap = (nodes: Node[], edges: Edge[]) => {
   return positionMap
 }
 
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
 export const getLayoutByDagre = (originNodes: Node[], originEdges: Edge[]) => {
   const nodes = cloneDeep(originNodes)
   const edges = cloneDeep(originEdges)
-  const dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setGraph({
     rankdir: 'LR',
     align: 'UL',