Refactor FormNodeConfiguration and ProcessFlowCanvas for Improved Usability and Code Clarity

- Adjusted indentation and formatting in FormNodeConfiguration.vue for better readability.
- Updated FormKit component usage to ensure consistent styling and functionality in user and role selection dropdowns.
- Enhanced computed properties for filtered users and roles to maintain consistent formatting.
- Changed connection mode in ProcessFlowCanvas.vue from 'loose' to 'strict' to enforce stricter connection rules.
- Improved comments in ProcessFlowCanvas.vue to clarify edge handling logic and preserve existing handle positions during updates.

components/process-flow/ProcessFlowCanvas.vue

@@ -54,9 +54,9 @@ const {
   deleteKeyCode: 'Delete',
   selectionKeyCode: 'Shift',
   multiSelectionKeyCode: 'Control',
-  connectionMode: 'loose',
+  connectionMode: 'strict',
   isValidConnection: (connection) => {
-    // console.log('Validating connection:', connection);
+    console.log('Validating connection:', connection);
     return true;
   }
 });
@@ -76,7 +76,7 @@ const flowOptions = ref({
   snapToGrid: true,
   snapGrid: [15, 15],
   edgeUpdaterRadius: 10,
-  connectionMode: 'loose',
+  connectionMode: 'strict',
   connectionRadius: 25,
   elevateEdgesOnSelect: true,
   nodesDraggable: true,
@@ -282,7 +282,7 @@ watch(() => [props.initialEdges, nodes.value.length], async ([newEdges, nodeCoun
         if (edgesToAdd.length > 0) {
           // Ensure all edges have proper handle specifications
           const edgesWithHandles = edgesToAdd.map(edge => {
-            // If edge already has sourceHandle and targetHandle, use them
+            // IMPORTANT: If edge already has sourceHandle and targetHandle, preserve them exactly as they are
             if (edge.sourceHandle && edge.targetHandle) {
               return edge;
             }
@@ -325,23 +325,22 @@ watch(() => [props.initialEdges, nodes.value.length], async ([newEdges, nodeCoun
           // console.log('ProcessFlowCanvas: Successfully added edges with handles:', edgesWithHandles.length);
         }
         
-        // Update existing edges that have changed
+        // Update existing edges that have changed - IMPORTANT: preserve handle positions
         newEdges.forEach(newEdge => {
           const existingEdge = edges.value.find(e => e.id === newEdge.id);
           if (existingEdge) {
             // Check if the edge has actually changed before updating
             const hasChanges = (
               existingEdge.label !== newEdge.label ||
-              existingEdge.sourceHandle !== newEdge.sourceHandle ||
-              existingEdge.targetHandle !== newEdge.targetHandle ||
               JSON.stringify(existingEdge.style) !== JSON.stringify(newEdge.style)
             );
             
             if (hasChanges) {
               Object.assign(existingEdge, {
                 label: newEdge.label,
-                sourceHandle: newEdge.sourceHandle,
+                // Preserve existing handles if they exist
-                targetHandle: newEdge.targetHandle,
+                sourceHandle: existingEdge.sourceHandle || newEdge.sourceHandle,
+                targetHandle: existingEdge.targetHandle || newEdge.targetHandle,
                 style: newEdge.style ? { ...newEdge.style } : undefined
               });
             }