Skip to content

Commit e9eb639

Browse files
AttAdityaAttAditya
committed
Refactors
1 parent 01475e7 commit e9eb639

File tree

7 files changed

+197
-132
lines changed

7 files changed

+197
-132
lines changed

‎src/components/engine/BaseVariant/index.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { useCallback, useState } from "react";
2+
3+
import type { NodeModel } from "@defs/Node";
4+
5+
import { useNodeSystemContext } from "@contexts/nodeSystem";
6+
7+
import { Input } from "@components/commons/Input";
8+
import { Node } from "@components/engine/Node";
9+
10+
import "./style.css";
11+
12+
export function BaseVariant({
13+
node,
14+
}: {
15+
node: NodeModel;
16+
}) {
17+
const { updateNode } = useNodeSystemContext()!;
18+
19+
const [
20+
baseType,
21+
setBaseType,
22+
] = useState<string>(node.baseType || "text");
23+
24+
const switchBaseType = useCallback((type: string) => {
25+
node.baseType = type;
26+
setBaseType(type);
27+
updateNode(node.id!, node);
28+
}, [updateNode, node]);
29+
30+
const changeValue = useCallback((value: string) => {
31+
node.value = value;
32+
updateNode(node.id!, node);
33+
}, [updateNode, node]);
34+
35+
if (!node.isBase) return null;
36+
37+
return (<>
38+
<Node
39+
forcedActive={baseType === "text"}
40+
node={{
41+
color: "#000",
42+
icon: "Type",
43+
name: "Text Type",
44+
action: () => switchBaseType("text"),
45+
}}
46+
/>
47+
48+
<Node
49+
forcedActive={baseType === "numeric"}
50+
node={{
51+
color: "#000",
52+
icon: "Hash",
53+
name: "Numeric Type",
54+
action: () => switchBaseType("numeric"),
55+
}}
56+
/>
57+
58+
<Node
59+
forcedActive={baseType === "boolean"}
60+
node={{
61+
color: "#000",
62+
icon: "ToggleRight",
63+
name: "Boolean Type",
64+
action: () => switchBaseType("boolean"),
65+
}}
66+
/>
67+
68+
<div className="node-base-input">
69+
<Input
70+
placeholder="Base Node Value"
71+
defaultValue={node.value || ""}
72+
onChange={(e) => changeValue(e.target.value)}
73+
/>
74+
</div>
75+
</>);
76+
}
77+

‎src/components/engine/BaseVariant/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.node-base-input {
2+
grid-column: 1 / -1;
3+
padding: 0.5rem 0.25rem;
4+
}
5+
6+
.node-base-input input {
7+
width: 100%;
8+
}
9+
10+
.node-base-input input::placeholder {
11+
color: #ffffff66;
12+
}
13+

‎src/components/engine/Node/index.tsx‎

Lines changed: 5 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,10 @@ import {
55

66
import type { NodeModel } from "@defs/Node";
77

8-
import { useNodeSystemContext } from "@contexts/nodeSystem";
9-
108
import { DynamicIcon } from "@components/commons/DynamicIcon";
119
import { Glass } from "@components/commons/Glass";
12-
import { Input } from "@components/commons/Input";
1310

14-
import { Canvas } from "@components/engine/Canvas";
11+
import { NodeContext } from "@components/engine/NodeContext";
1512

1613
import "./style.css";
1714

@@ -24,27 +21,13 @@ export function Node({
2421
showCanvas?: boolean;
2522
forcedActive?: boolean;
2623
}) {
27-
const { updateNode } = useNodeSystemContext()!;
28-
2924
const [active, setActive] = useState(false);
30-
const [baseType, setBaseType] = useState<string>(node.baseType || "text");
3125

3226
const handleClick: () => void = useCallback(() => {
3327
if (node.action) node.action();
3428
else setActive(prev => !prev);
3529
}, [node]);
3630

37-
const switchBaseType = useCallback((type: string) => {
38-
node.baseType = type;
39-
setBaseType(type);
40-
updateNode(node.id!, node);
41-
}, [updateNode, node]);
42-
43-
const changeValue = useCallback((value: string) => {
44-
node.value = value;
45-
updateNode(node.id!, node);
46-
}, [updateNode, node]);
47-
4831
return (<>
4932
<div className="node-wrapper">
5033
<Glass
@@ -72,72 +55,10 @@ export function Node({
7255
)}
7356
</Glass>
7457

75-
{(node.context?.length !== 0) && node.context && (
76-
<Glass
77-
className={[
78-
"node-context",
79-
node.context.length > 20 ? "side" : "",
80-
].join(" ")}
81-
>
82-
{
83-
node.context?.map((contextNode => <Node
84-
key={contextNode.name}
85-
node={contextNode}
86-
/>))
87-
}
88-
89-
{
90-
(!node.isBase && showCanvas) && (<>
91-
<Glass className="context-canvas">
92-
<Canvas
93-
baseId={node.id!}
94-
contextCanvas={true}
95-
/>
96-
</Glass>
97-
</>)
98-
}
99-
100-
{node.isBase && (<>
101-
<Node
102-
forcedActive={baseType === "text"}
103-
node={{
104-
color: "#000",
105-
icon: "Type",
106-
name: "Text Type",
107-
action: () => switchBaseType("text"),
108-
}}
109-
/>
110-
111-
<Node
112-
forcedActive={baseType === "numeric"}
113-
node={{
114-
color: "#000",
115-
icon: "Hash",
116-
name: "Numeric Type",
117-
action: () => switchBaseType("numeric"),
118-
}}
119-
/>
120-
121-
<Node
122-
forcedActive={baseType === "boolean"}
123-
node={{
124-
color: "#000",
125-
icon: "ToggleRight",
126-
name: "Boolean Type",
127-
action: () => switchBaseType("boolean"),
128-
}}
129-
/>
130-
131-
<div className="node-base-input">
132-
<Input
133-
placeholder="Base Node Value"
134-
defaultValue={node.value || ""}
135-
onChange={(e) => changeValue(e.target.value)}
136-
/>
137-
</div>
138-
</>)}
139-
</Glass>
140-
)}
58+
<NodeContext
59+
node={node}
60+
showCanvas={showCanvas}
61+
/>
14162
</div>
14263
</>);
14364
}

‎src/components/engine/Node/style.css‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -96,51 +96,3 @@
9696
height: var(--size);
9797
}
9898

