@flowuent-org/diagramming-core 1.1.9 → 1.2.1

package/packages/diagrams/src/lib/molecules/SideHandles.tsx

@@ -7,24 +7,93 @@ import { useSelectedNode } from '../contexts/DiagramProvider';
 // Define the props type for the component
 interface SideHandlesProps {
   className?: string;
+  /** Show all handles regardless of selection state */
+  alwaysShow?: boolean;
+  /** Which positions to show handles on */
+  positions?: ('top' | 'bottom' | 'left' | 'right')[];
 }
 
+// Connection point handle styles
+const handleBaseStyle: React.CSSProperties = {
+  width: '14px',
+  height: '14px',
+  borderRadius: '50%',
+  border: '3px solid #10B981',
+  backgroundColor: '#1a1a2e',
+  transition: 'all 0.2s ease-in-out',
+  cursor: 'crosshair',
+  zIndex: 10,
+};
+
+// Hidden handle style for the duplicate (allows bidirectional but only shows one visual handle)
+const hiddenHandleStyle: React.CSSProperties = {
+  ...handleBaseStyle,
+  opacity: 0,
+  pointerEvents: 'all',
+};
+
+const handleHoverStyle = `
+  .connection-handle:hover {
+    transform: scale(1.3);
+    background-color: #10B981 !important;
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+  }
+  .connection-handle:active {
+    transform: scale(1.1);
+    background-color: #059669 !important;
+  }
+`;
+
 export const SideHandles: React.FC<SideHandlesProps> = React.memo(
-  ({ className }) => {
+  ({ className, alwaysShow = false, positions = ['top', 'bottom', 'left', 'right'] }) => {
     const sideHandles = useNodeSideHandles();
     const nodeId = useNodeId();
     const selectedNode = useSelectedNode();
+    
+    const isSelected = selectedNode === nodeId;
+    const shouldShow = alwaysShow || isSelected;
+
+    // Inject hover styles
+    React.useEffect(() => {
+      const styleId = 'connection-handle-styles';
+      if (!document.getElementById(styleId)) {
+        const styleSheet = document.createElement('style');
+        styleSheet.id = styleId;
+        styleSheet.textContent = handleHoverStyle;
+        document.head.appendChild(styleSheet);
+      }
+    }, []);
 
     if (sideHandles) {
       return (
         <div>
+          {/* Left - Bidirectional */}
           <Handle
             type="source"
+            id={`${nodeId}-left-source`}
+            position={Position.Left}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-left-target`}
             position={Position.Left}
+            style={hiddenHandleStyle}
           />
+          {/* Right - Bidirectional */}
           <Handle
             type="source"
+            id={`${nodeId}-right-source`}
+            position={Position.Right}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-right-target`}
             position={Position.Right}
+            style={hiddenHandleStyle}
           />
         </div>
       );
@@ -32,18 +101,114 @@ export const SideHandles: React.FC<SideHandlesProps> = React.memo(
 
     return (
       <Box
-        display={selectedNode ? undefined : 'none'}
+        sx={{
+          opacity: shouldShow ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          pointerEvents: shouldShow ? 'auto' : 'none',
+          '& .react-flow__handle': {
+            visibility: shouldShow ? 'visible' : 'hidden',
+          }
+        }}
       >
-        <Handle
-          type="source"
-          id={`${nodeId}-bottom`}
-          position={Position.Bottom}
-        />
-        <Handle
-          type="target"
-          id={`${nodeId}-top`}
-          position={Position.Top}
-        />
+        {/* Top Handle - Bidirectional (source + target) */}
+        {positions.includes('top') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-top-source`}
+              position={Position.Top}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                top: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-top-target`}
+              position={Position.Top}
+              style={{
+                ...hiddenHandleStyle,
+                top: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Bottom Handle - Bidirectional (source + target) */}
+        {positions.includes('bottom') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-bottom-source`}
+              position={Position.Bottom}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                bottom: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-bottom-target`}
+              position={Position.Bottom}
+              style={{
+                ...hiddenHandleStyle,
+                bottom: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Left Handle - Bidirectional (source + target) */}
+        {positions.includes('left') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-left-source`}
+              position={Position.Left}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                left: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-left-target`}
+              position={Position.Left}
+              style={{
+                ...hiddenHandleStyle,
+                left: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Right Handle - Bidirectional (source + target) */}
+        {positions.includes('right') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-right-source`}
+              position={Position.Right}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                right: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-right-target`}
+              position={Position.Right}
+              style={{
+                ...hiddenHandleStyle,
+                right: '-8px',
+              }}
+            />
+          </>
+        )}
       </Box>
     );
   },

package/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.tsx

@@ -94,21 +94,26 @@ export const CustomEdgeGenerator = (type: EdgeTypes = EdgeTypes.Default) => {
             onDoubleClick={createBendPoint}
             style={{
               ...style,
-              strokeWidth: (Number(style?.strokeWidth) || 1) * 4,
-              strokeOpacity: selectedEdgeId === id ? 0.1 : 0,
+              strokeWidth: (Number(style?.strokeWidth) || 2) * 4,
+              strokeOpacity: selectedEdgeId === id ? 0.2 : 0.05,
+              stroke: style?.stroke || '#10B981',
             }}
             fill="none"
           />
 
-          {/* Main path for the edge */}
+          {/* Main path for the edge - always visible */}
           <path
             id={id}
             d={edgePath}
             onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
             onDoubleClick={createBendPoint}
-            style={{ ...style }}
+            style={{ 
+              ...style,
+              stroke: style?.stroke || '#10B981',
+              strokeWidth: style?.strokeWidth || 2,
+            }}
             markerStart={isErDiagram ? `url(#${id}-marker-start)` : markerStart}
-            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : markerEnd}
+            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : (markerEnd || 'url(#arrow)')}
             fill="none"
           />
         </g>

package/packages/diagrams/src/lib/styles.css

@@ -1,3 +1,56 @@
 .react-flow__edges {
   z-index: 20 !important;
 }
+
+/* Connection Handle Styles */
+.react-flow__handle {
+  transition: all 0.2s ease-in-out;
+}
+
+.react-flow__handle.connection-handle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 3px solid #10B981;
+  background-color: #1a1a2e;
+  cursor: crosshair;
+  z-index: 10;
+}
+
+.react-flow__handle.connection-handle:hover {
+  transform: scale(1.3);
+  background-color: #10B981;
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+}
+
+.react-flow__handle.connection-handle:active,
+.react-flow__handle.connection-handle.connecting {
+  transform: scale(1.1);
+  background-color: #059669;
+}
+
+/* Pulse animation for selected node handles */
+@keyframes handle-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+}
+
+.react-flow__node.selected .connection-handle {
+  animation: handle-pulse 1.5s ease-in-out infinite;
+}
+
+/* Connection line styles when drawing */
+.react-flow__connectionline {
+  stroke: #10B981;
+  stroke-width: 2;
+}
+
+/* Valid connection target highlight */
+.react-flow__handle.connectionindicator {
+  background-color: #10B981;
+  border-color: #fff;
+}

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

@@ -8,9 +8,68 @@ interface DiagramContainerProps
   showAutomationExecutionPanel?: boolean;
 }
 
