Skip to content

Commit 87374ea

Browse files
TagiMagiTagiMagi
committed
get functionality for selecting the edges along with the connected nodes
1 parent 3319100 commit 87374ea

File tree

3 files changed

+121
-84
lines changed

3 files changed

+121
-84
lines changed

‎src/components/ReactFlow/Flow.tsx

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ const nodeTypes = {
1414

1515
export default function Flow(): JSX.Element {
1616
// set up states for nodes and edges
17-
const { edges, setEdges, nodes, setNodes, onNodesChange, onEdgesChange, onConnect } = useFlowStore((state) => state);
17+
const { edges, setEdges, nodes, setNodes, onNodesChange, onEdgesChange, onConnect } =
18+
useFlowStore((state) => state);
1819
const { schemaStore } = useSchemaStore((state) => state);
19-
20+
2021
// re-render every time schemaStore updates
2122

2223
useEffect(() => {
@@ -31,7 +32,41 @@ export default function Flow(): JSX.Element {
3132
setNodes(initialNodes);
3233
}
3334

34-
console.log('onNodesChange: ', onNodesChange)
35+
console.log('onNodesChange: ', onNodesChange);
36+
37+
const handleNodeClick = (event, node) => {
38+
// Find edges connected to the clicked node and update their selected property
39+
const updatedEdges = edges.map((edge) => {
40+
if (edge.source === node.id || edge.target === node.id) {
41+
return {
42+
...edge,
43+
style: {
44+
//strokeWidth: 2,
45+
...edge.style,
46+
stroke: '#fedd0a',
47+
},
48+
markerEnd: {
49+
...edge.markerEnd,
50+
color: '#fedd0a',
51+
},
52+
};
53+
}
54+
return {
55+
...edge,
56+
style: {
57+
//strokeWidth: 2,
58+
...edge.style,
59+
stroke: '#085c84',
60+
},
61+
markerEnd: {
62+
...edge.markerEnd,
63+
color: '#085c84',
64+
},
65+
};
66+
});
67+
68+
setEdges(updatedEdges);
69+
};
3570

3671
// renders React Flow canvas
3772
return (
@@ -42,6 +77,7 @@ export default function Flow(): JSX.Element {
4277
edges={edges}
4378
onEdgesChange={onEdgesChange}
4479
onConnect={onConnect}
80+
onNodeClick={handleNodeClick}
4581
nodeTypes={nodeTypes}
4682
fitView
4783
>

‎src/components/ReactFlow/TableNode.tsx

Lines changed: 76 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import 'reactflow/dist/style.css';
44
import TableNodeColumn from './TableNodeColumn';
55
import { FaRegPlusSquare } from 'react-icons/fa';
66
import useSettingsStore from '../../store/settingsStore';
7-
import { DataNodeData } from '@/Types'
8-
7+
import { DataNodeData } from '@/Types';
98

109
export default function TableNode({ data }) {
1110
const tableName = data.table[0];
@@ -18,7 +17,7 @@ export default function TableNode({ data }) {
1817
// schema edges to match source and target handles of edges to handle id
1918
const tableHandles = [];
2019
for (let i = 0; i < data.edges.length; i++) {
21-
if (data.edges[i].source === tableName) {
20+
if (data.edges[i].source === tableName) {
2221
//make handle placement dynamic, we need to know the column of our source
2322
let columnNumberSource =
2423
columnData.findIndex((obj) => obj.Name === data.edges[i].sourceHandle) + 1;
@@ -31,7 +30,7 @@ export default function TableNode({ data }) {
3130
id={data.edges[i].sourceHandle}
3231
style={{
3332
background: 'transparent',
34-
top: 67 + ((columnNumberSource-1)*24),
33+
top: 67 + (columnNumberSource - 1) * 24,
3534
// bottom: 'auto',
3635
}}
3736
/>
@@ -51,7 +50,7 @@ export default function TableNode({ data }) {
5150
id={data.edges[i].targetHandle}
5251
style={{
5352
background: 'transparent',
54-
top: 67 + ((columnNumberTarget-1)*24),
53+
top: 67 + (columnNumberTarget - 1) * 24,
5554
// bottom: 'auto',
5655
}}
5756
/>
@@ -63,85 +62,84 @@ export default function TableNode({ data }) {
6362
return (
6463
<>
6564
<div className="table-node transition-colors duration-500" key={tableName}>
66-
<div className="flex items-center justify-between table-header relative bg-[#075985] dark:bg-opacity-75">
65+
<div className="table-header relative flex items-center justify-between bg-[#075985] dark:bg-opacity-75">
6766
{/* <NodeResizer minWidth={100} minHeight={30} /> */}
6867
{tableHandles}
6968
<div>
7069
<label
71-
htmlFor="text"
72-
className="bg-[#075985] text-white text-stroke-black dark:bg-opacity-0"
73-
style={{
74-
'marginLeft': '0px'
75-
}}
76-
>
77-
{tableName}
78-
</label>
79-
</div>
80-
<div className="addRowBtn ml-3 mb-1.5">
81-
<button
82-
className="add-field transition-colors duration-500 hover:text-[#618fa7] dark:text-[#fbf3de] dark:hover:text-[#618fa7] bg-transparent"
83-
onClick={() => setInputModalState(true, 'column', tableName)}
84-
>
85-
<FaRegPlusSquare size={20} className="text-white" />
86-
</button>
87-
</div>
88-
</div>
70+
htmlFor="text"
71+
className="text-stroke-black bg-[#075985] text-white dark:bg-opacity-0"
72+
style={{
73+
marginLeft: '0px',
74+
}}
75+
>
76+
{tableName}
77+
</label>
78+
</div>
79+
<div className="addRowBtn mb-1.5 ml-3">
80+
<button
81+
className="add-field bg-transparent transition-colors duration-500 hover:text-[#618fa7] dark:text-[#fbf3de] dark:hover:text-[#618fa7]"
82+
onClick={() => setInputModalState(true, 'column', tableName)}
83+
>
84+
<FaRegPlusSquare size={20} className="text-white" />
85+
</button>
86+
</div>
87+
</div>
8988

90-
<div
91-
style={{ maxHeight: "325px", maxWidth: "600px" }}
92-
className="nowheel overflow-auto"
93-
>
94-
<div className="table-bg transition-colors duration-500 dark:bg-slate-700">
95-
<table className="transition-colors duration-500 dark:text-[#fbf3de]">
96-
<thead>
97-
<tr className="head-column">
98-
<th
99-
scope="col"
100-
className="transition-colors duration-500 dark:text-[#fbf3de]"
101-
>
102-
<b>Column</b>
103-
</th>
104-
<th
105-
scope="col"
106-
className="transition-colors duration-500 dark:text-[#fbf3de]"
107-
>
108-
<b>Type</b>
109-
</th>
110-
<th
111-
scope="col"
112-
className="transition-colors duration-500 dark:text-[#fbf3de]"
113-
>
114-
<b>Constraints</b>
115-
</th>
116-
<th
117-
scope="col"
118-
className="transition-colors duration-500 dark:text-[#fbf3de]"
119-
>
120-
<b>PK</b>
121-
</th>
122-
<th
123-
scope="col"
124-
className="transition-colors duration-500 dark:text-[#fbf3de]"
125-
>
126-
<b>FK</b>
127-
</th>
128-
</tr>
129-
</thead>
130-
<tbody>
131-
{/* generates dynamic columns */}
132-
{columnData.map((column, index) => (
133-
<TableNodeColumn
134-
column={column}
135-
key={`${tableName}-column${index}`}
136-
id={`${tableName}-column${index}`}
137-
/>
138-
))}
139-
</tbody>
140-
</table>
141-
</div>
89+
<div
90+
style={{ maxHeight: '325px', maxWidth: '600px' }}
91+
className="nowheel overflow-auto"
92+
>
93+
<div className="table-bg transition-colors duration-500 dark:bg-slate-700">
94+
<table className="transition-colors duration-500 dark:text-[#fbf3de]">
95+
<thead>
96+
<tr className="head-column">
97+
<th
98+
scope="col"
99+
className="transition-colors duration-500 dark:text-[#fbf3de]"
100+
>
101+
<b>Column</b>
102+
</th>
103+
<th
104+
scope="col"
105+
className="transition-colors duration-500 dark:text-[#fbf3de]"
106+
>
107+
<b>Type</b>
108+
</th>
109+
<th
110+
scope="col"
111+
className="transition-colors duration-500 dark:text-[#fbf3de]"
112+
>
113+
<b>Constraints</b>
114+
</th>
115+
<th
116+
scope="col"
117+
className="transition-colors duration-500 dark:text-[#fbf3de]"
118+
>
119+
<b>PK</b>
120+
</th>
121+
<th
122+
scope="col"
123+
className="transition-colors duration-500 dark:text-[#fbf3de]"
124+
>
125+
<b>FK</b>
126+
</th>
127+
</tr>
128+
</thead>
129+
<tbody>
130+
{/* generates dynamic columns */}
131+
{columnData.map((column, index) => (
132+
<TableNodeColumn
133+
column={column}
134+
key={`${tableName}-column${index}`}
135+
id={`${tableName}-column${index}`}
136+
/>
137+
))}
138+
</tbody>
139+
</table>
140+
</div>
141+
</div>
142142
</div>
143-
</div>
144143
</>
145144
);
146145
}
147-

‎src/styles/index.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,10 @@
295295
box-shadow: 0 0 0 0.5px #1a192b;
296296
outline: none;
297297
}
298+
.react-flow__node.selected {
299+
border: 4px solid #ffc444; /* Change the border color for selected nodes */
300+
/* Change the background color for selected nodes */
301+
}
298302
.react-flow__node-group {
299303
background-color: rgba(240, 240, 240, 0.25);
300304
}
@@ -685,7 +689,7 @@ select:focus {
685689
justify-content: space-between;
686690
border-bottom: 1px solid gray;
687691
padding: 10px 0px;
688-
width: 100%
692+
width: 100%;
689693
}
690694

691695
.column-input > div {
@@ -700,7 +704,6 @@ select:focus {
700704
height: 25px;
701705
}
702706

703-
704707
.column-input select {
705708
font-size: 0.9rem;
706709
background-color: white;
@@ -753,4 +756,4 @@ select:focus {
753756
justify-content: space-evenly;
754757
width: 200px;
755758
margin-left: 30px;
756-
}
759+
}

0 commit comments

Comments
 (0)