From d6d08b1648fdef0572408c79223e9687e0181fbc Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Thu, 12 Dec 2024 16:47:42 +0900 Subject: [PATCH 1/2] Add highlighting logic for target node --- .../ERDRenderer/ERDContent/ERDContent.tsx | 95 +++++++++++++------ .../ERDContent/TableNode/TableNode.tsx | 15 ++- 2 files changed, 79 insertions(+), 31 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 index 0606cc008..674f47f78 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx @@ -55,42 +55,83 @@ export const ERDContent: FC = ({ const handleMouseEnterNode: NodeMouseHandler = useCallback( (_, { id }) => { - setEdges((edges) => - edges.map((e) => - e.source === id || e.target === id - ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } } - : e, - ), + const relatedEdges = edges.filter( + (e) => e.source === id || e.target === id, ) - setNodes((nodes) => - nodes.map((n) => - n.id === id ? { ...n, data: { ...n.data, isHighlighted: true } } : n, - ), + + const updatedEdges = edges.map((e) => + relatedEdges.includes(e) + ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } } + : e, ) + + const updatedNodes = nodes.map((node) => { + if (node.id === id) { + return { ...node, data: { ...node.data, isHighlighted: true } } + } + + const targethighlightedRelationships = relatedEdges + .filter((edge) => edge.source === id && edge.target === node.id) + .map((edge) => edge.targetHandle) + + const sourcehighlightedRelationships = relatedEdges + .filter((edge) => edge.target === id && edge.source === node.id) + .map((edge) => edge.sourceHandle) + + return { + ...node, + data: { + ...node.data, + highlightedCardinalities: + targethighlightedRelationships.concat( + sourcehighlightedRelationships, + ) || [], + }, + } + }) + + setEdges(updatedEdges) + setNodes(updatedNodes) }, - [setNodes, setEdges], + [edges, nodes, setNodes, setEdges], ) const handleMouseLeaveNode: NodeMouseHandler = useCallback( (_, { id }) => { - setEdges((edges) => - edges.map((e) => - e.source === id || e.target === id - ? { - ...e, - animated: false, - data: { ...e.data, isHighlighted: false }, - } - : e, - ), - ) - setNodes((nodes) => - nodes.map((n) => - n.id === id ? { ...n, data: { ...n.data, isHighlighted: false } } : n, - ), + const updatedEdges = edges.map((e) => + e.source === id || e.target === id + ? { + ...e, + animated: false, + data: { ...e.data, isHighlighted: false }, + } + : e, ) + + const updatedNodes = nodes.map((node) => { + if (node.id === id) { + return { + ...node, + data: { + ...node.data, + isHighlighted: false, + }, + } + } + + return { + ...node, + data: { + ...node.data, + highlightedCardinalities: [], + }, + } + }) + + setEdges(updatedEdges) + setNodes(updatedNodes) }, - [setNodes, setEdges], + [edges, nodes, setNodes, setEdges], ) const handleMouseEnterEdge: EdgeMouseHandler = useCallback( 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 index 1936b6215..02ae0e527 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -22,13 +22,16 @@ import styles from './TableNode.module.css' type Data = { table: Table isHighlighted: boolean + highlightedCardinalities: string[] } type TableNodeType = Node type Props = NodeProps -export const TableNode: FC = ({ data: { table, isHighlighted } }) => { +export const TableNode: FC = ({ + data: { table, isHighlighted, highlightedCardinalities }, +}) => { const { relationships } = useDBStructureStore() const { active: { tableName }, @@ -109,7 +112,9 @@ export const TableNode: FC = ({ data: { table, isHighlighted } }) => { className={clsx([ styles.handleCardinality, styles.handleCardinalityRight, - isHighlighted && styles.handleCardinalityHighlighted, + (isHighlighted || + highlightedCardinalities?.includes(handleId)) && + styles.handleCardinalityHighlighted, ])} /> @@ -129,7 +134,8 @@ export const TableNode: FC = ({ data: { table, isHighlighted } }) => { className={clsx([ styles.handleCardinality, styles.handleCardinalityLeft, - isHighlighted && + (isHighlighted || + highlightedCardinalities?.includes(handleId)) && styles.handleCardinalityHighlighted, ])} /> @@ -139,7 +145,8 @@ export const TableNode: FC = ({ data: { table, isHighlighted } }) => { className={clsx([ styles.handleCardinality, styles.handleCardinalityLeft, - isHighlighted && + (isHighlighted || + highlightedCardinalities?.includes(handleId)) && styles.handleCardinalityHighlighted, ])} /> From a279f21bbd70d5f89af161ce0e3ff1077a146e1b Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Thu, 12 Dec 2024 17:00:21 +0900 Subject: [PATCH 2/2] Fix property names --- .../components/ERDRenderer/ERDContent/ERDContent.tsx | 12 +++++------- .../ERDRenderer/ERDContent/TableNode/TableNode.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 12 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 index 674f47f78..eb326fc1d 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx @@ -70,11 +70,11 @@ export const ERDContent: FC = ({ return { ...node, data: { ...node.data, isHighlighted: true } } } - const targethighlightedRelationships = relatedEdges + const highlightedTargetHandles = relatedEdges .filter((edge) => edge.source === id && edge.target === node.id) .map((edge) => edge.targetHandle) - const sourcehighlightedRelationships = relatedEdges + const highlightedSourceHandles = relatedEdges .filter((edge) => edge.target === id && edge.source === node.id) .map((edge) => edge.sourceHandle) @@ -82,10 +82,8 @@ export const ERDContent: FC = ({ ...node, data: { ...node.data, - highlightedCardinalities: - targethighlightedRelationships.concat( - sourcehighlightedRelationships, - ) || [], + highlightedHandles: + highlightedTargetHandles.concat(highlightedSourceHandles) || [], }, } }) @@ -123,7 +121,7 @@ export const ERDContent: FC = ({ ...node, data: { ...node.data, - highlightedCardinalities: [], + highlightedHandles: [], }, } }) 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 index 02ae0e527..7ec65625b 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -22,7 +22,7 @@ import styles from './TableNode.module.css' type Data = { table: Table isHighlighted: boolean - highlightedCardinalities: string[] + highlightedHandles: string[] } type TableNodeType = Node @@ -30,7 +30,7 @@ type TableNodeType = Node type Props = NodeProps export const TableNode: FC = ({ - data: { table, isHighlighted, highlightedCardinalities }, + data: { table, isHighlighted, highlightedHandles }, }) => { const { relationships } = useDBStructureStore() const { @@ -113,7 +113,7 @@ export const TableNode: FC = ({ styles.handleCardinality, styles.handleCardinalityRight, (isHighlighted || - highlightedCardinalities?.includes(handleId)) && + highlightedHandles?.includes(handleId)) && styles.handleCardinalityHighlighted, ])} /> @@ -135,7 +135,7 @@ export const TableNode: FC = ({ styles.handleCardinality, styles.handleCardinalityLeft, (isHighlighted || - highlightedCardinalities?.includes(handleId)) && + highlightedHandles?.includes(handleId)) && styles.handleCardinalityHighlighted, ])} /> @@ -146,7 +146,7 @@ export const TableNode: FC = ({ styles.handleCardinality, styles.handleCardinalityLeft, (isHighlighted || - highlightedCardinalities?.includes(handleId)) && + highlightedHandles?.includes(handleId)) && styles.handleCardinalityHighlighted, ])} />