Skip to content

Commit 6dbe91b

Browse files
RanitManikRanitManik
committed
added code
1 parent 4e1cc9a commit 6dbe91b

7 files changed

+111
-21
lines changed

‎app/_components/initial-edges.jsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
export const initialEdges = [{ id: "b-c", source: "B", target: "C" }];
1+
export const initialEdges = [
2+
{ id: "a1-a2", source: "A-1", target: "A-2" },
3+
{ id: "a2-b", source: "A-2", target: "B" },
4+
{ id: "a2-c", source: "A-2", target: "C" },
5+
{ id: "b1-b2", source: "B-1", target: "B-2" },
6+
{ id: "b1-b3", source: "B-1", target: "B-3" },
7+
];

‎app/_components/initial-nodes.jsx

+55-6
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,75 @@ export const initialNodes = [
22
{
33
id: "A",
44
type: "group",
5-
data: { label: null },
65
position: { x: 0, y: 0 },
76
style: {
87
width: 170,
98
height: 140,
109
},
1110
},
1211
{
13-
id: "B",
12+
id: "A-1",
1413
type: "input",
15-
data: { label: "child node 1" },
14+
data: { label: "Child Node 1" },
1615
position: { x: 10, y: 10 },
1716
parentId: "A",
1817
extent: "parent",
1918
},
2019
{
21-
id: "C",
22-
data: { label: "child node 2" },
20+
id: "A-2",
21+
data: { label: "Child Node 2" },
2322
position: { x: 10, y: 90 },
2423
parentId: "A",
2524
extent: "parent",
2625
},
27-
];
26+
{
27+
id: "B",
28+
type: "output",
29+
position: { x: -100, y: 200 },
30+
data: null,
31+
style: {
32+
width: 170,
33+
height: 140,
34+
backgroundColor: "rgba(240,240,240,0.25)",
35+
},
36+
},
37+
{
38+
id: "B-1",
39+
data: { label: "Child 1" },
40+
position: { x: 50, y: 10 },
41+
parentId: "B",
42+
extent: "parent",
43+
draggable: false,
44+
style: {
45+
width: 60,
46+
},
47+
},
48+
{
49+
id: "B-2",
50+
data: { label: "Child 2" },
51+
position: { x: 10, y: 90 },
52+
parentId: "B",
53+
extent: "parent",
54+
draggable: false,
55+
style: {
56+
width: 60,
57+
},
58+
},
59+
{
60+
id: "B-3",
61+
data: { label: "Child 3" },
62+
position: { x: 100, y: 90 },
63+
parentId: "B",
64+
extent: "parent",
65+
draggable: false,
66+
style: {
67+
width: 60,
68+
},
69+
},
70+
{
71+
id: "C",
72+
type: "output",
73+
position: { x: 100, y: 200 },
74+
data: { label: "Node C" },
75+
},
76+
];

‎app/_components/resizable-node-selected.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { memo } from "react";
2+
import { Handle, NodeResizer, Position } from "@xyflow/react";
3+
4+
const ResizableNodeSelected = ({ data, selected }) => {
5+
return (
6+
<>
7+
<NodeResizer
8+
color="#ff0071"
9+
isVisible={selected}
10+
minWidth={100}
11+
minHeight={30}
12+
/>
13+
<Handle type="target" position={Position.Left} />
14+
<div className="absolute -top-5 left-0 text-xs">{data.label}</div>
15+
<Handle type="source" position={Position.Right} />
16+
</>
17+
);
18+
};
19+
20+
export default memo(ResizableNodeSelected);

‎app/_components/resizable-node.jsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { memo } from "react";
2+
import { Handle, NodeResizer, Position } from "@xyflow/react";
3+
4+
const ResizableNode = ({ data }) => {
5+
return (
6+
<>
7+
<NodeResizer minWidth={100} minHeight={30} />
8+
<Handle type="target" position={Position.Left} />
9+
<div className="absolute -top-5 left-0 text-xs">{data.label}</div>
10+
<Handle type="source" position={Position.Right} />
11+
</>
12+
);
13+
};
14+
15+
export default memo(ResizableNode);

‎app/layout.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
33
import React from "react";
4-
import { Providers } from "@/app/providers";
54

65
export const metadata: Metadata = {
76
title: "Create Next App",
@@ -15,9 +14,7 @@ export default function RootLayout({
1514
}>) {
1615
return (
1716
<html lang="en">
18-
<body>
19-
<Providers>{children}</Providers>
20-
</body>
17+
<body>{children}</body>
2118
</html>
2219
);
2320
}

‎app/page.jsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,32 @@ import { AddStageModal } from "./_components/add-stage-modal";
2121
import { initialNodes } from "./_components/initial-nodes";
2222
import { initialEdges } from "./_components/initial-edges";
2323
import { CustomEdge } from "./_components/custom-edge";
24+
import ResizableNodeSelected from "./_components/resizable-node-selected";
25+
import ResizableNode from "./_components/resizable-node";
2426

27+
// Additional Styling
28+
/*
2529
const nodeTypeStyles = {
2630
group: { backgroundColor: "#3e98ff", color: "white" },
2731
input: { backgroundColor: "#59b36d", color: "white" },
2832
output: { backgroundColor: "#6865A5", color: "white" },
2933
default: { backgroundColor: "#ff0072", color: "white" },
34+
labeledGroupNode: { backgroundColor: "#7aace9", color: "white" }
3035
};
3136
3237
const applyNodeStyles = (node) => ({
3338
...node,
3439
style: nodeTypeStyles[node.type] || nodeTypeStyles.default,
3540
});
41+
*/
3642

43+
const nodeTypes = {
44+
ResizableNode,
45+
ResizableNodeSelected,
46+
};
3747
export default function Page() {
38-
const [nodes, setNodes] = useNodesState(initialNodes.map(applyNodeStyles));
39-
const [edges, setEdges] = useEdgesState(initialEdges.map(applyNodeStyles));
48+
const [nodes, setNodes] = useNodesState(initialNodes);
49+
const [edges, setEdges] = useEdgesState(initialEdges);
4050

4151
const defaultEdgeOptions = {
4252
animated: true,
@@ -83,6 +93,7 @@ export default function Page() {
8393
selectionMode={SelectionMode.Partial}
8494
fitView
8595
edgeTypes={edgeTypes}
96+
nodeTypes={nodeTypes}
8697
>
8798
<Controls />
8899
<MiniMap />

‎app/providers.jsx

-8
This file was deleted.

0 commit comments

Comments
 (0)