@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,384 @@
+import { useCallback } from 'react';
+import { ICardNode, NodeDirection, NodeVariant } from '../types/card-node';
+import { Edge, MarkerType, useReactFlow } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import { produce } from 'immer';
+import { structures, StructureNode, StructureEdge } from '../types/structures';
+import constantLengths from '../utils/constant-lengths';
+import { generateMeaningfulId } from '../templates/cloud-arch/utils/idGenerator';
+import {
+  createUpdatedEdges,
+  createUpdatedNodes,
+} from '../utils/create-updated';
+import { getNodeHeight } from '../utils/utilities';
+import {
+  useDiagram,
+  useGetDefaultNodeData,
+  useSetEdges,
+  useSetNodes,
+} from '../contexts/DiagramProvider';
+
+interface NodeStructure {
+  nodes: StructureNode[];
+  edges: StructureEdge[];
+}
+
+interface CreateNodeParams {
+  predefinedId?: string;
+  parentId?: string;
+  title?: string;
+  variant?: NodeVariant;
+  position?: { x: number; y: number };
+  replacingNode?: Partial<ICardNode>;
+  isRoot?: boolean;
+}
+
+export interface WorkflowNodeActionProps {
+  direction: NodeDirection;
+  isReplacing: boolean;
+  variant: 'addParallelCol' | 'anchor';
+  addInMiddle?: boolean;
+  closeModal: () => void;
+  nodeId?: string;
+}
+
+// Hook to create edge connections
+export const useCreateEdgeConnection = () => {
+  return useCallback(
+    ({
+      sourceId,
+      targetId,
+      sourceHandle,
+      edgeLabel,
+    }: {
+      sourceId: string;
+      targetId: string;
+      sourceHandle: string;
+      edgeLabel?: string;
+    }): Edge | null => {
+      if (sourceId === targetId) return null;
+      return {
+        id: `edge-${sourceId}-${targetId}-${uuidv4()}`,
+        source: sourceId,
+        target: targetId,
+        type: 'default',
+        sourceHandle,
+        markerEnd: {
+          type: MarkerType.Arrow,
+          color: 'black',
+          strokeWidth: 2,
+        },
+        ...(edgeLabel && { label: edgeLabel }),
+      };
+    },
+    [],
+  );
+};
+
+// Hook to create a new node
+export const useCreateNewNode = () => {
+  const getDefaultNodeData = useGetDefaultNodeData(); // Specific hook for getDefaultNodeData
+  return useCallback(
+    ({
+      predefinedId,
+      parentId,
+      title,
+      variant,
+      position,
+      replacingNode = {},
+      isRoot,
+    }: CreateNodeParams): ICardNode => {
+      const nodeSize = {
+        width: constantLengths.SUB_NODE_WIDTH,
+        height: constantLengths.SUB_NODE_HEIGHT,
+      };
+      const nodeId = predefinedId ?? `workflow-node-${uuidv4()}`;
+      const defaultData =
+        getDefaultNodeData && variant ? getDefaultNodeData(variant) : {};
+
+      return {
+        ...replacingNode,
+        id: nodeId,
+        type: 'workflow',
+        position: position || { x: 0, y: 0 },
+        draggable: false,
+        data: {
+          ...defaultData,
+          ...replacingNode.data,
+          title: title ?? '',
+          type: variant ?? 'emptyNode',
+          nodeId,
+          isPinned: false,
+          isBlock: false,
+          blocks: [],
+          isRoot,
+          parallelChildrenCount: 0,
+        },
+        parentId,
+        style: { ...nodeSize },
+        ...nodeSize,
+      };
+    },
+    [getDefaultNodeData],
+  );
+};
+
+// Hook to generate nodes and edges based on the node structure
+export const useGenerateNodesAndEdges = () => {
+  const createNewNode = useCreateNewNode();
+  const createEdgeConnection = useCreateEdgeConnection();
+
+  return useCallback(
+    (
+      nodeStructure: NodeStructure,
+      isReplacement: boolean,
+      position: { x: number; y: number },
+      variantType: string,
+      isParallelRoot?: boolean,
+      currentNode?: ICardNode,
+    ): { nodes: ICardNode[]; edges: Edge[] } => {
+      const newNodes: ICardNode[] = [];
+      const newEdges: Edge[] = [];
+
+      nodeStructure.nodes.forEach((nodeInfo: StructureNode, index: number) => {
+        const node = createNewNode({
+          predefinedId:
+            currentNode && isReplacement && index === 0
+              ? currentNode.id
+              : undefined,
+          parentId:
+            currentNode &&
+            (isParallelRoot ? currentNode.id : currentNode.parentId),
+          title: nodeInfo.title,
+          variant: nodeInfo.variant ?? (variantType as NodeVariant),
+          position:
+            index === 0
+              ? position
+              : { x: position.x, y: position.y + 200 * index },
+          replacingNode: isReplacement && index === 0 ? currentNode : {},
+        });
+        node.data.branchIndex = nodeInfo.branchIndex;
+        newNodes.push(node);
+      });
+
+      nodeStructure.edges.forEach((edgeInfo: StructureEdge) => {
+        const edge = createEdgeConnection({
+          sourceId: newNodes[edgeInfo.source].id,
+          targetId: newNodes[edgeInfo.target].id,
+          sourceHandle: `${newNodes[edgeInfo.source].id}-bottom`,
+          edgeLabel: edgeInfo.label,
+        });
+        if (edge) newEdges.push(edge);
+      });
+
+      return { nodes: newNodes, edges: newEdges };
+    },
+    [createNewNode, createEdgeConnection],
+  );
+};
+
+// Hook to calculate the new nodes and edges based on the node variant and layout rules
+export const useCalculateNewNodesAndEdges = () => {
+  const generateNodesAndEdges = useGenerateNodesAndEdges();
+  const createEdgeConnection = useCreateEdgeConnection();
+
+  return useCallback(
+    ({
+      currentNode,
+      nodeVariant,
+      isReplacement,
+      isParallelRoot,
+      addBeforeCurrentNode,
+    }: {
+      currentNode?: ICardNode;
+      nodeVariant: NodeVariant;
+      isReplacement: boolean;
+      isParallelRoot: boolean;
+      addBeforeCurrentNode: boolean;
+    }): { nodes: ICardNode[]; edges: Edge[] } => {
+      const newPosition = !currentNode
+        ? { x: 0, y: 0 }
+        : isReplacement
+          ? currentNode.position
+          : isParallelRoot || addBeforeCurrentNode
+            ? { x: 0, y: constantLengths.NODE_TOP_HEIGHT }
+            : {
+                x: currentNode.position.x,
+                y:
+                  currentNode.position.y +
+                  getNodeHeight(currentNode) +
+                  constantLengths.CONNECTION_LENGTH,
+              };
+
+      const { nodes, edges } = generateNodesAndEdges(
+        structures[nodeVariant] || structures['workflow'],
+        isReplacement,
+        newPosition,
+        nodeVariant,
+        isParallelRoot,
+        currentNode,
+      );
+
+      if (!isReplacement && !isParallelRoot && currentNode) {
+        edges.push(
+          createEdgeConnection({
+            sourceId: currentNode.id,
+            targetId: nodes[0].id,
+            sourceHandle: `${currentNode.id}-bottom`,
+          })!,
+        );
+      }
+      if (
+        nodeVariant === 'tryCatch' ||
+        nodeVariant === 'branch' ||
+        nodeVariant === 'switch'
+      ) {
+        nodes.forEach((node) => {
+          node.data.branchRoot = nodes[0].id;
+          node.data.finalNodeId = nodes[nodes.length - 1].id;
+          node.data.caseCount = nodeVariant === 'switch' ? 2 : 0;
+          node.data.trueCase =
+            nodeVariant === 'tryCatch' || nodeVariant === 'branch'
+              ? nodes[1].id
+              : undefined;
+          node.data.falseCase =
+            nodeVariant === 'branch' ? nodes[2].id : undefined;
+        });
+      }
+
+      return { nodes, edges };
+    },
+    [generateNodesAndEdges, createEdgeConnection],
+  );
+};
+export const useWorkflowNodeAction = (props: WorkflowNodeActionProps) => {
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const setPannable = useDiagram((state) => state.setPannable);
+  const allNodes = useDiagram((state) => state.nodes);
+  const allEdges = useDiagram((state) => state.edges);
+  const setNodes = useSetNodes();
+  const setEdges = useSetEdges();
+
+  const calculateNewNodesAndEdges = useCalculateNewNodesAndEdges();
+
+  const handleAddNode = useCallback(
+    (type: string) => {
+      const targetNode = allNodes.find(({ id }) => props.nodeId === id);
+
+      const addBefore = props.variant === 'anchor' && props.direction === 'top';
+      const { nodes: newNodes, edges: newEdges } = calculateNewNodesAndEdges({
+        currentNode: targetNode,
+        nodeVariant: type as NodeVariant,
+        isReplacement: props.isReplacing,
+        isParallelRoot: props.variant === 'addParallelCol',
+        addBeforeCurrentNode: addBefore,
+      });
+
+      // Compute updated nodes and edges
+      const updatedNodes = createUpdatedNodes(
+        allNodes,
+        targetNode as ICardNode,
+        newNodes,
+        props.isReplacing,
+      );
+
+      const updatedEdges = createUpdatedEdges(
+        allEdges,
+        targetNode as ICardNode,
+        newNodes,
+        newEdges,
+        props.isReplacing,
+        props.addInMiddle,
+      );
+
+      // Set the updated nodes and edges directly
+      setNodes(updatedNodes);
+      setEdges(updatedEdges);
+
+      // Reset selected node and enable panning
+      setSelectedNode(null);
+      setPannable(true);
+
+      // Close the modal
+      props.closeModal();
+    },
+    [
+      props.nodeId,
+      allNodes,
+      allEdges,
+      setNodes,
+      setEdges,
+      props,
+      calculateNewNodesAndEdges,
+    ],
+  );
+
+  return { addNode: handleAddNode };
+};
+// Hook to add a new case to a switch node
+export const useAddSwitchCase = () => {
+  const createNewNode = useCreateNewNode();
+  const createEdgeConnection = useCreateEdgeConnection();
+
+  // Callback to add a new case to the given switch node
+  return useCallback(
+    (switchNode: ICardNode): { nodes: ICardNode[]; edges: Edge[] } => {
+      // Validate if the switch node has the required properties
+      if (
+        switchNode.data.caseCount === undefined ||
+        switchNode.data.finalNodeId === undefined
+      ) {
+        console.error('Switch node is missing caseCount or finalNodeId');
+        return { nodes: [], edges: [] };
+      }
+
+      // Prepare case details
+      const caseNumber = switchNode.data.caseCount + 1;
+      const finalNodeId = switchNode.data.finalNodeId;
+      const caseTitle = `Case ${caseNumber}`;
+      const newPos = {
+        x: switchNode.position?.x || 0,
+        y: (switchNode.position?.y || 0) + 200 * caseNumber,
+      };
+
+      // Create the new case node
+      const newCaseNode = createNewNode({
+        parentId: switchNode.parentId,
+        title: caseTitle,
+        variant: 'emptyNode',
+        position: newPos,
+      });
+      newCaseNode.data.branchIndex = switchNode.data.caseCount;
+
+      // Create edges between the switch node and the new case node
+      const switchToNewCaseEdge = createEdgeConnection({
+        sourceId: switchNode.id,
+        targetId: newCaseNode.id,
+        sourceHandle: `${switchNode.id}-case${caseNumber}`,
+        edgeLabel: caseTitle.toLowerCase(),
+      });
+
+      const newCaseToFinalEdge = createEdgeConnection({
+        sourceId: newCaseNode.id,
+        targetId: finalNodeId,
+        sourceHandle: `${newCaseNode.id}-bottom`,
+      });
+
+      // Update switch node case count
+      const updatedSwitchNode = produce(switchNode, (draft) => {
+        draft.data.caseCount
+          ? (draft.data.caseCount += 1)
+          : (draft.data.caseCount = 1);
+      });
+      if (!switchToNewCaseEdge || !newCaseToFinalEdge) {
+        throw new Error('Edges were not created successfully');
+      }
+      // Return the new case node, updated switch node, and edges
+      return {
+        nodes: [newCaseNode, updatedSwitchNode],
+        edges: [switchToNewCaseEdge, newCaseToFinalEdge],
+      };
+    },
+    [createNewNode, createEdgeConnection],
+  );
+};

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

