Icons updated

frontend/canvas.html

@@ -196,6 +196,7 @@
       useUpdateNodeInternals,
     } = window.ReactFlow;
 
+    // --- NODE DESIGN (Dark CAD Style) ---
     // --- NODE DESIGN (Dark CAD Style) ---
     const RotatableNode = ({ id, data, selected }) => {
       const updateNodeInternals = useUpdateNodeInternals();
@@ -216,20 +217,52 @@
 
       return (
         <div style={{
-          padding: '10px 20px', 
+          padding: '10px 15px', 
           border: selected ? '2px solid var(--accent)' : '1px solid var(--border)', 
           borderRadius: 6,
           background: 'var(--bg-card)', 
           color: 'var(--text-main)',
-          minWidth: 100, textAlign: 'center',
+          minWidth: 100, 
+          maxWidth: 140, /* Prevents node from getting too wide */
+          textAlign: 'center',
           position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
           transition: selected ? 'none' : 'transform 0.1s ease',
           boxSizing: 'border-box',
           boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
           fontFamily: "'Inter', sans-serif",
-          fontSize: '0.85rem'
         }}>
-          <div>{data.componentDisplayName}</div>
+          
+          {/* Updated Icon and Title Layout */}
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+            {data.category && (
+              <img 
+                src={`/api/icon/${data.category}`} 
+                alt={data.category} 
+                style={{ 
+                  width: 128,  /* Increased from 32 */
+                  height: 64, /* Increased from 32 */
+                  objectFit: 'contain',
+                  pointerEvents: 'none' 
+                }}
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                }}
+              />
+            )}
+            
+            {/* Shrunk the text and added ellipsis for long names */}
+            <div style={{
+              fontSize: '0.5rem', 
+              color: 'var(--text-muted)',
+              width: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }} title={data.componentDisplayName}>
+              {data.componentDisplayName}
+            </div>
+          </div>
+
           <Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
           <Handle type="target" position={Position.Left} id="port-lt-target" style={{ ...leftTopPort, zIndex: 5 }} />
           <Handle type="source" position={Position.Left} id="port-lb-source" style={{ ...leftBottomPort, zIndex: 10 }} />
@@ -242,19 +275,29 @@
       );
     };
 
+
+
     const TreeNode = ({ name, children }) => {
       if (children && children.__type__ === 'component') {
         const componentName = children.__name__;
+        // Fallback to 'default' if category is somehow missing
+        const componentCategory = children.__category__ || 'default'; 
+        
         const handleDragStart = (event) => {
-          event.dataTransfer.setData('application/reactflow', componentName);
+          const dragData = JSON.stringify({ name: componentName, category: componentCategory });
+          console.log("🚀 DRAG START: Sending data ->", dragData); // <--- DEBUG LOG
+          event.dataTransfer.setData('application/reactflow', dragData);
           event.dataTransfer.effectAllowed = 'move';
         };
+        
         return (
           <div className="component-leaf" draggable onDragStart={handleDragStart}>
             <span style={{color: 'var(--accent)', marginRight: '4px'}}>❖</span> {name}
           </div>
         );
       }
+      // ... keep the rest of TreeNode unchanged
+      // ... keep the rest of TreeNode unchanged
 
       const hasChildren = children && Object.keys(children).length > 0;
       return (
@@ -778,24 +821,44 @@
 
       const onDrop = useCallback((event) => {
         event.preventDefault();
-        const type = event.dataTransfer.getData('application/reactflow');
-        if (!type) return;
+        const rawData = event.dataTransfer.getData('application/reactflow');
+        console.log("📥 DROP EVENT: Received raw data ->", rawData); // <--- DEBUG LOG
+        
+        if (!rawData) {
+            console.error("Drop failed: No data received!");
+            return;
+        }
+        
+        let parsedData;
+        try {
+          parsedData = JSON.parse(rawData);
+          console.log("✅ PARSED JSON SUCCESS:", parsedData); // <--- DEBUG LOG
+        } catch (error) {
+          console.warn("⚠️ JSON Parse Failed. Falling back to string format.", rawData);
+          parsedData = { name: rawData, category: 'default' };
+        }
+        
         const position = reactFlowInstance.screenToFlowPosition({
           x: event.clientX,
           y: event.clientY,
         });
+        
         const componentDisplayName = generateComponentDisplayName();
+        
         const newNode = {
           id: Date.now().toString(),
           type: 'rotatableNode',
           position,
           data: {
-            label: type,
-            componentName: type,
+            label: parsedData.name,
+            componentName: parsedData.name,
+            category: parsedData.category, 
             rotation: 0,
             componentDisplayName: componentDisplayName
           },
         };
+        
+        console.log("✨ ADDING NEW NODE TO CANVAS:", newNode); // <--- DEBUG LOG
         setNodes((nds) => nds.concat(newNode));
       }, [setNodes, reactFlowInstance, generateComponentDisplayName]);