99-
.node-context {
100-
position: absolute;
101-
top: calc(100% + 1.5rem);
102-
left: 50%;
103-
padding: 1rem;
104-
cursor: default;
105-
display: grid;
106-
grid-template-columns: repeat(5, 3.5rem);
107-
gap: 0.5rem;
108-
transform: translateX(-50%) translateY(-50%) scale(0);
109-
opacity: 0;
110-
pointer-events: none;
111-
z-index: 100;
112-
}
113-
114-
.node.active + .node-context {
115-
transform: translateX(-50%) translateY(0%) scale(1);
116-
opacity: 1;
117-
pointer-events: auto;
118-
}
119-
120-
.node-context.side {
121-
left: calc(100% + 2rem);
122-
top: 50%;
123-
}
124-
125-
.node.active + .node-context.side {
126-
transform: translateX(0%) translateY(-50%) scale(1);
127-
}
128-
129-
.node-base-input {
130-
grid-column: 1 / -1;
131-
padding: 0.5rem 0.25rem;
132-
}
133-
134-
.node-base-input input {
135-
width: 100%;
136-
}
137-
138-
.node-base-input input::placeholder {
139-
color: #ffffff66;
140-
}
141-
142-
.context-canvas {
143-
grid-column: 1 / -1;
144-
margin-top: 0.5rem;
145-
}
146-

‎src/components/engine/NodeContext/index.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { NodeModel } from "@defs/Node";
2+
3+
import { Glass } from "@components/commons/Glass";
4+
5+
import { Canvas } from "@components/engine/Canvas";
6+
import { Node } from "@components/engine/Node";
7+
import { Variants } from "@components/engine/Variants";
8+
9+
import "./style.css";
10+
11+
export function NodeContext({
12+
node,
13+
showCanvas = false,
14+
}: {
15+
node: NodeModel;
16+
showCanvas?: boolean;
17+
}) {
18+
if (node.context?.length === 0) return null;
19+
if (!node.context) return null;
20+
21+
const context = node.context;
22+
const isBase = node.isBase;
23+
const nodeId = node.id!;
24+
25+
return (<>
26+
<Glass
27+
className={[
28+
"node-context",
29+
context.length > 20 ? "side" : "",
30+
].join(" ")}
31+
>
32+
{
33+
context?.map((contextNode => <Node
34+
key={contextNode.name}
35+
node={contextNode}
36+
/>))
37+
}
38+
39+
{
40+
(!isBase && showCanvas) && (<>
41+
<Glass className="context-canvas">
42+
<Canvas
43+
baseId={nodeId}
44+
contextCanvas={true}
45+
/>
46+
</Glass>
47+
</>)
48+
}
49+
50+
<Variants node={node} />
51+
</Glass>
52+
</>);
53+
}

‎src/components/engine/NodeContext/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.node-context {
2+
position: absolute;
3+
top: calc(100% + 1.5rem);
4+
left: 50%;
5+
padding: 1rem;
6+
cursor: default;
7+
display: grid;
8+
grid-template-columns: repeat(5, 3.5rem);
9+
gap: 0.5rem;
10+
transform: translateX(-50%) translateY(-50%) scale(0);
11+
opacity: 0;
12+
pointer-events: none;
13+
z-index: 100;
14+
}
15+
16+
.node.active + .node-context {
17+
transform: translateX(-50%) translateY(0%) scale(1);
18+
opacity: 1;
19+
pointer-events: auto;
20+
}
21+
22+
.node-context.side {
23+
left: calc(100% + 2rem);
24+
top: 50%;
25+
}
26+
27+
.node.active + .node-context.side {
28+
transform: translateX(0%) translateY(-50%) scale(1);
29+
}
30+
31+
.context-canvas {
32+
grid-column: 1 / -1;
33+
margin-top: 0.5rem;
34+
}
35+

‎src/components/engine/Variants/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { BaseVariant } from "@components/engine/BaseVariant";
2+
3+
import type { NodeModel } from "@defs/Node";
4+
5+
export function Variants({
6+
node,
7+
}: {
8+
node: NodeModel;
9+
}) {
10+
return (<>
11+
<BaseVariant node={node} />
12+
</>);
13+
}
14+

0 commit comments

Comments
 (0)