Skip to content

Commit 5674d5c

Browse files
RanitManikRanitManik
committed
reformat code
1 parent 3657173 commit 5674d5c

File tree

3 files changed

+121
-115
lines changed

3 files changed

+121
-115
lines changed

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"tabWidth": 4,
3+
"plugins": [
4+
"prettier-plugin-tailwindcss"
5+
]
6+
}

‎app/layout.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,33 @@ import localFont from "next/font/local";
33
import "./globals.css";
44

55
const geistSans = localFont({
6-
src: "./fonts/GeistVF.woff",
7-
variable: "--font-geist-sans",
8-
weight: "100 900",
6+
src: "./fonts/GeistVF.woff",
7+
variable: "--font-geist-sans",
8+
weight: "100 900",
99
});
1010
const geistMono = localFont({
11-
src: "./fonts/GeistMonoVF.woff",
12-
variable: "--font-geist-mono",
13-
weight: "100 900",
11+
src: "./fonts/GeistMonoVF.woff",
12+
variable: "--font-geist-mono",
13+
weight: "100 900",
1414
});
1515

1616
export const metadata: Metadata = {
17-
title: "Create Next App",
18-
description: "Generated by create next app",
17+
title: "Create Next App",
18+
description: "Generated by create next app",
1919
};
2020

2121
export default function RootLayout({
22-
children,
22+
children,
2323
}: Readonly<{
24-
children: React.ReactNode;
24+
children: React.ReactNode;
2525
}>) {
26-
return (
27-
<html lang="en">
28-
<body
29-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30-
>
31-
{children}
32-
</body>
33-
</html>
34-
);
26+
return (
27+
<html lang="en">
28+
<body
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30+
>
31+
{children}
32+
</body>
33+
</html>
34+
);
3535
}

‎app/page.tsx

+96-96
Original file line numberDiff line numberDiff line change
@@ -2,120 +2,120 @@
22

33
import React, {useCallback, useState} from "react";
44
import {
5-
addEdge,
6-
Background,
7-
BackgroundVariant,
8-
Controls,
9-
MiniMap,
10-
ReactFlow,
11-
useEdgesState,
12-
useNodesState,
5+
addEdge,
6+
Background,
7+
BackgroundVariant,
8+
Controls,
9+
MiniMap,
10+
ReactFlow,
11+
useEdgesState,
12+
useNodesState,
1313
} from "reactflow";
1414

1515
import "reactflow/dist/style.css";
1616
import {v4 as uuidv4} from "uuid";
1717
import {Button} from "@/components/ui/button";
1818

1919
const initialNodes = [
20-
{id: "1", position: {x: 50, y: 50}, data: {label: "Node 1"}},
21-
{id: "2", position: {x: 50, y: 200}, data: {label: "Node 2"}},
20+
{id: "1", position: {x: 50, y: 50}, data: {label: "Node 1"}},
21+
{id: "2", position: {x: 50, y: 200}, data: {label: "Node 2"}},
2222
];
2323
const initialEdges = [{id: "e1-2", source: "1", target: "2", animated: true}];
2424

