Merge pull request #342 from liam-hq/refactor-auto-layout

refactor: Update handleLayout to accept nodes and improve hidden node handling

frontend/.changeset/calm-books-occur.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor: Update handleLayout to accept nodes and improve hidden node handling

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx

@@ -3,10 +3,12 @@ import { useCliVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, TidyUpIcon } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
+import { useReactFlow } from '@xyflow/react'
 import { type FC, useCallback } from 'react'
 import { useAutoLayout } from '../../useAutoLayout'
 
 export const TidyUpButton: FC = () => {
+  const { getNodes } = useReactFlow()
   const { handleLayout } = useAutoLayout()
   const { showMode } = useUserEditingStore()
   const { cliVersion } = useCliVersion()
@@ -16,8 +18,8 @@ export const TidyUpButton: FC = () => {
       showMode,
       cliVer: cliVersion.version,
     })
-    handleLayout()
-  }, [handleLayout, showMode, cliVersion.version])
+    handleLayout(getNodes())
+  }, [handleLayout, showMode, getNodes, cliVersion.version])
 
   return (
     <ToolbarButton asChild>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts

@@ -5,25 +5,21 @@ import { useERDContentContext } from '../ERDContentContext'
 import { getElkLayout } from './getElkLayout'
 
 export const useAutoLayout = () => {
-  const { getNodes, setNodes, getEdges, fitView } = useReactFlow()
+  const { setNodes, getEdges, fitView } = useReactFlow()
   const {
     actions: { setLoading, setInitializeComplete },
   } = useERDContentContext()
 
   const handleLayout = useCallback(
-    async (
-      fitViewOptions: FitViewOptions = {},
-      initialHiddenNodeIds: string[] = [],
-    ) => {
+    async (nodes: Node[], fitViewOptions: FitViewOptions = {}) => {
       setLoading(true)
-      const nodes = getNodes()
       const edges = getEdges()
 
       const hiddenNodes: Node[] = []
       const visibleNodes: Node[] = []
       for (const node of nodes) {
-        if (initialHiddenNodeIds.includes(node.id) || node.hidden) {
-          hiddenNodes.push({ ...node, hidden: true })
+        if (node.hidden) {
+          hiddenNodes.push(node)
         } else {
           visibleNodes.push(node)
         }
@@ -47,7 +43,7 @@ export const useAutoLayout = () => {
         setInitializeComplete(true)
       }, 0)
     },
-    [getNodes, setNodes, getEdges, fitView, setLoading, setInitializeComplete],
+    [setNodes, getEdges, fitView, setLoading, setInitializeComplete],
   )
 
   return { handleLayout }

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts

@@ -49,16 +49,20 @@ export const useInitialAutoLayout = (nodes: Node[]) => {
       updateActiveTableName(tableNameFromUrl)
       const hiddenNodeIds = await getHiddenNodeIdsFromUrl()
       addHiddenNodeIds(hiddenNodeIds)
+      const appliedNodes = nodes.map((node) => ({
+        ...node,
+        hidden: hiddenNodeIds.includes(node.id),
+      }))
 
       const fitViewOptions = tableNameFromUrl
         ? { maxZoom: 1, duration: 300, nodes: [{ id: tableNameFromUrl }] }
         : undefined
 
       if (tableNodesInitialized) {
-        handleLayout(fitViewOptions, hiddenNodeIds)
+        handleLayout(appliedNodes, fitViewOptions)
       }
     }
 
     initialize()
-  }, [tableNodesInitialized, initializeComplete, handleLayout])
+  }, [tableNodesInitialized, initializeComplete, handleLayout, nodes])
 }