Merge pull request #397 from liam-hq/fix-fit-view

🐛 Fixed problem with fitView not working properly while displaying only some tables
liam-hq · Dec 26, 2024 · fc6ba1d · fc6ba1d
2 parents 17f2f39 + e0c748c
commit fc6ba1d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/.changeset/breezy-olives-decide.md b/.changeset/breezy-olives-decide.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+:bug: Fixed problem with fitView not working properly while displaying only some tables
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useSyncHiddenNodesChange.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useSyncHiddenNodesChange.ts
@@ -1,8 +1,23 @@
 import { useUserEditingStore } from '@/stores'
-import { useReactFlow } from '@xyflow/react'
+import { type Node, useReactFlow } from '@xyflow/react'
 import { useEffect } from 'react'
+import { NON_RELATED_TABLE_GROUP_NODE_ID } from '../convertDBStructureToNodes'
 import { useERDContentContext } from './ERDContentContext'
 
+const newNonRelatedTableGroupNode = (nodes: Node[]): Node | undefined => {
+  const node = nodes.find((node) => node.id === NON_RELATED_TABLE_GROUP_NODE_ID)
+
+  if (!node) {
+    return
+  }
+
+  const visible = nodes
+    .filter((node) => node.parentId === NON_RELATED_TABLE_GROUP_NODE_ID)
+    .some((node) => !node.hidden)
+
+  return { ...node, hidden: !visible }
+}
+
 export const useSyncHiddenNodesChange = () => {
   const {
     state: { initializeComplete },
@@ -15,10 +30,14 @@ export const useSyncHiddenNodesChange = () => {
       return
     }
     const nodes = getNodes()
-    const updatedNodes = nodes.map((node) => {
+    const updatedNodes: Node[] = nodes.map((node) => {
       const hidden = hiddenNodeIds.has(node.id)
       return { ...node, hidden }
     })
+    const nonRelatedTableGroupNode = newNonRelatedTableGroupNode(updatedNodes)
+    if (nonRelatedTableGroupNode !== undefined) {
+      updatedNodes.push(nonRelatedTableGroupNode)
+    }
 
     setNodes(updatedNodes)
   }, [initializeComplete, getNodes, setNodes, hiddenNodeIds])

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts
@@ -4,7 +4,7 @@ import type { Edge, Node } from '@xyflow/react'
 import { columnHandleId } from './columnHandleId'
 import { zIndex } from './constants'
 
-const NON_RELATED_TABLE_GROUP_NODE_ID = 'non-related-table-group'
+export const NON_RELATED_TABLE_GROUP_NODE_ID = 'non-related-table-group'
 
 type Params = {
   dbStructure: DBStructure