@flowuent-org/diagramming-core 1.3.4 → 1.3.6

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

@@ -55,7 +55,7 @@ export interface AutomationSlackNodeData {
   label: string;
   description: string;
   operationType?: SlackOperationType;
-  status: 'idle' | 'running' | 'success' | 'error' | 'authenticated';
+  status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
   parameters?: {
     // Message operations
     channel?: string;
@@ -228,11 +228,11 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
   const tokenExpired = isTokenExpired(data.parameters?.slackTokenExpiresAt);
 
   // Execution state
-  const status = data.status || 'idle';
-  const executionProgress = status === 'running' ? 50 : 0;
+  const status = data.status || 'Ready';
+  const executionProgress = status === 'Running' ? 50 : 0;
 
   // Status configuration - using centralized status colors
-  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'idle');
+  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'ready');
 
   // Handle JSON view
   const handleJsonClick = () => {
@@ -342,8 +342,8 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
       size="small"
       label={
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          {status === 'success' && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-          {status === 'error' && <ErrorIcon sx={{ fontSize: 12 }} />}
+          {(status === 'Completed' || status === 'success') && <CheckCircleIcon sx={{ fontSize: 12 }} />}
+          {(status === 'Failed' || status === 'error') && <ErrorIcon sx={{ fontSize: 12 }} />}
           <span>{statusConfig.label}</span>
         </Box>
       }
@@ -522,7 +522,7 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
         </Box>
 
         {/* Progress Bar (when running) */}
-        {status === 'running' && (
+        {status === 'Running' && (
           <Box sx={{ mb: 1.5 }}>
             <LinearProgress
               variant="determinate"

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

@@ -58,7 +58,7 @@ export interface AutomationTelegramNodeData {
   label: string;
   description: string;
   operationType?: TelegramOperationType;
-  status: 'idle' | 'running' | 'success' | 'error' | 'authenticated';
+  status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
   parameters?: {
     // Message operations
     chatId?: string;
@@ -221,11 +221,11 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
   const botId = data.telegramAuth?.botId || data.parameters?.botId;
 
   // Execution state
-  const status = data.status || 'idle';
-  const executionProgress = status === 'running' ? 50 : 0;
+  const status = data.status || 'Ready';
+  const executionProgress = status === 'Running' ? 50 : 0;
 
   // Status configuration - using centralized status colors
-  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'idle');
+  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'ready');
 
   // Handle JSON view
   const handleJsonClick = () => {
@@ -335,8 +335,8 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
       size="small"
       label={
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          {status === 'success' && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-          {status === 'error' && <ErrorIcon sx={{ fontSize: 12 }} />}
+          {(status === 'Completed' || status === 'success') && <CheckCircleIcon sx={{ fontSize: 12 }} />}
+          {(status === 'Failed' || status === 'error') && <ErrorIcon sx={{ fontSize: 12 }} />}
           <span>{statusConfig.label}</span>
         </Box>
       }
@@ -515,7 +515,7 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
         </Box>
 
         {/* Progress Bar (when running) */}
-        {status === 'running' && (
+        {status === 'Running' && (
           <Box sx={{ mb: 1.5 }}>
             <LinearProgress
               variant="determinate"

package/packages/diagrams/src/lib/components/automation/statusColors.ts

@@ -17,8 +17,9 @@ export interface AutomationStatusColors {
   completed: StatusColorConfig;
   success: StatusColorConfig;  // Alias for completed (used in some nodes)
   error: StatusColorConfig;
+  failed: StatusColorConfig;  // Alias for error
   ready: StatusColorConfig;
-  idle: StatusColorConfig;
+  'need to config': StatusColorConfig;  // Status when configuration is needed
   authenticated?: StatusColorConfig;  // Optional, used in auth-enabled nodes
 }
 
@@ -28,8 +29,9 @@ export interface AutomationStatusColors {
  * Colors are designed to be visually distinct and accessible:
  * - Running: Blue (#2563EB) - indicates active execution
  * - Completed/Success: Yellow (#FCD34D) - indicates successful completion
- * - Error: Red (#EF4444) - indicates failure
- * - Ready/Idle: Gray/Green - indicates waiting state
+ * - Error/Failed: Red (#EF4444) - indicates failure
+ * - Ready: Green (#86EFAC) - indicates ready to execute
+ * - Need to Config: Yellow (#FBBF24) - indicates configuration required
  */
 export const automationStatusColors: AutomationStatusColors = {
   running: {
@@ -52,15 +54,20 @@ export const automationStatusColors: AutomationStatusColors = {
     bgColor: 'rgba(239, 68, 68, 0.1)',
     label: 'Error',
   },
+  failed: {
+    color: '#EF4444',
+    bgColor: 'rgba(239, 68, 68, 0.1)',
+    label: 'Failed',
+  },
   ready: {
     color: '#86EFAC',
     bgColor: 'rgba(16, 185, 129, 0.1)',
     label: 'Ready',
   },
-  idle: {
-    color: '#6B7280',
-    bgColor: 'rgba(107, 114, 128, 0.1)',
-    label: 'Idle',
+  'need to config': {
+    color: '#FBBF24',
+    bgColor: 'rgba(251, 191, 36, 0.1)',
+    label: 'Need to Config',
   },
   authenticated: {
     color: '#0088cc',
@@ -88,15 +95,23 @@ export const getStatusColor = (
     'completed': 'completed',
     'success': 'success',
     'error': 'error',
-    'failed': 'error',
+    'failed': 'failed',
     'ready': 'ready',
-    'idle': 'idle',
+    'idle': 'ready', // Map idle to ready
+    'need to config': 'need to config',
+    'need_to_config': 'need to config',
+    'not_ready': 'need to config',
+    'not ready': 'need to config',
     'authenticated': 'authenticated',
     'connected': 'authenticated',
   };
 
   const configKey = statusMap[normalizedStatus] || defaultStatus;
-  return automationStatusColors[configKey] || automationStatusColors[defaultStatus];
+  const config = automationStatusColors[configKey];
+  if (config) {
+    return config;
+  }
+  return automationStatusColors[defaultStatus];
 };
 
 /**

package/packages/diagrams/src/lib/contexts/diagramStoreTypes.tsx

@@ -66,6 +66,7 @@ export interface DiagramState {
   nodes: ICardNode[];
   defaultNodes: ICardNode[];
   dragStartPosition: DragStartPosition | null;
+  dragStartPositions: Record<string, { x: number; y: number }> | null;
   edges: Edge[];
   defaultEdges: Edge[];
   history: HistoryEvent[];

package/packages/diagrams/src/lib/contexts/onDragStart.ts

@@ -20,9 +20,26 @@ export const onNodeDragStart =
         positionAbsolute: cardNode.position,
       };
 
+      // Store initial positions for ALL selected nodes (for multi-node dragging)
+      // Get selected nodes from state.nodes (they should have selected property set by ReactFlow)
+      const selectedNodes = state.nodes.filter(n => (n as any).selected);
+      let dragStartPositions: Record<string, { x: number; y: number }> | null = null;
+      
+      if (selectedNodes.length > 1) {
+        // Multiple nodes are selected - store all their initial positions
+        dragStartPositions = {};
+        selectedNodes.forEach(selectedNode => {
+          dragStartPositions![selectedNode.id] = {
+            x: selectedNode.position.x,
+            y: selectedNode.position.y,
+          };
+        });
+      }
+
       return {
         ...state,
         dragStartPosition: changeForUndo,
+        dragStartPositions: dragStartPositions || null,
       };
     });
   };

package/packages/diagrams/src/lib/contexts/onNodeDragEnd.ts

@@ -18,10 +18,101 @@ export const onNodeDragEnd =
     const cardNode = node as ICardNode;
     set((state: DiagramStore) => {
       const dragStartPosition = state.dragStartPosition;
+      const dragStartPositions = state.dragStartPositions;
 
-      // If there's no drag start position, just return the state unchanged
+      // Get all currently selected nodes from state (they should have selected property)
+      // Also get the current node's position from ReactFlow (cardNode parameter)
+      const selectedNodesInState = state.nodes.filter(n => (n as any).selected);
+      const isMultiDrag = dragStartPositions && Object.keys(dragStartPositions).length > 1;
+
+      // If multiple nodes were dragged, handle all of them
+      if (isMultiDrag && dragStartPositions) {
+        const historyEvents: HistoryEvent[] = [];
+        const updatedNodes = state.nodes.map((n) => {
+          // Check if this node was part of the multi-drag
+          if (dragStartPositions![n.id]) {
+            const startPos = dragStartPositions[n.id];
+            // For the dragged node, use position from ReactFlow's node parameter (most up-to-date)
+            // For other nodes, use position from state.nodes (updated by onNodesChange)
+            let endPos = n.position;
+            if (n.id === cardNode.id) {
+              // Use the position from ReactFlow for the node being dragged
+              endPos = cardNode.position;
+            }
+            
+            // Check if this node moved
+            if (startPos.x !== endPos.x || startPos.y !== endPos.y) {
+              // Create history event for this node
+              historyEvents.push({
+                title: `Node '${n.id}' moved from (${startPos.x.toFixed(1)}, ${startPos.y.toFixed(1)}) to (${endPos.x.toFixed(1)}, ${endPos.y.toFixed(1)})`,
+                backward: {
+                  t: 'node-change',
+                  type: 'position',
+                  id: n.id,
+                  message: `Revert: Node '${n.id}' position back to (${startPos.x.toFixed(1)}, ${startPos.y.toFixed(1)})`,
+                  position: startPos,
+                  positionAbsolute: startPos,
+                },
+                forward: {
+                  t: 'node-change',
+                  type: 'position',
+                  id: n.id,
+                  message: `Redo: Node '${n.id}' moved to (${endPos.x}, ${endPos.y})`,
+                  position: endPos,
+                  positionAbsolute: endPos,
+                },
+              });
+
+              // Update node position - ensure it matches ReactFlow's current state
+              return {
+                ...n,
+                position: endPos,
+                data: { ...n.data, isPinned: true },
+              };
+            }
+          }
+          return n;
+        });
+
+        // Trigger onChange callbacks for all moved nodes
+        if (onChange && historyEvents.length > 0) {
+          historyEvents.forEach((historyEvent) => {
+            onChange({
+              t: 'node-change',
+              type: 'position',
+              id: historyEvent.forward.id,
+              position: historyEvent.forward.position,
+              positionAbsolute: historyEvent.forward.positionAbsolute,
+              message: historyEvent.title,
+            });
+          });
+        }
+
+        return {
+          ...addToHistory(state, historyEvents),
+          dragStartPosition: null,
+          dragStartPositions: null,
+          nodes: updatedNodes,
+        };
+      }
+
+      // Single node drag handling (original logic)
       if (!dragStartPosition) {
-        return state;
+        // Ensure the node's current position is persisted in state
+        const nodeInState = state.nodes.find((n) => n.id === cardNode.id);
+        if (nodeInState && (
+          nodeInState.position.x !== cardNode.position.x ||
+          nodeInState.position.y !== cardNode.position.y
+        )) {
+          // Update the node position to match the dragged position
+          const updatedNodes = state.nodes.map((n) =>
+            n.id === cardNode.id
+              ? { ...n, position: cardNode.position, data: { ...n.data, isPinned: true } }
+              : n,
+          );
+          return { ...state, nodes: updatedNodes, dragStartPositions: null };
+        }
+        return { ...state, dragStartPositions: null };
       }
 
       // Check if the node has moved
@@ -29,17 +120,21 @@ export const onNodeDragEnd =
         dragStartPosition.position.x !== cardNode.position.x ||
         dragStartPosition.position.y !== cardNode.position.y
       ) {
-        const updatedNodes = state.nodes.map((n) =>
-          n.id === cardNode.id
-            ? { ...n, data: { ...n.data, isPinned: true } }
-            : n,
-        );
+        // Update nodes array to ensure position is persisted
+        const updatedNodes = state.nodes.map((n) => {
+          if (n.id === cardNode.id) {
+            return { 
+              ...n, 
+              position: cardNode.position,
+              data: { ...n.data, isPinned: true } 
+            };
+          }
+          return n;
+        });
 
-        // Create the HistoryEvent entry with forward and backward changes
+        // Create the HistoryEvent entry
         const historyEvent: HistoryEvent = {
           title: `Node '${cardNode.id}' moved from (${dragStartPosition.position.x.toFixed(1)}, ${dragStartPosition.position.y.toFixed(1)}) to (${cardNode.position.x.toFixed(1)}, ${cardNode.position.y.toFixed(1)})`,
-
-          // Backward change for undo
           backward: {
             t: 'node-change',
             type: 'position',
@@ -48,8 +143,6 @@ export const onNodeDragEnd =
             position: dragStartPosition.position,
             positionAbsolute: dragStartPosition.position,
           },
-
-          // Forward change for redo
           forward: {
             t: 'node-change',
             type: 'position',
@@ -74,12 +167,13 @@ export const onNodeDragEnd =
 
         return {
           ...addToHistory(state, [historyEvent]),
-          dragStartPosition: null, // Clear the drag start position
+          dragStartPosition: null,
+          dragStartPositions: null,
           nodes: updatedNodes,
         };
       }
 
-      // If no movement occurred, just reset dragStartPosition without updating history
-      return { ...state, dragStartPosition: null };
+      // If no movement occurred, just reset dragStartPosition
+      return { ...state, dragStartPosition: null, dragStartPositions: null };
     });
   };

package/packages/diagrams/src/lib/contexts/onNodesChange.ts

@@ -277,24 +277,44 @@ function handleElementChanges(
 
     const currentElements = elementType === 'node' ? get().nodes : get().edges;
 
+    // Separate position changes from other changes
+    const positionChanges: NodePositionChange[] = [];
+    const dimensionChanges: NodeDimensionChange[] = [];
+    const otherChanges: (NodeChange | EdgeChange)[] = [];
+
     changes.forEach((change) => {
-      if (change.type === 'position' || change.type === 'dimensions') {
-        return;
+      if (change.type === 'position') {
+        positionChanges.push(change as NodePositionChange);
+      } else if (change.type === 'dimensions') {
+        dimensionChanges.push(change as NodeDimensionChange);
       } else if (change.type === 'replace') {
         accumulatedResetChanges.push(change as ResetChange & { t: string });
       } else {
-        const historyEvent = createHistoryEvent(
-          change,
-          currentElements,
-          elementType,
-        );
-        if (historyEvent) {
-          newChanges.push(historyEvent.forward);
-          newHistory.push(historyEvent);
-        }
+        otherChanges.push(change);
+      }
+    });
+
+    // Handle other changes (add, remove, etc.)
+    otherChanges.forEach((change) => {
+      const historyEvent = createHistoryEvent(
+        change,
+        currentElements,
+        elementType,
+      );
+      if (historyEvent) {
+        newChanges.push(historyEvent.forward);
+        newHistory.push(historyEvent);
       }
     });
 
+    // Handle position changes - apply them but don't add to history
+    // History will be handled by onNodeDragEnd for individual nodes
+    // For multiple nodes, we need to ensure positions are applied
+    if (positionChanges.length > 0 && elementType === 'node') {
+      // Apply position changes immediately to ensure they persist
+      // Don't add to history here as onNodeDragEnd will handle it
+    }
+
     if (accumulatedResetChanges.length > 0) {
       const [resetChangesToEmit, historyChanges] = handleAccumulatedResets(
         accumulatedResetChanges,
@@ -310,6 +330,7 @@ function handleElementChanges(
       newChanges.forEach((change) => onChange(change));
     }
 
+    // Apply ALL changes including position changes to ensure they persist
     const updatedElements =
       elementType === 'node'
         ? applyNodeChanges(

package/packages/diagrams/src/lib/organisms/WorkFlowNode/NodeTypeDisplay.tsx

@@ -1,25 +1,113 @@
 import React from 'react';
-import { Typography } from '@mui/material';
-import { useNodeTitle, useNodeType } from '../../contexts/CardDataProvider';
+import { Typography, Box } from '@mui/material';
+import { useNodeTitle, useNodeType, useNodeVariant } from '../../contexts/CardDataProvider';
+import { NodeVariant } from '../../types/card-node';
+import {
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+} from '@flowuent-labs/molecules';
+
+// Icon mapping for different node types
+const getNodeIcon = (type: NodeVariant | string | undefined) => {
+  if (!type) return null;
+
+  const iconStyle = {
+    marginRight: '6px',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    flexShrink: 0,
+  };
+
+  switch (type) {
+    case 'parallel':
+      return <ParallelIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'branch':
+      return <BranchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'group':
+      return <GroupIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'return':
+      return <ReturnIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'loop':
+    case 'forLoop':
+      return <LoopIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'switch':
+      return <SwitchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'try':
+      return <TryIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'catch':
+      return <CatchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'tryCatch':
+      return <TryCatchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'function':
+      return <FunctionIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'call':
+      return <CallIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'let':
+      return <LetIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'set':
+      return <SetIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'emptyNode':
+      return <EmptyNodeIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'entity':
+      return <EntityIcon size={15} color="#86EFAC" style={iconStyle} />;
+    default:
+      return null;
+  }
+};
 
 const NodeTypeDisplay = React.memo(() => {
   const type = useNodeType();
+  const variant = useNodeVariant();
   const title = useNodeTitle();
+  // Get type from data.type or data.variant as fallback
+  const nodeType = (type || variant) as NodeVariant | string | undefined;
+  const icon = getNodeIcon(nodeType as NodeVariant);
+
   return (
-    <Typography
-      sx={{
-        textTransform: 'capitalize',
-        // fontWeight: 'bold',
-        fontStyle: 'italic',
-        fontSize: 12,
-        color: '#FFFFFF',
-      }}
-    >
-      {`[${type}]`}
-      {(title === 'Then' || title === 'Else') && (
-        <span >{': ' + title}</span>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'nowrap' }}>
+      {icon && (
+        <Box
+          component="span"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            lineHeight: 1,
+          }}
+        >
+          {icon}
+        </Box>
       )}
-    </Typography>
+      <Typography
+        sx={{
+          textTransform: 'capitalize',
+          fontStyle: 'italic',
+          fontSize: 12,
+          color: '#FFFFFF',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        {`[${nodeType || 'unknown'}]`}
+        {(title === 'Then' || title === 'Else') && (
+          <span>{': ' + title}</span>
+        )}
+      </Typography>
+    </Box>
   );
 });
 

package/packages/diagrams/src/lib/organisms/WorkFlowNode/WorkflowNodeIcons.tsx

@@ -0,0 +1,23 @@
+// Re-export all icons from molecules package
+export {
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+  StartNodeIcon,
+  NavigationIcon,
+} from '@flowuent-labs/molecules';
+
+// Re-export types for backward compatibility
+export type { SvgIconProps as IconProps } from '@flowuent-labs/molecules';