@flowuent-org/diagramming-core 1.1.1 → 1.1.2

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.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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

@@ -24,11 +24,10 @@ export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
     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;
+    // 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;
 
     // Create new AI Suggestion node
     const newNodeId = `ai-suggestion-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -55,8 +54,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,

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

@@ -116,12 +116,18 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
   const layoutDirection = useLayoutDirection();
   const setLayoutDirection = useSetLayoutDirection();
 
+  // Set layout direction to RIGHT for automation diagrams
+  useEffect(() => {
+    if (diagramType === 'automation' && layoutDirection !== 'RIGHT') {
+      setLayoutDirection('RIGHT');
+    }
+  }, [diagramType, layoutDirection, setLayoutDirection]);
 
   useEffect(() => {
     getLayoutedElements();
 
     return () => { };
-  }, [nodes.length, edges.length, contentHeights, diagramType]);
+  }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
 
   // Listen for layout direction changes
   useEffect(() => {
@@ -208,6 +214,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,
     );