Skip to content

Commit 10136e6

Browse files
KAJdevKAJdev
committed
hook up state
1 parent 07e4aed commit 10136e6

5 files changed

Lines changed: 95 additions & 9 deletions

File tree

‎components/Bar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export function Bar({ onCreateNode }: Bar) {
3030
url: "https://place.dog/512/512",
3131
prompt: "a dog",
3232
steps: 30,
33+
cfg_scale: 7,
3334
},
3435
})
3536
}
@@ -45,6 +46,7 @@ export function Bar({ onCreateNode }: Bar) {
4546
data: {
4647
prompt: "a dog",
4748
temperature: 30,
49+
prediction: "",
4850
},
4951
})
5052
}

‎components/Nodes/Image.tsx‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
/* eslint-disable @next/next/no-img-element */
2+
import { Trash2 } from "lucide-react";
23
import { memo } from "react";
3-
import { Handle, Position, NodeProps } from "reactflow";
4+
import { Handle, Position, NodeProps, NodeToolbar } from "reactflow";
45
import "reactflow/dist/style.css";
6+
import { Nodes } from ".";
57
import { Label } from "../Label";
68

79
export type Image = NodeProps<{
810
url: string;
911

1012
prompt: string;
1113
steps: number;
14+
cfg_scale: number;
1215
}>;
1316

