verben-workflow-ui 0.5.70 → 0.5.71

package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs

@@ -3030,7 +3030,12 @@ class DesignerCanvasComponent {
             this.hideConnectionPopup();
             return;
         }
-        const { endX, endY, sourceSwimlaneIndex } = pathData;
+        const { endX, endY } = pathData;
+        // Determine the target swimlane from the drop position (NOT the source
+        // swimlane). `addNode` expects an absolute canvas Y plus the target
+        // swimlane index, and performs the swimlane-relative conversion itself.
+        let targetSwimlaneIndex = Math.floor(endY / this.swimlaneHeight);
+        targetSwimlaneIndex = Math.max(0, Math.min(targetSwimlaneIndex, this.state.swimlanes.length - 1));
         // Get source node info
         const sourcePoint = this.state.draggingConnectionData.sourcePoint;
         if (!sourcePoint) {
@@ -3047,12 +3052,10 @@ class DesignerCanvasComponent {
             // Store information for later stage creation
             this.pendingDecisionConnection = {
                 decisionNodeId: sourceNodeInfo.node.id,
-                swimlaneIndex: sourceSwimlaneIndex,
+                swimlaneIndex: targetSwimlaneIndex,
                 x: endX,
                 y: endY,
             };
-            // Calculate popup position - position it near the decision node
-            const swimlaneOffsetY = sourceSwimlaneIndex * 263;
             // Center the popup over the connection endpoint
             this.decisionConditionPopupX = endX;
             this.decisionConditionPopupY = endY - 150; // Position above the endpoint
@@ -3063,26 +3066,11 @@ class DesignerCanvasComponent {
             this.hideConnectionPopup();
             return;
         }
-        const swimlaneIndex = Math.floor(endY / this.swimlaneHeight);
-        const swimlaneTop = swimlaneIndex * this.swimlaneHeight;
-        // Calculate swimlane-relative position
-        const swimlaneOffsetY = sourceSwimlaneIndex * 263;
-        let relativeY = endY - swimlaneOffsetY - 50; // Add half node height for better alignment
-        const swimlaneBottom = swimlaneTop + 263;
-        // Clamp nodeY so node stays within swimlane
-        console.log(endY, swimlaneIndex, swimlaneOffsetY, swimlaneBottom);
-        if (endY - 50 < swimlaneTop) {
-            console.log('Less');
-            relativeY = swimlaneTop; // Node would overflow above, so align to top
-        }
-        else if (endY + 50 > swimlaneBottom) {
-            console.log('More');
-            relativeY = swimlaneBottom - 100; // Node would overflow below, so align to bottom
-        }
         // Handle preconditions based on node type
         if (nodeType === 'stage') {
-            // Create the stage directly with default properties
-            const newNode = this.state.addNode(sourceSwimlaneIndex, 'stage', endX, relativeY, { Name: 'New Stage' } // Add default properties
+            // Create the stage in the target swimlane. `addNode` converts the
+            // absolute endY to a swimlane-relative position internally.
+            const newNode = this.state.addNode(targetSwimlaneIndex, 'stage', endX, endY, { Name: 'New Stage' } // Add default properties
             );
             if (newNode &&
                 newNode.connectionPoints &&
@@ -3098,7 +3086,7 @@ class DesignerCanvasComponent {
                 const targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
                 if (targetPoint) {
                     // Create the connection
-                    const connection = this.state.createConnection(newNode.id, targetPoint.id, sourceSwimlaneIndex);
+                    const connection = this.state.createConnection(newNode.id, targetPoint.id, targetSwimlaneIndex);
                     if (connection) {
                         this.onConnectionCreated(connection);
                     }
@@ -3108,14 +3096,14 @@ class DesignerCanvasComponent {
             return;
         }
         else if (nodeType === 'subflow') {
-            console.log('Creating subflow from connection at:', endX, endY, 'swimlane:', sourceSwimlaneIndex);
+            console.log('Creating subflow from connection at:', endX, endY, 'swimlane:', targetSwimlaneIndex);
             // Show workflow selection popup and store connection data for later use
-            this.showSubflowSelectionPopup(endX, endY, sourceSwimlaneIndex);
+            this.showSubflowSelectionPopup(endX, endY, targetSwimlaneIndex);
             this.hideConnectionPopup();
             return;
         }
         // For other nodes Create the new node at the end position of the connection
-        const newNode = this.state.addNode(sourceSwimlaneIndex, nodeType, endX, relativeY);
+        const newNode = this.state.addNode(targetSwimlaneIndex, nodeType, endX, endY);
         if (newNode &&
             newNode.connectionPoints &&
             newNode.connectionPoints.length > 0) {
@@ -3134,7 +3122,7 @@ class DesignerCanvasComponent {
                 targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
                 if (targetPoint) {
                     // Create the connection
-                    const connection = this.state.createConnection(newNode.id, targetPoint.id, sourceSwimlaneIndex);
+                    const connection = this.state.createConnection(newNode.id, targetPoint.id, targetSwimlaneIndex);
                     if (connection) {
                         this.onConnectionCreated(connection);
                     }