Merge pull request #224 from liam-hq/highlight_node_cardinalities

Highlight source node cardinalities
liam-hq · Dec 12, 2024 · 210ca57 · 210ca57
2 parents 9b418b3 + 6056d02
commit 210ca57
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -58,33 +58,47 @@ export const ERDContent: FC<Props> = ({
       setEdges((edges) =>
         edges.map((e) =>
           e.source === id || e.target === id
-            ? { ...e, animated: true, data: { ...e.data, isHovered: true } }
+            ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
             : e,
         ),
       )
+      setNodes((nodes) =>
+        nodes.map((n) =>
+          n.id === id ? { ...n, data: { ...n.data, isHighlighted: true } } : n,
+        ),
+      )
     },
-    [setEdges],
+    [setNodes, setEdges],
   )
 
   const handleMouseLeaveNode: NodeMouseHandler<Node> = useCallback(
     (_, { id }) => {
       setEdges((edges) =>
         edges.map((e) =>
           e.source === id || e.target === id
-            ? { ...e, animated: false, data: { ...e.data, isHovered: false } }
+            ? {
+                ...e,
+                animated: false,
+                data: { ...e.data, isHighlighted: false },
+              }
             : e,
         ),
       )
+      setNodes((nodes) =>
+        nodes.map((n) =>
+          n.id === id ? { ...n, data: { ...n.data, isHighlighted: false } } : n,
+        ),
+      )
     },
-    [setEdges],
+    [setNodes, setEdges],
   )
 
   const handleMouseEnterEdge: EdgeMouseHandler<Edge> = useCallback(
     (_, { id }) => {
       setEdges((edges) =>
         edges.map((e) =>
           e.id === id
-            ? { ...e, animated: true, data: { ...e.data, isHovered: true } }
+            ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
             : e,
         ),
       )
@@ -97,7 +111,11 @@ export const ERDContent: FC<Props> = ({
       setEdges((edges) =>
         edges.map((e) =>
           e.id === id
-            ? { ...e, animated: false, data: { ...e.data, isHovered: false } }
+            ? {
+                ...e,
+                animated: false,
+                data: { ...e.data, isHighlighted: false },
+              }
             : e,
         ),
       )

diff --git a/...ages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx b/...ages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.tsx
@@ -10,7 +10,7 @@ import type { FC } from 'react'
 import styles from './RelationshipEdge.module.css'
 
 type Data = {
-  isHovered: boolean
+  isHighlighted: boolean
 }
 
 export type RelationshipEdgeType = Edge<Data, 'relationship'>
@@ -41,7 +41,7 @@ export const RelationshipEdge: FC<Props> = ({
       <BaseEdge
         id={id}
         path={edgePath}
-        className={clsx(styles.edge, data?.isHovered && styles.hovered)}
+        className={clsx(styles.edge, data?.isHighlighted && styles.hovered)}
       />
     </>
   )

diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
@@ -77,10 +77,12 @@
 
 .handle[data-handlepos='right'] {
   transform: translate(50%, 0%);
+  right: -20px;
 }
 
 .handle[data-handlepos='left'] {
   transform: translate(-50%, 0%);
+  left: -20px;
 }
 
 .handleCardinality {
@@ -91,6 +93,12 @@
   color: var(--global-border);
 }
 
+.handleCardinalityHighlighted {
+  color: var(--node-layout);
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
 .handleCardinalityRight {
   right: -23px;
 }

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -21,13 +21,14 @@ import styles from './TableNode.module.css'
 
 type Data = {
   table: Table
+  isHighlighted: boolean
 }
 
 type TableNodeType = Node<Data, 'Table'>
 
 type Props = NodeProps<TableNodeType>
 
-export const TableNode: FC<Props> = ({ data: { table } }) => {
+export const TableNode: FC<Props> = ({ data: { table, isHighlighted } }) => {
   const { relationships } = useDBStructureStore()
   const {
     active: { tableName },
@@ -108,6 +109,7 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
                       className={clsx([
                         styles.handleCardinality,
                         styles.handleCardinalityRight,
+                        isHighlighted && styles.handleCardinalityHighlighted,
                       ])}
                     />
                   </>
@@ -127,6 +129,8 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
                           className={clsx([
                             styles.handleCardinality,
                             styles.handleCardinalityLeft,
+                            isHighlighted &&
+                              styles.handleCardinalityHighlighted,
                           ])}
                         />
                       ))
@@ -135,6 +139,8 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
                           className={clsx([
                             styles.handleCardinality,
                             styles.handleCardinalityLeft,
+                            isHighlighted &&
+                              styles.handleCardinalityHighlighted,
                           ])}
                         />
                       ))