Merge pull request #391 from liam-hq/fix/cardinality-table-name-mode

🐛 update TableHeader styles and add handle positioning for connections
liam-hq · Dec 26, 2024 · c342bd8 · c342bd8
2 parents 9e00d3c + 95dd878
commit c342bd8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/.changeset/soft-crabs-begin.md b/.changeset/soft-crabs-begin.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🐛 update TableHeader styles and add handle positioning for connections
diff --git a/...c/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx b/...c/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx
@@ -4,7 +4,6 @@ import type {
 } from '@liam-hq/db-structure'
 import { DiamondFillIcon, DiamondIcon, KeyRound, Link } from '@liam-hq/ui'
 import { Handle, Position } from '@xyflow/react'
-import clsx from 'clsx'
 import type { FC } from 'react'
 import styles from './TableColumn.module.css'
 
@@ -70,7 +69,7 @@ export const TableColumn: FC<TableColumnProps> = ({
           id={handleId}
           type="source"
           position={Position.Right}
-          className={clsx([styles.handle])}
+          className={styles.handle}
         />
       )}
 
@@ -79,7 +78,7 @@ export const TableColumn: FC<TableColumnProps> = ({
           id={handleId}
           type="target"
           position={Position.Left}
-          className={clsx([styles.handle])}
+          className={styles.handle}
         />
       )}
     </li>

diff --git a/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css b/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css
@@ -23,3 +23,18 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.handle {
+  top: auto;
+  opacity: 0;
+}
+
+.handle[data-handlepos='right'] {
+  transform: translate(50%, 0%);
+  right: -17px;
+}
+
+.handle[data-handlepos='left'] {
+  transform: translate(-50%, 0%);
+  left: -20px;
+}
diff --git a/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
@@ -49,10 +49,20 @@ export const TableHeader: FC<Props> = ({ data }) => {
       {showMode === 'TABLE_NAME' && (
         <>
           {isTarget && (
-            <Handle id={name} type="target" position={Position.Left} />
+            <Handle
+              id={name}
+              type="target"
+              position={Position.Left}
+              className={styles.handle}
+            />
           )}
           {isSource && (
-            <Handle id={name} type="source" position={Position.Right} />
+            <Handle
+              id={name}
+              type="source"
+              position={Position.Right}
+              className={styles.handle}
+            />
           )}
         </>
       )}