Skip to content

Commit 1bbfcdf

Browse files
RemDelaporteMathurinRemDelaporteMathurin
authored
Merge pull request #127 from festim-dev/colours
Change colour of nodes
2 parents 1c900c1 + 0906fa5 commit 1bbfcdf

17 files changed

+175
-25
lines changed

‎src/App.jsx‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,10 @@ const DnDFlow = () => {
272272
}
273273

274274
// Create node data with label and initialize all expected fields as empty strings
275-
let nodeData = { label: `${type} ${newNodeId}` };
275+
let nodeData = {
276+
label: `${type} ${newNodeId}`,
277+
nodeColor: '#DDE6ED' // Default node color
278+
};
276279

277280
// if node in nodeDynamicHandles, ensure add outputCount and inputCount to data
278281
if (nodeDynamicHandles.includes(type)) {
@@ -386,7 +389,7 @@ const DnDFlow = () => {
386389
return;
387390
}
388391

389-
// Load the graph data
392+
// Load the graph data and ensure nodeColor exists on all nodes
390393
const {
391394
nodes: loadedNodes,
392395
edges: loadedEdges,
@@ -396,7 +399,17 @@ const DnDFlow = () => {
396399
events: loadedEvents,
397400
pythonCode: loadedPythonCode
398401
} = graphData;
399-
setNodes(loadedNodes || []);
402+
403+
// Ensure all loaded nodes have a nodeColor property
404+
const nodesWithColors = (loadedNodes || []).map(node => ({
405+
...node,
406+
data: {
407+
...node.data,
408+
nodeColor: node.data.nodeColor || '#DDE6ED'
409+
}
410+
}));
411+
412+
setNodes(nodesWithColors);
400413
setEdges(loadedEdges || []);
401414
setSelectedNode(null);
402415
setNodeCounter(loadedNodeCounter ?? loadedNodes.length);
@@ -457,7 +470,17 @@ const DnDFlow = () => {
457470
events: loadedEvents,
458471
pythonCode: loadedPythonCode
459472
} = graphData;
460-
setNodes(loadedNodes || []);
473+
474+
// Ensure all loaded nodes have a nodeColor property
475+
const nodesWithColors = (loadedNodes || []).map(node => ({
476+
...node,
477+
data: {
478+
...node.data,
479+
nodeColor: node.data.nodeColor || '#DDE6ED'
480+
}
481+
}));
482+
483+
setNodes(nodesWithColors);
461484
setEdges(loadedEdges || []);
462485
setSelectedNode(null);
463486
setNodeCounter(loadedNodeCounter ?? loadedNodes.length);

‎src/components/NodeSidebar.jsx‎

Lines changed: 130 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,10 +155,10 @@ const NodeSidebar = ({
155155
const nodeDefaults = defaultValues[selectedNode.type] || {};
156156

157157
// Create a list of all possible parameters (both current data and defaults)
158-
// Exclude 'label' since it's now editable directly in the title
158+
// Exclude 'label' and 'nodeColor' since they're handled separately
159159
const allParams = new Set([
160-
...Object.keys(selectedNode.data).filter(key => key !== 'label'),
161-
...Object.keys(nodeDefaults).filter(key => key !== 'label')
160+
...Object.keys(selectedNode.data).filter(key => key !== 'label' && key !== 'nodeColor'),
161+
...Object.keys(nodeDefaults).filter(key => key !== 'label' && key !== 'nodeColor')
162162
]);
163163

164164
return Array.from(allParams)
@@ -212,6 +212,133 @@ const NodeSidebar = ({
212212
});
213213
})()}
214214

215+
{/* Color Picker Section */}
216+
<div style={{
217+
marginTop: '20px',
218+
marginBottom: '20px',
219+
borderTop: '1px solid #555',
220+
paddingTop: '15px'
221+
}}>
222+
<h4 style={{
223+
margin: '0 0 12px 0',
224+
fontSize: '14px',
225+
fontWeight: '600',
226+
color: '#a8b3cf',
227+
textTransform: 'uppercase',
228+
letterSpacing: '0.5px'
229+
}}>Node Color</h4>
230+
231+
<div style={{
232+
display: 'flex',
233+
alignItems: 'center',
234+
gap: '12px',
235+
marginBottom: '8px'
236+
}}>
237+
<input
238+
type="color"
239+
value={selectedNode.data.nodeColor || '#DDE6ED'}
240+
onChange={(e) => {
241+
const newColor = e.target.value;
242+
const updatedNode = {
243+
...selectedNode,
244+
data: { ...selectedNode.data, nodeColor: newColor },
245+
};
246+
247+
setNodes((nds) =>
248+
nds.map((node) =>
249+
node.id === selectedNode.id ? updatedNode : node
250+
)
251+
);
252+
setSelectedNode(updatedNode);
253+
}}
254+
style={{
255+
width: '40px',
256+
height: '40px',
257+
borderRadius: '6px',
258+
border: '2px solid #555',
259+
backgroundColor: 'transparent',
260+
cursor: 'pointer',
261+
padding: '0'
262+
}}
263+
/>
264+
265+
<input
266+
type="text"
267+
value={selectedNode.data.nodeColor || '#DDE6ED'}
268+
onChange={(e) => {
269+
const newColor = e.target.value;
270+
const updatedNode = {
271+
...selectedNode,
272+
data: { ...selectedNode.data, nodeColor: newColor },
273+
};
274+
275+
setNodes((nds) =>
276+
nds.map((node) =>
277+
node.id === selectedNode.id ? updatedNode : node
278+
)
279+
);
280+
setSelectedNode(updatedNode);
281+
}}
282+
placeholder="#DDE6ED"
283+
style={{
284+
flex: 1,
285+
padding: '8px 12px',
286+
borderRadius: '4px',
287+
border: '1px solid #555',
288+
backgroundColor: '#2a2a3e',
289+
color: '#ffffff',
290+
fontSize: '14px',
291+
fontFamily: 'monospace'
292+
}}
293+
/>
294+
</div>
295+
296+
{/* Color preset buttons */}
297+
<div style={{
298+
display: 'grid',
299+
gridTemplateColumns: 'repeat(4, 1fr)',
300+
gap: '8px',
301+
marginTop: '12px'
302+
}}>
303+
{['#DDE6ED', '#FFE5E5', '#E5F3FF', '#E5FFE5', '#FFF5E5', '#F0E5FF', '#FFE5F5', '#E5FFFF'].map(color => (
304+
<button
305+
key={color}
306+
onClick={() => {
307+
const updatedNode = {
308+
...selectedNode,
309+
data: { ...selectedNode.data, nodeColor: color },
310+
};
311+
312+
setNodes((nds) =>
313+
nds.map((node) =>
314+
node.id === selectedNode.id ? updatedNode : node
315+
)
316+
);
317+
setSelectedNode(updatedNode);
318+
}}
319+
style={{
320+
width: '100%',
321+
height: '30px',
322+
backgroundColor: color,
323+
border: selectedNode.data.nodeColor === color ? '2px solid #007bff' : '1px solid #666',
324+
borderRadius: '4px',
325+
cursor: 'pointer',
326+
transition: 'all 0.2s ease'
327+
}}
328+
onMouseEnter={(e) => {
329+
if (selectedNode.data.nodeColor !== color) {
330+
e.target.style.transform = 'scale(1.05)';
331+
}
332+
}}
333+
onMouseLeave={(e) => {
334+
e.target.style.transform = 'scale(1)';
335+
}}
336+
title={color}
337+
/>
338+
))}
339+
</div>
340+
</div>
341+
215342
<br />
216343
<button
217344
style={{

‎src/components/nodes/AdderNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function AdderNode({ data }) {
77
style={{
88
width: 60,
99
height: 60,
10-
background: '#DDE6ED',
10+
background: data.nodeColor || '#DDE6ED',
1111
color: 'black',
1212
borderRadius: '50%',
1313
display: 'flex',

‎src/components/nodes/AmplifierNode.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function AmplifierNode({ data }) {
1515
>
1616

1717
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
18-
<polygon points="0,0 100,50 0,100" fill="#DDE6ED" />
18+
<polygon points="0,0 100,50 0,100" fill={data.nodeColor || "#DDE6ED"} />
1919
</svg>
2020
<div style={{
2121
fontSize: '12px',
@@ -50,7 +50,7 @@ export function AmplifierNodeReverse({ data }) {
5050
>
5151

5252
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
53-
<polygon points="0,50 100,100 100,0" fill="#DDE6ED" />
53+
<polygon points="0,50 100,100 100,0" fill={data.nodeColor || "#DDE6ED"} />
5454
</svg>
5555
<div style={{
5656
fontSize: '12px',

‎src/components/nodes/BubblerNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function BubblerNode({ data }) {
77
style={{
88
width: 210,
99
height: 140,
10-
background: '#DDE6ED',
10+
background: data.nodeColor || '#DDE6ED',
1111
color: 'black',
1212
borderRadius: 8,
1313
padding: 10,

‎src/components/nodes/ConstantNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function ConstantNode({ data }) {
66
<div
77
style={{
88
width: 180,
9-
background: '#DDE6ED',
9+
background: data.nodeColor || '#DDE6ED',
1010
color: 'black',
1111
borderRadius: 12,
1212
padding: 10,

‎src/components/nodes/DefaultNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function DefaultNode({ data }) {
66
<div
77
style={{
88
width: 180,
9-
background: '#DDE6ED',
9+
background: data.nodeColor || '#DDE6ED',
1010
color: 'black',
1111
borderRadius: 0,
1212
padding: 10,

‎src/components/nodes/DelayNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function DelayNode({ data }) {
77
style={{
88
width: 80,
99
height: 60,
10-
background: '#DDE6ED',
10+
background: data.nodeColor || '#DDE6ED',
1111
color: 'black',
1212
borderRadius: 8,
1313
padding: 8,

‎src/components/nodes/DynamicHandleNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function DynamicHandleNode({ id, data }) {
3131
style={{
3232
width: Math.max(180, (data.label?.length || 8) * 8 + 40),
3333
height: Math.max(60, Math.max(inputHandleCount, outputHandleCount) * 25 + 30),
34-
background: '#DDE6ED',
34+
background: data.nodeColor || '#DDE6ED',
3535
color: 'black',
3636
borderRadius: 0,
3737
padding: 10,

‎src/components/nodes/FunctionNode.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export function createFunctionNode(numInputs, numOutputs) {
9898
style={{
9999
width: dynamicWidth,
100100
height: dynamicHeight,
101-
background: '#DDE6ED',
101+
background: data.nodeColor || '#DDE6ED',
102102
color: 'black',
103103
borderRadius: 0,
104104
padding: 10,

0 commit comments

Comments
 (0)