@@ -0,0 +1,147 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // Importing UUID library for generating unique IDs
+import { Box } from '@mui/material';
+import { useAddBlock } from '../utils/flow-node-hooks';
+import {
+  useIsAddingBlock,
+  useNodeId,
+  useSetAddingBlock,
+} from '../contexts/CardDataProvider';
+import { IBlockType, ICardNode } from '../types/card-node';
+import { useRegisterEventCallback } from '../utils/event-hooks';
+import StyledBox from '../atoms/StyledBox';
+import CardBlockTypeSelector from '../atoms/CardBlockTypeSelector';
+import {
+  useDiagramNodes,
+  useSelectedNode,
+  useSetNodes,
+} from '../contexts/DiagramProvider'; // Importing Box component from Material-UI
+import { GenericEventHandler } from '../utils/event-store';
+
+// Memoized component for adding block button content
+export const AddBlockBtnContent = memo(() => {
+  const id = useNodeId();
+  const onSave = useAddBlock(); // Custom hook for saving block to flow node
+  const setAddingBlock = useSetAddingBlock();
+  // State for managing block type selection
+  const [blockType, setBlockType] = useState<IBlockType>('String');
+
+  // Reference for input element
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const nodes = useDiagramNodes();
+  const setNodes = useSetNodes();
+
+  // Callback function for handling click events
+  const handler: GenericEventHandler = useCallback(
+    (...args: unknown[]) => {
+      const selectedNodeId = args[0] as string | undefined;
+      if (selectedNodeId === id) {
+        return;
+      }
+
+      // Getting input value
+      const value = inputRef.current?.value;
+
+      // Returning if input value is empty
+      if (!value) {
+        return;
+      }
+
+      // Updating nodes with new block
+      const newNodes = nodes.map((node) => {
+        if (node.id === id) {
+          const newBlock = {
+            color: node.data.color,
+            id: uuidv4(),
+            title: value,
+          }; // Creating new block object
+          const newBlocks = [...(node.data.blocks || []), newBlock]; // Adding new block to existing blocks
+          return {
+            ...node,
+            data: { ...node.data, blocks: newBlocks },
+          } as ICardNode; // Updating node data with new blocks
+        }
+        return node as ICardNode;
+      });
+
+      // Setting updated nodes in React Flow
+      setNodes(newNodes);
+    },
+    [nodes, setNodes, id],
+  );
+
+  // Register the new block when the user clicks outside on empty space of the pane
+  useRegisterEventCallback('onPaneClick', handler);
+
+  // Register the new block when the user clicks on some other node
+  useRegisterEventCallback('onOpenToolbar', handler);
+
+  // Effect for focusing on input element after component mount
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 0); // Delayed focusing on input element
+  }, []);
+
+  // Callback function for handling input save events
+  const handleInputSave = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key !== 'Enter') {
+        return;
+      }
+
+      const inputVal = inputRef.current?.value; // Getting input value
+      if (!inputVal) {
+        return;
+      }
+
+      onSave({ title: inputVal, type: blockType }); // Saving block with input value and selected type
+      const cur = inputRef.current;
+      if (cur) {
+        cur.value = ''; // Clearing input value after save
+      }
+      setAddingBlock(false); // Hiding add block button after save
+    },
+    [onSave, setAddingBlock, blockType],
+  );
+
+  // Rendering input box for adding new block and block type selection
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <StyledBox
+        component="input"
+        variant="cardAddNewBlock"
+        /*onKeyDown={handleInputSave}*/
+        innerRef={inputRef} // Attaching ref to input element
+      />
+      {id && (
+        <CardBlockTypeSelector
+          value={blockType}
+          onChange={(event) => setBlockType(event.target.value as IBlockType)} // Handling block type change
+          id={id}
+        />
+      )}
+    </Box>
+  );
+});
+
+// Memoized component for adding block button
+export const AddBlockBtn = memo(() => {
+  const id = useNodeId();
+  const isAddingBlock = useIsAddingBlock();
+
+  const selectedNode = useSelectedNode();
+
+  // Rendering add block button only if showAddBlock is true and selectedNode matches current node ID
+  if (!isAddingBlock || selectedNode !== id) {
+    return <></>;
+  }
+
+  return <AddBlockBtnContent />; // Rendering add block button content
+});

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Box, Typography, Chip, Paper } from '@mui/material';
+import { useAvailableVariables } from '../contexts/DiagramProvider';
+
+export const AvailableVariablesDisplay: React.FC = () => {
+    const availableVariables = useAvailableVariables();
+
+    if (!availableVariables || availableVariables.length === 0) {
+        return (
+            <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
+                <Typography variant="h6" gutterBottom>
+                    Available Variables
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    No variables available yet. Create function, let, set, or forLoop nodes to see variables here.
+                </Typography>
+            </Paper>
+        );
+    }
+
+    // Group variables by type
+    const groupedVariables = availableVariables.reduce((acc, variable) => {
+        const type = variable.type;
+        if (!acc[type]) acc[type] = [];
+        acc[type].push(variable);
+        return acc;
+    }, {} as Record<string, typeof availableVariables>);
+
+    return (
+        <Paper sx={{ p: 2, m: 1, bgcolor: 'background.paper' }}>
+            <Typography variant="h6" gutterBottom>
+                Available Variables ({availableVariables.length})
+            </Typography>
+
+            {Object.entries(groupedVariables).map(([type, variables]) => (
+                <Box key={type} sx={{ mb: 2 }}>
+                    <Typography variant="subtitle2" color="primary" gutterBottom>
+                        {type.charAt(0).toUpperCase() + type.slice(1)} Variables
+                    </Typography>
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {variables.map((variable) => (
+                            <Chip
+                                key={variable.id}
+                                label={`${variable.name}: ${variable.dataType || 'any'}`}
+                                size="small"
+                                variant="outlined"
+                                title={`Source: ${variable.sourceNodeType} (${variable.sourceNodeId})`}
+                            />
+                        ))}
+                    </Box>
+                </Box>
+            ))}
+        </Paper>
+    );
+};
+
+