Fix React Flow node dragging - nodes not reactive to cursor and position updates

[Copilot]

Fixes the React Flow node dragging issues where nodes were not responsive to cursor movement and positions were not updating consistently during drag operations.

Problem

The React Flow setup had several issues causing poor dragging behavior:

1. Position updates only on drag end: Node positions were only updated when change.dragging === false, causing nodes to not follow the cursor during drag operations
2. Restricted drag area: Dragging was limited to elements with .drag-handle class (only the header area)
3. Poor user experience: Users couldn't drag nodes smoothly or from anywhere on the node

Solution

Key Changes

MainCanvas.tsx:

• Removed the change.dragging === false condition in handleNodesChange to enable real-time position updates during dragging
• Removed dragHandle: '.drag-handle' restriction to make the entire node draggable

StructNode.tsx:

• Added cursor-move styling to the entire Card component to clearly indicate draggability
• Removed unnecessary cursor-move from the header-only drag handle

Before vs After

Before:

if (change.type === 'position' && change.position && change.dragging === false) {
  // Only update when dragging stops - choppy movement
}

After:

if (change.type === 'position' && change.position) {
  // Update during dragging - smooth, responsive movement
}

Testing

Verified that both User and Profile struct nodes are now:

• ✅ Fully draggable from anywhere on the node
• ✅ Responsive to cursor movement in real-time
• ✅ Position updates correctly during and after drag operations
• ✅ No regression in other React Flow features (selection, connections, etc.)

The screenshot shows the application with draggable struct nodes where the Profile node has been successfully moved to position (77, 20) as shown in the Node Properties panel.

Impact

This fix resolves the core usability issue where users couldn't effectively drag and position struct nodes in the visual mapping interface, which is essential for creating clear and organized struct mapping diagrams.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.