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/FormNodeConfiguration.vue

@@ -473,14 +473,14 @@
           <div class="space-y-3">
             <!-- User Dropdown -->
             <div class="relative">
-              <FormKit
+            <FormKit
-                type="select"
+              type="select"
                 v-model="selectedUserId"
                 :options="filteredAvailableUsers"
                 placeholder="Select a user to add..."
-                :classes="{ outer: 'mb-0' }"
+              :classes="{ outer: 'mb-0' }"
                 @input="handleUserSelection"
-              />
+            />
               <p class="mt-1 text-xs text-blue-700">Select users who will be able to complete this form task</p>
             </div>
             
@@ -510,14 +510,14 @@
           <div class="space-y-3">
             <!-- Role Dropdown -->
             <div class="relative">
-              <FormKit
+            <FormKit
-                type="select"
+              type="select"
                 v-model="selectedRoleId"
                 :options="filteredAvailableRoles"
                 placeholder="Select a role to add..."
-                :classes="{ outer: 'mb-0' }"
+              :classes="{ outer: 'mb-0' }"
                 @input="handleRoleSelection"
-              />
+            />
               <p class="mt-1 text-xs text-purple-700">Select roles that will be able to complete this form task</p>
             </div>
             
@@ -904,11 +904,11 @@ const filteredAvailableUsers = computed(() => {
   return users.value
     .filter(user => !selectedUserIds.includes(String(user.userID)))
     .map(user => ({
-      label: user.userFullName ? `${user.userFullName} (${user.userUsername})` : user.userUsername,
+    label: user.userFullName ? `${user.userFullName} (${user.userUsername})` : user.userUsername,
       value: String(user.userID),  // Ensure value is a string
-      username: user.userUsername,
+    username: user.userUsername,
-      email: user.userEmail
+    email: user.userEmail
-    }));
+  }));
 });
 
 // Computed property for available roles with filtering out already selected roles
@@ -919,10 +919,10 @@ const filteredAvailableRoles = computed(() => {
   return roles.value
     .filter(role => !selectedRoleIds.includes(String(role.roleID)))
     .map(role => ({
-      label: role.roleName,
+    label: role.roleName,
       value: String(role.roleID),  // Ensure value is a string
-      description: role.roleDescription
+    description: role.roleDescription
-    }));
+  }));
 });
 
 // Fetch users and roles data
@@ -1046,7 +1046,7 @@ function handleUserSelection(userId) {
       selectedUserId.value = '';
       
       // Save changes
-      saveChanges();
+  saveChanges();
     } else {
       console.warn('Selected user not found in filtered available users', userIdStr);
       

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
               });
             }