@flowuent-org/diagramming-core 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/src/lib/components/automation/AISuggestionsPanel.tsx

@@ -18,16 +18,56 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
   onClose,
 }) => {
   const { getNodes, setNodes, setEdges, getNode } = useReactFlow();
+  const isAddingRef = React.useRef(false); // Prevent multiple simultaneous additions
+
+  const handleSuggestionClick = (suggestion: AISuggestion, event?: React.MouseEvent) => {
+    // Prevent event propagation
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    // Prevent multiple rapid clicks
+    if (isAddingRef.current) {
+      return;
+    }
+    isAddingRef.current = true;
+
+    // Close the panel immediately to prevent multiple clicks
+    if (onClose) {
+      onClose();
+    }
 
-  const handleSuggestionClick = (suggestion: AISuggestion) => {
     const nodes = getNodes();
     const parentNode = getNode(parentNodeId);
     if (!parentNode) return;
 
-    // Calculate position for new node - to the right of the parent node
-    // Node width + spacing
-    const nodeWidth = parentNode.width || 336;
-    const newNodeX = parentNode.position.x + nodeWidth + 50;
+    // Find the rightmost node in the workflow by X position
+    // This ensures suggestion nodes are added horizontally after the last node
+    // We'll find the node with the highest X position + width
+    const findRightmostNode = (): Node => {
+      // Get all nodes and find the one with the rightmost position
+      const allNodes = getNodes();
+      let rightmostNode = parentNode;
+      let maxRightEdge = parentNode.position.x + (parentNode.width || 336);
+      
+      allNodes.forEach((node) => {
+        const nodeRightEdge = node.position.x + (node.width || 336);
+        if (nodeRightEdge > maxRightEdge) {
+          maxRightEdge = nodeRightEdge;
+          rightmostNode = node;
+        }
+      });
+      
+      return rightmostNode;
+    };
+
+    const rightmostNode = findRightmostNode();
+    
+    // Calculate position for new node - to the right of the rightmost node
+    const nodeWidth = rightmostNode.width || 336;
+    const spacing = 50; // Spacing between nodes
+    const newNodeX = rightmostNode.position.x + nodeWidth + spacing;
 
     // Create new AI Suggestion node
     const newNodeId = `ai-suggestion-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -71,10 +111,27 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
       measured: { width: 336, height: 150 },
     };
 
+    // Check if a suggestion node with the same title already exists to prevent duplicates
+    const existingSuggestionNode = nodes.find(
+      (n) => n.type === 'AutomationAISuggestionNode' && 
+             n.data?.label === suggestion.title &&
+             !(n.data?.formData as any)?.isConfirmed
+    );
+
+    if (existingSuggestionNode) {
+      // If a similar unconfirmed suggestion already exists, don't add another
+      isAddingRef.current = false;
+      if (onClose) {
+        onClose();
+      }
+      return;
+    }
+
     // Add the new node
-    setNodes([...nodes, newNode]);
+    setNodes((prevNodes) => [...prevNodes, newNode]);
 
-    // Create edge from parent to new node with dotted line (unconfirmed)
+    // Create edge from parent node to new node with dotted line (unconfirmed)
+    // The suggestion is for the parent node, but the new node is positioned after the rightmost node
     const edgeId = `edge-${parentNodeId}-${newNodeId}`;
     const newEdge: Edge = {
       id: edgeId,
@@ -108,10 +165,10 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
       onSuggestionClick(suggestion);
     }
 
-    // Close the panel
-    if (onClose) {
-      onClose();
-    }
+    // Reset the flag after a delay to allow the layout to settle
+    setTimeout(() => {
+      isAddingRef.current = false;
+    }, 1000);
   };
 
   return (
@@ -154,7 +211,7 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
         {/* Suggestions List */}
         <Box sx={{ }}>
           {suggestions.map((suggestion) => (
-            <Card key={suggestion.id} onClick={() => handleSuggestionClick(suggestion)} sx={{ mb: 1, bgcolor: '#2563EB1A', border: '1px solid #2563EB', borderRadius: '8px', cursor: 'pointer', transition: 'all 0.2s ease', '&:last-child': { mb: 0, } }} >
+            <Card key={suggestion.id} onClick={(e) => handleSuggestionClick(suggestion, e)} sx={{ mb: 1, bgcolor: '#2563EB1A', border: '1px solid #2563EB', borderRadius: '8px', cursor: 'pointer', transition: 'all 0.2s ease', '&:last-child': { mb: 0, } }} >
               <CardContent>
                 <Box sx={{ display: 'flex' }}>
                   

package/packages/diagrams/src/lib/templates/DiagramContent.tsx

@@ -115,6 +115,7 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
   const { getLayoutedElements } = useElk();
   const layoutDirection = useLayoutDirection();
   const setLayoutDirection = useSetLayoutDirection();
+  const layoutTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
   // Set layout direction to RIGHT for automation diagrams
   useEffect(() => {
@@ -123,10 +124,23 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
     }
   }, [diagramType, layoutDirection, setLayoutDirection]);
 
+  // Debounce layout recalculation to prevent continuous propagation
   useEffect(() => {
-    getLayoutedElements();
+    // Clear any pending layout recalculation
+    if (layoutTimeoutRef.current) {
+      clearTimeout(layoutTimeoutRef.current);
+    }
+
+    // Debounce the layout recalculation
+    layoutTimeoutRef.current = setTimeout(() => {
+      getLayoutedElements();
+    }, 300); // 300ms debounce delay
 
-    return () => { };
+    return () => {
+      if (layoutTimeoutRef.current) {
+        clearTimeout(layoutTimeoutRef.current);
+      }
+    };
   }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
 
   // Listen for layout direction changes