Update components/PropertiesPanel.tsx

components/PropertiesPanel.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { Node } from 'reactflow';
 import { NodeData, LayerDefinition } from '../types';
@@ -6,7 +7,7 @@ import { X, Trash2 } from 'lucide-react';
 
 interface PropertiesPanelProps {
   selectedNode: Node<NodeData> | null;
-  onChange: (id: string, newParams: Record<string, any>) => void;
+  onChange: (id: string, newData: Partial<NodeData>) => void;
   onDelete: (id: string) => void;
   onClose: () => void;
 }
@@ -30,12 +31,19 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
     if (type === 'number') parsedValue = Number(value);
     if (type === 'boolean') parsedValue = value === 'true';
 
+    // Update only the params object within data
     onChange(selectedNode.id, {
-      ...selectedNode.data.params,
-      [name]: parsedValue
+      params: {
+        ...selectedNode.data.params,
+        [name]: parsedValue
+      }
     });
   };
 
+  const handleLabelChange = (newLabel: string) => {
+    onChange(selectedNode.id, { label: newLabel });
+  };
+
   return (
     <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
       <div className="p-4 border-b border-slate-800 flex justify-between items-center">
@@ -53,6 +61,21 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
           {definition.description}
         </div>
 
+        {/* Node Label Renaming */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wide">
+             Node Label (Name)
+          </label>
+          <input
+            type="text"
+            className="w-full bg-slate-950 border border-slate-700 rounded px-3 py-2 text-sm text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none placeholder-slate-700 font-medium"
+            value={selectedNode.data.label}
+            onChange={(e) => handleLabelChange(e.target.value)}
+          />
+        </div>
+
+        <div className="h-px bg-slate-800 my-4" />
+
         <div className="space-y-4">
           {definition.parameters.map((param) => (
             <div key={param.name} className="space-y-1.5">
@@ -79,12 +102,21 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
                   <option value="true">True</option>
                   <option value="false">False</option>
                 </select>
+              ) : param.type === 'text' ? (
+                <textarea
+                  className="w-full h-32 bg-slate-950 border border-slate-700 rounded px-3 py-2 text-xs font-mono text-slate-300 focus:ring-1 focus:ring-blue-500 outline-none placeholder-slate-700 resize-y"
+                  value={selectedNode.data.params[param.name] ?? param.default}
+                  onChange={(e) => handleParamChange(param.name, e.target.value, param.type)}
+                  placeholder={param.description}
+                  spellCheck={false}
+                />
               ) : (
                 <input
                   type={param.type === 'number' ? 'number' : 'text'}
                   className="w-full bg-slate-950 border border-slate-700 rounded px-3 py-2 text-sm text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none placeholder-slate-700"
                   value={selectedNode.data.params[param.name] ?? param.default}
                   onChange={(e) => handleParamChange(param.name, e.target.value, param.type)}
+                  placeholder={param.description}
                 />
               )}
             </div>
@@ -109,4 +141,4 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
   );
 };
 
-export default PropertiesPanel;
+export default PropertiesPanel;