+// Default arrow marker definitions for edges
+const EdgeMarkerDefinitions = () => (
+  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <defs>
+      {/* Arrow marker - Green */}
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
+      </marker>
+      
+      {/* Arrow marker - Blue */}
+      <marker
+        id="arrow-blue"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
+      </marker>
+      
+      {/* Arrow marker - White */}
+      <marker
+        id="arrow-white"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
+      </marker>
+      
+      {/* Circle marker */}
+      <marker
+        id="circle"
+        viewBox="0 0 10 10"
+        refX="5"
+        refY="5"
+        markerWidth="5"
+        markerHeight="5"
+      >
+        <circle cx="5" cy="5" r="4" fill="#10B981" />
+      </marker>
+    </defs>
+  </svg>
+);
+
 export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
   return (
     <ReactFlowProvider>
+      <EdgeMarkerDefinitions />
       <DiagramContent {...props} />
     </ReactFlowProvider>
   );

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

@@ -45,6 +45,10 @@ export interface DiagrammingPageRef {
   getEdges: () => any[];
   // Get ordered nodes based on edge connections (arrow direction)
   getNodeOrder: () => NodeOrderResult;
+  // Get current state for saving
+  getCurrentState: () => { nodes: any[]; edges: any[] };
+  // Set nodes and edges (for restoring saved state)
+  setNodesAndEdges: (nodes: any[], edges: any[]) => void;
 }
 
 // Internal component that exposes undo/redo functionality