1417
export const Image = memo(function Image(node: Image) {
18+
const { editNode, deleteNode } = Nodes.use((state) => ({
19+
editNode: state.editNode,
20+
deleteNode: state.deleteNode,
21+
}));
22+
1523
return (
1624
<div className="rounded p-2 flex flex-col gap-2 bg-neutral-800 drop-shadow z-10 border border-white/10">
1725
<Handle
@@ -24,6 +32,16 @@ export const Image = memo(function Image(node: Image) {
2432
position={Position.Right}
2533
className="!border-none !bg-white !p-1"
2634
/>
35+
<NodeToolbar isVisible={node.selected}>
36+
<div className="bg-neutral-800 rounded flex flex-row overflow-hidden">
37+
<button
38+
onClick={() => deleteNode(node.id)}
39+
className="p-2 hover:bg-white/10 active:bg-white/20 text-red-400/80 duration-200 border-r border-white/10 first-of-type:border-l-transparent last-of-type:border-r-transparent"
40+
>
41+
<Trash2 size={16} />
42+
</button>
43+
</div>
44+
</NodeToolbar>
2745

2846
<img
2947
src={node.data.url}
@@ -36,6 +54,11 @@ export const Image = memo(function Image(node: Image) {
3654
<textarea
3755
className="px-1 py-[1px] rounded nodrag bg-neutral-900/50 focus:outline-none focus:border-indigo-500/50 border-transparent border-[2px]"
3856
value={node.data.prompt}
57+
onChange={(e) => {
58+
editNode(node.id, {
59+
prompt: e.target.value,
60+
});
61+
}}
3962
/>
4063
</div>
4164
<div className="flex flex-row gap-1 justify-between items-center text-sm">
@@ -44,14 +67,24 @@ export const Image = memo(function Image(node: Image) {
4467
type="number"
4568
value={node.data.steps}
4669
className="px-1 py-[1px] rounded w-1/2 nodrag bg-neutral-900/50 focus:outline-none focus:border-indigo-500/50 border-transparent border-[2px]"
70+
onChange={(e) => {
71+
editNode(node.id, {
72+
steps: Number(e.target.value),
73+
});
74+
}}
4775
/>
4876
</div>
4977
<div className="flex flex-row gap-1 justify-between items-center text-sm">
5078
<Label>CFG Scale</Label>
5179
<input
5280
type="number"
53-
value={node.data.steps}
81+
value={node.data.cfg_scale}
5482
className="px-1 py-[1px] rounded w-1/2 nodrag bg-neutral-900/50 focus:outline-none focus:border-indigo-500/50 border-transparent border-[2px]"
83+
onChange={(e) => {
84+
editNode(node.id, {
85+
cfg_scale: Number(e.target.value),
86+
});
87+
}}
5588
/>
5689
</div>
5790
</div>

‎components/Nodes/Initial.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable @next/next/no-img-element */
2+
import { Trash2 } from "lucide-react";
23
import { memo } from "react";
3-
import { Handle, Position, NodeProps } from "reactflow";
4+
import { Handle, Position, NodeProps, NodeToolbar } from "reactflow";
45
import "reactflow/dist/style.css";
56
import { Nodes } from ".";
67
import { Label } from "../Label";
@@ -11,8 +12,9 @@ export type Initial = NodeProps<{
1112
}>;
1213

1314
export const Initial = memo(function Initial(node: Initial) {
14-
const { editNode } = Nodes.use((state) => ({
15+
const { editNode, deleteNode } = Nodes.use((state) => ({
1516
editNode: state.editNode,
17+
deleteNode: state.deleteNode,
1618
}));
1719

1820
return (
@@ -23,6 +25,17 @@ export const Initial = memo(function Initial(node: Initial) {
2325
className="!border-none !bg-white !p-1"
2426
/>
2527

28+
<NodeToolbar isVisible={node.selected}>
29+
<div className="bg-neutral-800 rounded flex flex-row overflow-hidden">
30+
<button
31+
onClick={() => deleteNode(node.id)}
32+
className="p-2 hover:bg-white/10 active:bg-white/20 text-red-400/80 duration-200 border-r border-white/10 first-of-type:border-l-transparent last-of-type:border-r-transparent"
33+
>
34+
<Trash2 size={16} />
35+
</button>
36+
</div>
37+
</NodeToolbar>
38+
2639
{node.data.active ? (
2740
<button
2841
className={`font-medium px-3 py-1 w-full bg-red-800 rounded duration-200 hover:bg-red-900`}

‎components/Nodes/Transformer.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
/* eslint-disable @next/next/no-img-element */
2+
import { Trash2 } from "lucide-react";
23
import { memo } from "react";
3-
import { Handle, Position, NodeProps } from "reactflow";
4+
import { Handle, Position, NodeProps, NodeToolbar } from "reactflow";
45
import "reactflow/dist/style.css";
6+
import { Nodes } from ".";
57
import { Label } from "../Label";
68

79
export type Transformer = NodeProps<{
810
prompt: string;
911
temperature: number;
12+
13+
prediction: string;
1014
}>;
1115

1216
export const Transformer = memo(function Transformer(node: Transformer) {
17+
const { editNode, deleteNode } = Nodes.use((state) => ({
18+
editNode: state.editNode,
19+
deleteNode: state.deleteNode,
20+
}));
21+
1322
return (
1423
<div className="rounded p-2 flex flex-col min-w-[15rem] gap-2 bg-neutral-800 drop-shadow z-10 border border-white/10">
1524
<Handle
@@ -23,20 +32,37 @@ export const Transformer = memo(function Transformer(node: Transformer) {
2332
className="!border-none !bg-white !p-1"
2433
/>
2534

35+
<NodeToolbar isVisible={node.selected}>
36+
<div className="bg-neutral-800 rounded flex flex-row overflow-hidden">
37+
<button
38+
onClick={() => deleteNode(node.id)}
39+
className="p-2 hover:bg-white/10 active:bg-white/20 text-red-400/80 duration-200 border-r border-white/10 first-of-type:border-l-transparent last-of-type:border-r-transparent"
40+
>
41+
<Trash2 size={16} />
42+
</button>
43+
</div>
44+
</NodeToolbar>
45+
2646
<div className="flex flex-col gap-1 text-sm">
2747
<Label>Prompt</Label>
2848
<textarea
2949
className="px-1 py-[1px] rounded bg-neutral-900/50 nodrag focus:outline-none focus:border-indigo-500/50 border-transparent border-[2px]"
3050
value={node.data.prompt}
51+
onChange={(e) => {
52+
editNode(node.id, {
53+
prompt: e.target.value,
54+
});
55+
}}
3156
/>
3257
</div>
3358

3459
<div className="flex flex-col gap-1 text-sm">
3560
<Label>Prediction</Label>
3661
<textarea
3762
className="px-1 py-[1px] rounded bg-neutral-900/50 nodrag focus:outline-none focus:border-indigo-500/50 border-transparent border-[2px]"
38-
value={node.data.prompt}
63+
value={node.data.prediction}
3964
contentEditable={false}
65+
onChange={(e) => {}}
4066
/>
4167
</div>
4268
</div>

‎components/Nodes/index.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ export type NodesState = {
2323
onEdgesChange: OnEdgesChange;
2424
onConnect: OnConnect;
2525
addNode: (node: Node) => void;
26-
editNode: <T>(id: string, newData: Node<T>) => void;
26+
editNode: (id: string, newData: any) => void;
27+
deleteNode: (id: string) => void;
2728
};
2829

2930
export declare namespace Nodes {
@@ -64,18 +65,29 @@ export namespace Nodes {
6465
nodes: [...get().nodes, node],
6566
});
6667
},
67-
editNode: (id: string, newData: Node<any>) => {
68+
editNode: (id: string, newData: any) => {
6869
set({
6970
nodes: get().nodes.map((node) => {
7071
if (node.id === id) {
7172
return {
7273
...node,
73-
...newData,
74+
data: {
75+
...node.data,
76+
...newData,
77+
},
7478
};
7579
}
7680
return node;
7781
}),
7882
});
7983
},
84+
deleteNode: (id: string) => {
85+
set({
86+
nodes: get().nodes.filter((node) => node.id !== id),
87+
edges: get().edges.filter(
88+
(edge) => edge.source !== id && edge.target !== id
89+
),
90+
});
91+
},
8092
}));
8193
}

0 commit comments

Comments
 (0)