Merge pull request #225 from liam-hq/ignore-toolbar-in-related-tables

feat: move toolbar to ERDRenderer and disable toolbar in Related Tables

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.module.css

@@ -4,20 +4,3 @@
   height: 100%;
   background-color: var(--global-background);
 }
-
-.toolbarWrapper {
-  position: absolute;
-  left: 0;
-  bottom: 2rem;
-  right: 0;
-  display: grid;
-  justify-content: center;
-  margin: 0 auto;
-  /* NOTE: Disable pointer events to allow interaction with Reactflow underneath the toolbar */
-  pointer-events: none;
-}
-
-/* NOTE: Make the toolbar itself clickable */
-.toolbarWrapper > * {
-  pointer-events: auto;
-}

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

@@ -13,7 +13,6 @@ import { type FC, useCallback, useEffect } from 'react'
 import styles from './ERDContent.module.css'
 import { RelationshipEdge } from './RelationshipEdge'
 import { TableNode } from './TableNode'
-import { Toolbar } from './Toolbar'
 import { useAutoLayout } from './useAutoLayout'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
 
@@ -185,9 +184,6 @@ export const ERDContent: FC<Props> = ({
           gap={16}
         />
       </ReactFlow>
-      <div className={styles.toolbarWrapper}>
-        <Toolbar />
-      </div>
     </div>
   )
 }

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.module.css

@@ -23,3 +23,20 @@
   left: 8px;
   z-index: 1;
 }
+
+.toolbarWrapper {
+  position: absolute;
+  left: 0;
+  bottom: 2rem;
+  right: 0;
+  display: grid;
+  justify-content: center;
+  margin: 0 auto;
+  /* NOTE: Disable pointer events to allow interaction with Reactflow underneath the toolbar */
+  pointer-events: none;
+}
+
+/* NOTE: Make the toolbar itself clickable */
+.toolbarWrapper > * {
+  pointer-events: auto;
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx

@@ -12,6 +12,8 @@ import styles from './ERDRenderer.module.css'
 import { LeftPane } from './LeftPane'
 import '@/styles/globals.css'
 import { useDBStructureStore, useUserEditingStore } from '@/stores'
+// biome-ignore lint/nursery/useImportRestrictions: Fixed in the next PR.
+import { Toolbar } from './ERDContent/Toolbar'
 import { TableDetailDrawer, TableDetailDrawerRoot } from './TableDetailDrawer'
 import { convertDBStructureToNodes } from './convertDBStructureToNodes'
 
@@ -37,6 +39,9 @@ export const ERDRenderer: FC = () => {
             <TableDetailDrawerRoot>
               <ReactFlowProvider>
                 <ERDContent nodes={nodes} edges={edges} />
+                <div className={styles.toolbarWrapper}>
+                  <Toolbar />
+                </div>
               </ReactFlowProvider>
               <TableDetailDrawer />
             </TableDetailDrawerRoot>