@@ -63,52 +67,42 @@ const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, {
   const edges = useDiagram((state) => state.edges);
   const selectedNode = useDiagram((state) => state.selectedNode);
   const setNodes = useDiagram((state) => state.setNodes);
+  const setEdges = useDiagram((state) => state.setEdges);
 
   // Send node order to parent project whenever nodes/edges change
   useEffect(() => {
     if (edges.length > 0) {
-      // Get only nodes that are connected by edges (exclude orphan nodes)
-      const nodeOrder = orderNodesByEdges(nodes, edges, { includeOrphanNodes: false });
-      
-      // Get only connected nodes (nodes that appear in edges)
+      // Get only nodes that are connected by edges
       const connectedNodeIds = new Set<string>();
       edges.forEach((edge) => {
         connectedNodeIds.add(edge.source);
         connectedNodeIds.add(edge.target);
       });
       
-      // Filter ordered nodes to only include connected ones
-      const connectedOrderedNodes = nodeOrder.orderedNodes.filter(
-        (node) => connectedNodeIds.has(node.id)
-      );
+      // Filter nodes to only include connected ones
+      const connectedNodes = nodes.filter((node) => connectedNodeIds.has(node.id));
+      
+      // Get node order for connected nodes only
+      const nodeOrder = orderNodesByEdges(connectedNodes, edges, { includeOrphanNodes: false });
       
-      // Print node structure to console
-      console.log('\n========== NODE ORDER BY EDGES ==========');
-      console.log('\n📋 CONNECTED NODES ORDER (following arrows):');
-      connectedOrderedNodes.forEach((node, index) => {
+      // Print only connected nodes to console
+      console.log('\n========== NODE ORDER (Connected Only) ==========');
+      console.log('\n📋 EXECUTION ORDER:');
+      nodeOrder.orderedNodes.forEach((node, index) => {
         console.log(`  ${index + 1}. [${node.type || 'unknown'}] ${node.id}`);
       });
       
-      console.log('\n🟢 START NODE:', nodeOrder.startNodes[0]?.id || '(none)');
-      console.log('🔴 END NODE:', nodeOrder.endNodes[0]?.id || '(none)');
-      
       console.log('\n🔗 EDGE ORDER:');
       edges.forEach((edge, index) => {
         console.log(`  ${index + 1}. ${edge.source} ──→ ${edge.target}`);
       });
       
-      console.log('\n📊 TOTAL CONNECTED NODES:', connectedOrderedNodes.length);
-      console.log('==========================================\n');
-      
-      // Create updated result with only connected nodes
-      const connectedNodeOrder: NodeOrderResult = {
-        ...nodeOrder,
-        orderedNodes: connectedOrderedNodes,
-      };
+      console.log('\n📊 TOTAL:', nodeOrder.orderedNodes.length, 'nodes,', edges.length, 'edges');
+      console.log('=================================================\n');
       
       // Send to parent project if callback provided
       if (onNodeOrderChange) {
-        onNodeOrderChange(connectedNodeOrder);
+        onNodeOrderChange(nodeOrder);
       }
     }
   }, [nodes, edges, onNodeOrderChange]);
@@ -143,6 +137,13 @@ const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, {
     getEdges: () => edges,
     // Get ordered nodes based on edge connections
     getNodeOrder: () => orderNodesByEdges(nodes, edges),
+    // Get current state for saving
+    getCurrentState: () => ({ nodes: [...nodes], edges: [...edges] }),
+    // Set nodes and edges (for restoring saved state)
+    setNodesAndEdges: (newNodes: any[], newEdges: any[]) => {
+      setNodes(newNodes);
+      setEdges(newEdges);
+    },
   }));
 
   return (

package/packages/diagrams/src/lib/types/edge-types.ts

@@ -1,3 +1,4 @@
+import { MarkerType } from '@xyflow/react';
 import { Markers } from '../assets/markers/markers.type';
 import { CustomEdgeGenerator } from '../organisms/CustomEdge/custom-edge-generator';
 import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
@@ -13,6 +14,22 @@ export default {
 };
 
 export const defaultEdgeOptions = {
+  style: {
+    strokeWidth: 2,
+    stroke: '#10B981', // Green color for better visibility
+  },
+  // Arrow marker at the end of the edge
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 20,
+    height: 20,
+    color: '#10B981',
+  },
+  animated: false,
+};
+
+// ER Diagram edge options (for entity relationship diagrams)
+export const erDiagramEdgeOptions = {
   style: {
     strokeWidth: 2,
     stroke: '#4858E9',

package/packages/diagrams/src/lib/utils/generateEdgesFromNodeOrder.ts

@@ -0,0 +1,113 @@
+import { Edge, MarkerType } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+
+/**
+ * Generates edges based on the order of nodes in the array.
+ * Creates a linear connection from first node to last node.
+ * 
+ * @param nodes - Array of nodes in the desired order
+ * @param options - Configuration options for edge generation
+ * @returns Array of edges connecting nodes in sequence
+ */
+export interface GenerateEdgesOptions {
+  /** Edge style stroke color */
+  strokeColor?: string;
+  /** Edge stroke width */
+  strokeWidth?: number;
+  /** Whether to add arrow marker at the end */
+  markerEnd?: boolean;
+  /** Whether edges should be animated */
+  animated?: boolean;
+  /** Source handle ID pattern (e.g., 'right-source', 'bottom-source') */
+  sourceHandleId?: string;
+  /** Target handle ID pattern (e.g., 'left-target', 'top-target') */
+  targetHandleId?: string;
+}
+
+const defaultOptions: GenerateEdgesOptions = {
+  strokeColor: '#10B981',
+  strokeWidth: 2,
+  markerEnd: true,
+  animated: false,
+  sourceHandleId: 'right-source',
+  targetHandleId: 'left-target',
+};
+
+export function generateEdgesFromNodeOrder(
+  nodes: ICardNode[],
+  options: GenerateEdgesOptions = {}
+): Edge[] {
+  const opts = { ...defaultOptions, ...options };
+  const edges: Edge[] = [];
+
+  // Need at least 2 nodes to create edges
+  if (nodes.length < 2) {
+    return edges;
+  }
+
+  // Create edges between consecutive nodes
+  for (let i = 0; i < nodes.length - 1; i++) {
+    const sourceNode = nodes[i];
+    const targetNode = nodes[i + 1];
+
+    const edge: Edge = {
+      id: `edge-${sourceNode.id}-${targetNode.id}`,
+      source: sourceNode.id,
+      target: targetNode.id,
+      sourceHandle: opts.sourceHandleId,
+      targetHandle: opts.targetHandleId,
+      type: 'default',
+      animated: opts.animated,
+      style: {
+        stroke: opts.strokeColor,
+        strokeWidth: opts.strokeWidth,
+      },
+    };
+
+    // Add arrow marker if enabled
+    if (opts.markerEnd) {
+      edge.markerEnd = {
+        type: MarkerType.ArrowClosed,
+        width: 20,
+        height: 20,
+        color: opts.strokeColor,
+      };
+    }
+
+    edges.push(edge);
+  }
+
+  return edges;
+}
+
+/**
+ * Generates edges based on node order for automation diagrams (horizontal layout)
+ */
+export function generateAutomationEdges(nodes: ICardNode[]): Edge[] {
+  return generateEdgesFromNodeOrder(nodes, {
+    strokeColor: '#10B981',
+    strokeWidth: 2,
+    markerEnd: true,
+    animated: false,
+    sourceHandleId: 'right-source',
+    targetHandleId: 'left-target',
+  });
+}
+
+/**
+ * Generates edges based on node order for vertical layout diagrams
+ */
+export function generateVerticalEdges(nodes: ICardNode[]): Edge[] {
+  return generateEdgesFromNodeOrder(nodes, {
+    strokeColor: '#10B981',
+    strokeWidth: 2,
+    markerEnd: true,
+    animated: false,
+    sourceHandleId: 'bottom-source',
+    targetHandleId: 'top-target',
+  });
+}
+
+export default generateEdgesFromNodeOrder;
+
+