Skip to content

Commit 2f2ea2d

Browse files
scar17offscar17off
committed
Implemented dynamic parameter management fo 'Function' nodes with UI controls
1 parent 9b11706 commit 2f2ea2d

File tree

3 files changed

+185
-2
lines changed

3 files changed

+185
-2
lines changed

‎src/components/GraphInspector.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,99 @@ const GraphInspector = ({
6262
);
6363

6464
case 'array':
65+
if (property.name === 'parameters') {
66+
return (
67+
<div className={styles.parametersContainer}>
68+
{(node.properties.parameters || []).map((param, index) => (
69+
<div key={index} className={styles.parameterRow}>
70+
<input
71+
type="text"
72+
value={param.name}
73+
onChange={(e) => {
74+
const newParams = [...node.properties.parameters];
75+
newParams[index] = { ...param, name: e.target.value };
76+
updateNodeProperty('parameters', newParams);
77+
78+
// Update the input port name (index + 1 since we removed Params port)
79+
const nodeTypeCopy = { ...nodeTypes[node.type] };
80+
nodeTypeCopy.inputs[index + 1] = {
81+
type: 'data',
82+
name: e.target.value,
83+
description: `Parameter of type ${param.type}`
84+
};
85+
nodeTypes[node.type] = nodeTypeCopy;
86+
}}
87+
placeholder="Parameter name"
88+
className={`${styles.input} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
89+
/>
90+
<select
91+
value={param.type}
92+
onChange={(e) => {
93+
const newParams = [...node.properties.parameters];
94+
newParams[index] = { ...param, type: e.target.value };
95+
updateNodeProperty('parameters', newParams);
96+
97+
// Update the input port description (index + 1 since we removed Params port)
98+
const nodeTypeCopy = { ...nodeTypes[node.type] };
99+
nodeTypeCopy.inputs[index + 1] = {
100+
type: 'data',
101+
name: param.name,
102+
description: `Parameter of type ${e.target.value}`
103+
};
104+
nodeTypes[node.type] = nodeTypeCopy;
105+
}}
106+
className={`${styles.typeSelect} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
107+
>
108+
<option value="string">String</option>
109+
<option value="number">Number</option>
110+
<option value="boolean">Boolean</option>
111+
<option value="object">Object</option>
112+
<option value="array">Array</option>
113+
</select>
114+
<button
115+
onClick={() => {
116+
const newParams = node.properties.parameters.filter((_, i) => i !== index);
117+
updateNodeProperty('parameters', newParams);
118+
119+
// Remove the corresponding input port (index + 1 since we removed Params port)
120+
const nodeTypeCopy = { ...nodeTypes[node.type] };
121+
nodeTypeCopy.inputs = [
122+
...nodeTypeCopy.inputs.slice(0, index + 1),
123+
...nodeTypeCopy.inputs.slice(index + 2)
124+
];
125+
nodeTypes[node.type] = nodeTypeCopy;
126+
}}
127+
className={`${styles.removeButton} ${config.isDarkTheme ? styles.removeButtonDark : styles.removeButtonLight}`}
128+
>
129+
<i className="fas fa-minus"></i>
130+
</button>
131+
</div>
132+
))}
133+
<button
134+
onClick={() => {
135+
const newParams = [
136+
...(node.properties.parameters || []),
137+
{ name: `param${(node.properties.parameters || []).length + 1}`, type: 'string' }
138+
];
139+
updateNodeProperty('parameters', newParams);
140+
141+
// Add a new input port (no +2 offset since we removed Params port)
142+
const nodeTypeCopy = { ...nodeTypes[node.type] };
143+
const newParamName = `param${(node.properties.parameters || []).length + 1}`;
144+
nodeTypeCopy.inputs.push({
145+
type: 'data',
146+
name: newParamName,
147+
description: `Parameter of type string`
148+
});
149+
nodeTypes[node.type] = nodeTypeCopy;
150+
}}
151+
className={`${styles.addButton} ${config.isDarkTheme ? styles.addButtonDark : styles.addButtonLight}`}
152+
>
153+
<i className="fas fa-plus"></i> Add Parameter
154+
</button>
155+
</div>
156+
);
157+
}
65158
if (property.name === 'cases') {
66159
return (
67160
<div className={styles.casesContainer}>

‎src/components/GraphInspector.module.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,4 +416,76 @@
416416

417417
.dividerLight {
418418
border-color: #ddd;
419+
}
420+
421+
.parametersContainer {
422+
margin: 5px 0;
423+
padding: 5px;
424+
border-radius: 4px;
425+
background-color: rgba(0, 0, 0, 0.1);
426+
}
427+
428+
.parameterRow {
429+
display: flex;
430+
gap: 5px;
431+
margin-bottom: 5px;
432+
align-items: center;
433+
}
434+
435+
.parameterRow .input {
436+
flex: 2;
437+
min-width: 0;
438+
}
439+
440+
.parameterRow .typeSelect {
441+
flex: 1;
442+
min-width: 80px;
443+
}
444+
445+
.removeButton {
446+
padding: 4px 8px;
447+
border: none;
448+
border-radius: 4px;
449+
cursor: pointer;
450+
background-color: #ff4444;
451+
color: white;
452+
}
453+
454+
.removeButtonDark {
455+
background-color: #aa2222;
456+
}
457+
458+
.removeButtonLight {
459+
background-color: #ff4444;
460+
}
461+
462+
.addButton {
463+
width: 100%;
464+
padding: 6px;
465+
margin-top: 5px;
466+
border: none;
467+
border-radius: 4px;
468+
cursor: pointer;
469+
display: flex;
470+
align-items: center;
471+
justify-content: center;
472+
gap: 5px;
473+
}
474+
475+
.addButtonDark {
476+
background-color: #444;
477+
color: white;
478+
}
479+
480+
.addButtonLight {
481+
background-color: #ddd;
482+
color: black;
483+
}
484+
485+
.addButton:hover {
486+
opacity: 0.9;
487+
}
488+
489+
.addButton i {
490+
font-size: 12px;
419491
}

‎src/nodeDefinitions.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,11 @@ export const nodeTypes = {
5555
color: '#607D8B',
5656
inputs: [
5757
{ type: 'control', name: 'In' },
58-
{ type: 'data', name: 'Params' }
58+
{
59+
type: 'data',
60+
name: 'param1',
61+
description: 'Parameter of type string'
62+
}
5963
],
6064
outputs: [
6165
{ type: 'control', name: 'Out' },
@@ -64,7 +68,21 @@ export const nodeTypes = {
6468
description: 'Defines a reusable function',
6569
properties: [
6670
{ name: 'name', type: 'string', default: 'myFunction' },
67-
{ name: 'parameters', type: 'string', default: '' }
71+
{
72+
name: 'parameters',
73+
type: 'array',
74+
default: [
75+
{ name: 'param1', type: 'string' }
76+
],
77+
visible: true
78+
},
79+
{
80+
name: 'returnType',
81+
type: 'select',
82+
options: ['void', 'string', 'number', 'boolean', 'object', 'array'],
83+
default: 'void',
84+
visible: true
85+
}
6886
]
6987
},
7088
MathOperation: {

0 commit comments

Comments
 (0)