@flowuent-org/diagramming-core 1.1.1 → 1.1.3

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -5,7 +5,7 @@ export const automationDefaultNodes = [
   {
     id: 'start-node',
     type: 'AutomationStartNode',
-    position: { x: 50, y: 200 },
+    position: { x: 100, y: 200 },
     data: {
       // Display data for the node UI
       label: 'Workflow Trigger',
@@ -61,7 +61,7 @@ export const automationDefaultNodes = [
   {
     id: 'api-call-node',
     type: 'AutomationApiNode',
-    position: { x: 400, y: 200 },
+    position: { x: 500, y: 200 },
     data: {
       // Display data for the node UI
       label: 'Discover Headlines',
@@ -152,7 +152,7 @@ export const automationDefaultNodes = [
   {
     id: 'ai-suggestion-node',
     type: 'AutomationAISuggestionNode',
-    position: { x: 400, y: 360 },
+    position: { x: 900, y: 200 },
     data: {
       label: 'Citation Extractor',
       description: 'Extract and format citation from article text.',
@@ -174,7 +174,7 @@ export const automationDefaultNodes = [
   {
     id: 'data-formatting-node',
     type: 'AutomationFormattingNode',
-    position: { x: 750, y: 200 },
+    position: { x: 700, y: 200 },
     data: {
       // Display data for the node UI
       label: 'Article Analyzer',
@@ -249,7 +249,7 @@ export const automationDefaultNodes = [
   {
     id: 'google-sheets-node',
     type: 'AutomationSheetsNode',
-    position: { x: 925, y: 200 },
+    position: { x: 1100, y: 200 },
     data: {
       // Display data for the node UI
       label: 'Data Sync Node',
@@ -357,7 +357,7 @@ export const automationDefaultNodes = [
   {
     id: 'note-node-1',
     type: 'AutomationNoteNode',
-    position: { x: 400, y: 50 },
+    position: { x: 700, y: 50 },
     data: {
       label: 'Article Analyzer',
       description:
@@ -388,7 +388,7 @@ export const automationDefaultNodes = [
   {
     id: 'note-node-2',
     type: 'AutomationNoteNode',
-    position: { x: 50, y: 400 },
+    position: { x: 500, y: 50 },
     data: {
       label: 'Discover Headlines',
       description:
@@ -419,7 +419,7 @@ export const automationDefaultNodes = [
   {
     id: 'end-node',
     type: 'AutomationEndNode',
-    position: { x: 1275, y: 200 },
+    position: { x: 1500, y: 200 },
     data: {
       // Display data for the node UI
       label: 'Results Display',

package/package.json

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

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

@@ -18,17 +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 - below the parent node
-    // Node height + button height (~40px) + panel height (~400px) + spacing
-    const nodeHeight = parentNode.height || 150;
-    const panelHeight = suggestions.length * 180 + 100; // Approximate height per suggestion + padding
-    const newNodeY = parentNode.position.y + nodeHeight + 40 + panelHeight + 40;
+    // 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)}`;
@@ -55,8 +94,8 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
       id: newNodeId,
       type: 'AutomationAISuggestionNode',
       position: {
-        x: parentNode.position.x,
-        y: newNodeY,
+        x: newNodeX,
+        y: parentNode.position.y,
       },
       data: {
         label: suggestion.title,
@@ -72,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,
@@ -109,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 (
@@ -155,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/contexts/DiagramProvider.tsx

@@ -67,7 +67,7 @@ const createDiagramStore = ({
           historyIndex: -1,
           diagramType,
           edgeShapeType: 'curly',
-          layoutDirection: 'DOWN',
+          layoutDirection: diagramType === 'automation' ? 'RIGHT' : 'DOWN',
           pannable: true,
           selectedNode: null,
           selectedEdge: null,

package/packages/diagrams/src/lib/hooks/useWorkflowNodeActiont.ts

@@ -10,7 +10,7 @@ import {
   createUpdatedEdges,
   createUpdatedNodes,
 } from '../utils/create-updated';
-import { getNodeHeight } from '../utils/utilities';
+import { getNodeHeight, getNodeWidth } from '../utils/utilities';
 import {
   useDiagram,
   useGetDefaultNodeData,
@@ -154,7 +154,7 @@ export const useGenerateNodesAndEdges = () => {
           position:
             index === 0
               ? position
-              : { x: position.x, y: position.y + 200 * index },
+              : { x: position.x + (constantLengths.SUB_NODE_WIDTH + constantLengths.CONNECTION_LENGTH) * index, y: position.y },
           replacingNode: isReplacement && index === 0 ? currentNode : {},
         });
         node.data.branchIndex = nodeInfo.branchIndex;
@@ -165,7 +165,7 @@ export const useGenerateNodesAndEdges = () => {
         const edge = createEdgeConnection({
           sourceId: newNodes[edgeInfo.source].id,
           targetId: newNodes[edgeInfo.target].id,
-          sourceHandle: `${newNodes[edgeInfo.source].id}-bottom`,
+          sourceHandle: `${newNodes[edgeInfo.source].id}-right`,
           edgeLabel: edgeInfo.label,
         });
         if (edge) newEdges.push(edge);
@@ -203,11 +203,11 @@ export const useCalculateNewNodesAndEdges = () => {
           : isParallelRoot || addBeforeCurrentNode
             ? { x: 0, y: constantLengths.NODE_TOP_HEIGHT }
             : {
-                x: currentNode.position.x,
-                y:
-                  currentNode.position.y +
-                  getNodeHeight(currentNode) +
+                x:
+                  currentNode.position.x +
+                  getNodeWidth(currentNode) +
                   constantLengths.CONNECTION_LENGTH,
+                y: currentNode.position.y,
               };
 
       const { nodes, edges } = generateNodesAndEdges(
@@ -224,7 +224,7 @@ export const useCalculateNewNodesAndEdges = () => {
           createEdgeConnection({
             sourceId: currentNode.id,
             targetId: nodes[0].id,
-            sourceHandle: `${currentNode.id}-bottom`,
+            sourceHandle: `${currentNode.id}-right`,
           })!,
         );
       }

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

@@ -115,13 +115,33 @@ 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(() => {
+    if (diagramType === 'automation' && layoutDirection !== 'RIGHT') {
+      setLayoutDirection('RIGHT');
+    }
+  }, [diagramType, layoutDirection, setLayoutDirection]);
 
+  // Debounce layout recalculation to prevent continuous propagation
   useEffect(() => {
-    getLayoutedElements();
+    // Clear any pending layout recalculation
+    if (layoutTimeoutRef.current) {
+      clearTimeout(layoutTimeoutRef.current);
+    }
 
-    return () => { };
-  }, [nodes.length, edges.length, contentHeights, diagramType]);
+    // Debounce the layout recalculation
+    layoutTimeoutRef.current = setTimeout(() => {
+      getLayoutedElements();
+    }, 300); // 300ms debounce delay
+
+    return () => {
+      if (layoutTimeoutRef.current) {
+        clearTimeout(layoutTimeoutRef.current);
+      }
+    };
+  }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
 
   // Listen for layout direction changes
   useEffect(() => {
@@ -208,6 +228,14 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
                 edges={visibleEdges}
                 onEdgesChange={onEdgesChange}
                 fitView
+                fitViewOptions={{
+                  padding: 0.2,
+                  minZoom: 0.3,
+                  maxZoom: 2,
+                  includeHiddenNodes: false,
+                }}
+                minZoom={0.1}
+                maxZoom={2}
                 onNodeDragStart={onNodeDragStart}
                 onNodeDragStop={onNodeDragEnd}
                 onConnect={onConnect}

package/packages/diagrams/src/lib/utils/create-updated.tsx

@@ -28,8 +28,8 @@ export const createUpdatedEdges = (
         ? {
             ...e,
             source,
-            id: `${source}-bottomv${e.target}`, // Ensure edge ID includes handle
-            sourceHandle: `${source}-bottom`, // Update the source handle ID
+            id: `${source}-rightv${e.target}`, // Ensure edge ID includes handle
+            sourceHandle: `${source}-right`, // Update the source handle ID for horizontal workflow
           }
         : e,
     );