2525
export default function Page() {
26-
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
27-
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
28-
const [selectedNode, setSelectedNode] = useState(null);
26+
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
27+
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
28+
const [selectedNode, setSelectedNode] = useState(null);
2929

30-
const onConnect = useCallback(
31-
(params: any) =>
32-
setEdges((eds) => addEdge({...params, animated: true}, eds)),
33-
[setEdges],
34-
);
30+
const onConnect = useCallback(
31+
(params: any) =>
32+
setEdges((eds) => addEdge({...params, animated: true}, eds)),
33+
[setEdges],
34+
);
3535

36-
const onNodeSelect = useCallback((event: any, node: any) => {
37-
setSelectedNode(node);
38-
}, []);
36+
const onNodeSelect = useCallback((event: any, node: any) => {
37+
setSelectedNode(node);
38+
}, []);
3939

40-
const addNode = useCallback(() => {
41-
const newNodeId = uuidv4();
42-
const newNode = {
43-
id: newNodeId,
44-
data: {label: `Node ${nodes.length + 1}`},
45-
position: {
46-
x: Math.random() * 400,
47-
y: Math.random() * 400,
48-
},
49-
};
50-
setNodes((prevNodes) => [...prevNodes, newNode]);
40+
const addNode = useCallback(() => {
41+
const newNodeId = uuidv4();
42+
const newNode = {
43+
id: newNodeId,
44+
data: {label: `Node ${nodes.length + 1}`},
45+
position: {
46+
x: Math.random() * 400,
47+
y: Math.random() * 400,
48+
},
49+
};
50+
setNodes((prevNodes) => [...prevNodes, newNode]);
5151

52-
if (nodes.length > 0) {
53-
const newEdge = {
54-
id: `e${nodes[nodes.length - 1].id}-${newNodeId}`,
55-
source: nodes[nodes.length - 1].id,
56-
target: newNodeId,
57-
};
58-
setEdges((prevEdges) =>
59-
addEdge({...newEdge, animated: true}, prevEdges),
60-
);
61-
}
62-
}, [nodes, setNodes, setEdges]);
52+
if (nodes.length > 0) {
53+
const newEdge = {
54+
id: `e${nodes[nodes.length - 1].id}-${newNodeId}`,
55+
source: nodes[nodes.length - 1].id,
56+
target: newNodeId,
57+
};
58+
setEdges((prevEdges) =>
59+
addEdge({...newEdge, animated: true}, prevEdges),
60+
);
61+
}
62+
}, [nodes, setNodes, setEdges]);
6363

64-
const clearAll = () => {
65-
setNodes([]);
66-
setEdges([]);
67-
setSelectedNode(null);
68-
};
64+
const clearAll = () => {
65+
setNodes([]);
66+
setEdges([]);
67+
setSelectedNode(null);
68+
};
6969

70-
const deleteSelectedNode = useCallback(() => {
71-
if (selectedNode) {
72-
setNodes((nds) =>
73-
nds.filter(
74-
(node) => (node as any).id !== (selectedNode as any).id,
75-
),
76-
);
77-
setEdges((eds) =>
78-
eds.filter(
79-
(edge) =>
80-
edge.source !== (selectedNode as any).id &&
81-
edge.target !== (selectedNode as any).id,
82-
),
83-
);
84-
setSelectedNode(null);
85-
}
86-
}, [selectedNode, setNodes, setEdges]);
70+
const deleteSelectedNode = useCallback(() => {
71+
if (selectedNode) {
72+
setNodes((nds) =>
73+
nds.filter(
74+
(node) => (node as any).id !== (selectedNode as any).id,
75+
),
76+
);
77+
setEdges((eds) =>
78+
eds.filter(
79+
(edge) =>
80+
edge.source !== (selectedNode as any).id &&
81+
edge.target !== (selectedNode as any).id,
82+
),
83+
);
84+
setSelectedNode(null);
85+
}
86+
}, [selectedNode, setNodes, setEdges]);
8787

88-
return (
89-
<div className="h-screen w-screen">
90-
<div className="absolute left-0 top-0 z-10 space-x-2 p-2">
91-
<Button onClick={addNode}>Add Node</Button>
92-
<Button onClick={clearAll}>Clear All</Button>
93-
{selectedNode && (
94-
<Button
95-
onClick={deleteSelectedNode}
96-
variant="destructive"
97-
className="ml-2"
88+
return (
89+
<div className="h-screen w-screen">
90+
<div className="absolute left-0 top-0 z-10 space-x-2 p-2">
91+
<Button onClick={addNode}>Add Node</Button>
92+
<Button onClick={clearAll}>Clear All</Button>
93+
{selectedNode && (
94+
<Button
95+
onClick={deleteSelectedNode}
96+
variant="destructive"
97+
className="ml-2"
98+
>
99+
Delete Node
100+
</Button>
101+
)}
102+
</div>
103+
<ReactFlow
104+
nodes={nodes}
105+
edges={edges}
106+
onNodesChange={onNodesChange}
107+
onEdgesChange={onEdgesChange}
108+
onConnect={onConnect}
109+
onNodeClick={onNodeSelect}
98110
>
99-
Delete Node
100-
</Button>
101-
)}
111+
<Controls/>
112+
<MiniMap/>
113+
<Background
114+
variant={BackgroundVariant.Dots}
115+
gap={12}
116+
size={1}
117+
/>
118+
</ReactFlow>
102119
</div>
103-
<ReactFlow
104-
nodes={nodes}
105-
edges={edges}
106-
onNodesChange={onNodesChange}
107-
onEdgesChange={onEdgesChange}
108-
onConnect={onConnect}
109-
onNodeClick={onNodeSelect}
110-
>
111-
<Controls/>
112-
<MiniMap/>
113-
<Background
114-
variant={BackgroundVariant.Dots}
115-
gap={12}
116-
size={1}
117-
/>
118-
</ReactFlow>
119-
</div>
120-
);
120+
);
121121
}

0 commit comments

Comments
 (0)