@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useCustomReactFlow } from './customUseReactFlow';
+import { ICardNode } from '../types/card-node';
+
+export function useNodesUpdate() {
+  const { setNodes } = useCustomReactFlow();
+  const updatesQueue = useRef<((nodes: ICardNode[]) => ICardNode[])[]>([]);
+  const isUpdateScheduled = useRef(false);
+
+  const scheduleUpdate = useCallback(() => {
+    if (!isUpdateScheduled.current) {
+      isUpdateScheduled.current = true;
+      requestAnimationFrame(() => {
+        setNodes((nodes) => {
+          let updatedNodes = nodes;
+          while (updatesQueue.current.length > 0) {
+            const update = updatesQueue.current.shift();
+            if (update) {
+              updatedNodes = update(updatedNodes);
+            }
+          }
+          return updatedNodes;
+        });
+        isUpdateScheduled.current = false;
+      });
+    }
+  }, [setNodes]);
+
+  const updateNodes = useCallback(
+    (updater: (nodes: ICardNode[]) => ICardNode[]) => {
+      updatesQueue.current.push(updater);
+      scheduleUpdate();
+    },
+    [scheduleUpdate],
+  );
+
+  useEffect(() => {
+    return () => {
+      updatesQueue.current = [];
+      isUpdateScheduled.current = false;
+    };
+  }, []);
+
+  return updateNodes;
+}

package/packages/diagrams/src/lib/hooks/useAddChildButton.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useCallback } from 'react';
+import { IconButton } from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
+
+interface UseAddChildButtonProps {
+    isTreeStructure: boolean;
+    nodeType: 'root' | 'child';
+    nodeColor: string;
+    onAddChild: () => void;
+}
+
+interface UseAddChildButtonReturn {
+    isHovered: boolean;
+    setIsHovered: (hovered: boolean) => void;
+    AddChildButton: React.ReactNode;
+}
+
+export const useAddChildButton = ({
+    isTreeStructure,
+    nodeType,
+    nodeColor,
+    onAddChild
+}: UseAddChildButtonProps): UseAddChildButtonReturn => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleAddChild = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        onAddChild();
+    }, [onAddChild]);
+
+    const AddChildButton = isTreeStructure && isHovered ? (
+        <IconButton
+            onClick={handleAddChild}
+            size="small"
+            sx={{
+                position: 'absolute',
+                bottom: '-12px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                backgroundColor: 'white',
+                border: `2px solid ${nodeColor || '#2196F3'}`,
+                color: nodeColor || '#2196F3',
+                width: 24,
+                height: 24,
+                '&:hover': {
+                    backgroundColor: nodeColor || '#2196F3',
+                    color: 'white',
+                },
+                zIndex: 10,
+            }}
+        >
+            <AddIcon sx={{ fontSize: 16 }} />
+        </IconButton>
+    ) : null;
+
+    return {
+        isHovered,
+        setIsHovered,
+        AddChildButton
+    };
+};

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

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { Edge } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import {
+  useCreateEdgeConnection,
+  useCreateNewNode,
+} from './useWorkflowNodeActiont';
+import { produce } from 'immer';
+
+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}-bottom`,
+        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/hooks/useAutoRegisterFunctions.ts

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react';
+import {
+  useDiagram,
+  useAddFunction,
+  useEditFunction,
+  useDeleteFunction,
+} from '../contexts/DiagramProvider';
+import { ICardNode } from '../types/card-node';
+import {
+  FunctionSignature,
+  FunctionParameter,
+} from '../types/FunctionSignature';
+import { NodeForm } from '../types/workflow-node-data-types';
+
+// Define the function data structure for caching
+interface FunctionDataCache {
+  name: string;
+  args: FunctionParameter[];
+  code: string;
+}
+
+/**
+  Hook that automatically registers function nodes as available functions
+ */
+export const useAutoRegisterFunctions = () => {
+  const nodes = useDiagram((state) => state.nodes);
+  const addFunction = useAddFunction();
+  const editFunction = useEditFunction();
+  const deleteFunction = useDeleteFunction();
+  const registeredFunctionIds = useRef<Set<string>>(new Set());
+  const functionDataCache = useRef<Map<string, FunctionDataCache>>(new Map());
+
+  useEffect(() => {
+    // Find function nodes that haven't been registered yet or have been updated
+    const functionNodes = nodes.filter((node: ICardNode) => {
+      // Check if this is a function node by looking at formData.type
+      return node.data?.formData?.type === 'function';
+    });
+
+    // Get current function IDs to detect deletions
+    const currentFunctionIds = new Set(functionNodes.map((node) => node.id));
+
+    // Find functions that were deleted
+    const deletedFunctionIds = Array.from(registeredFunctionIds.current).filter(
+      (id) => !currentFunctionIds.has(id),
+    );
+
+    // Remove deleted functions from availableFunctions
+    deletedFunctionIds.forEach((id) => {
+      deleteFunction(id);
+      registeredFunctionIds.current.delete(id);
+      functionDataCache.current.delete(id);
+    });
+
+    functionNodes.forEach((node: ICardNode) => {
+      const functionData = node.data?.formData;
+
+      if (functionData && functionData.type === 'function') {
+        // Type guard to ensure we have the right properties
+        if ('name' in functionData && 'parameters' in functionData) {
+          // Convert parameters to the correct format
+          const convertParameters = (
+            params: (string | FunctionParameter)[],
+          ): FunctionParameter[] => {
+            return params.map((param, index) => {
+              if (typeof param === 'string') {
+                // If parameter is just a string, create a FunctionParameter with default type
+                return { name: param, type: 'any' };
+              } else if (
+                typeof param === 'object' &&
+                'name' in param &&
+                'type' in param
+              ) {
+                // If parameter already has the correct structure
+                return param as FunctionParameter;
+              } else {
+                // Fallback for unknown parameter format
+                return { name: `param${index}`, type: 'any' };
+              }
+            });
+          };
+
+          const currentFunctionData: FunctionDataCache = {
+            name: (functionData.name as string) || `Function ${node.id}`,
+            args: convertParameters(
+              Array.isArray(functionData.parameters)
+                ? functionData.parameters
+                : [],
+            ),
+            code:
+              'customCode' in functionData
+                ? (functionData.customCode as string) ||
+                  '// Function body will go here'
+                : '// Function body will go here',
+          };
+
+          // Check if this is a new function or an updated one
+          const isNewFunction = !registeredFunctionIds.current.has(node.id);
+          const hasDataChanged =
+            JSON.stringify(currentFunctionData) !==
+            JSON.stringify(functionDataCache.current.get(node.id));
+
+          if (isNewFunction) {
+            // Register new function
+            const functionSignature: FunctionSignature = {
+              id: node.id,
+              ...currentFunctionData,
+            };
+
+            addFunction(functionSignature);
+            registeredFunctionIds.current.add(node.id);
+            functionDataCache.current.set(node.id, currentFunctionData);
+          } else if (hasDataChanged) {
+            // Update existing function
+            const functionSignature: FunctionSignature = {
+              id: node.id,
+              ...currentFunctionData,
+            };
+
+            editFunction(functionSignature);
+            functionDataCache.current.set(node.id, currentFunctionData);
+          }
+        }
+      }
+    });
+  }, [nodes, addFunction, editFunction, deleteFunction]);
+
+  // Clean up when component unmounts
+  useEffect(() => {
+    return () => {
+      registeredFunctionIds.current.clear();
+      functionDataCache.current.clear();
+    };
+  }, []);
+};

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

@@ -0,0 +1,286 @@
+import { useEffect, useRef } from 'react';
+import {
+  useDiagram,
+  useAddVariable,
+  useEditVariable,
+  useDeleteVariable,
+} from '../contexts/DiagramProvider';
+import { ICardNode } from '../types/card-node';
+import { AvailableVariable } from '../types/available-variables';
+import { FunctionParameter } from '../types/FunctionSignature';
+
+// Define the binding type for let nodes
+type LetBinding = [string, unknown] | { name: string; value: unknown };
+
+/**
+ * Hook that automatically registers variables from different node types
+ * as available variables for use in other nodes
+ */
+export const useAutoRegisterVariables = () => {
+  const nodes = useDiagram((state) => state.nodes);
+  const addVariable = useAddVariable();
+  const editVariable = useEditVariable();
+  const deleteVariable = useDeleteVariable();
+  const registeredVariableIds = useRef<Set<string>>(new Set());
+  const variableDataCache = useRef<Map<string, AvailableVariable>>(new Map());
+
+  useEffect(() => {
+    if (!nodes || nodes.length === 0) {
+      return;
+    }
+
+    // Find nodes that create variables
+    const variableCreatingNodes = nodes.filter((node: ICardNode) => {
+      const nodeType = node.data?.formData?.type || node.data?.type;
+      return (
+        nodeType &&
+        [
+          'function',
+          'let',
+          'set',
+          'forLoop',
+          'return',
+          'call',
+          'try',
+          'catch',
+          'switch',
+        ].includes(nodeType)
+      );
+    });
+
+    // Get current variable IDs to detect deletions
+    const currentVariableIds = new Set(
+      variableCreatingNodes.map((node) => node.id),
+    );
+
+    // Find variables that were deleted
+    const deletedVariableIds = Array.from(registeredVariableIds.current).filter(
+      (id) => !currentVariableIds.has(id),
+    );
+
+    // Remove deleted variables from availableVariables
+    deletedVariableIds.forEach((id) => {
+      deleteVariable(id);
+      registeredVariableIds.current.delete(id);
+      variableDataCache.current.delete(id);
+    });
+
+    variableCreatingNodes.forEach((node: ICardNode) => {
+      const nodeType = node.data?.formData?.type || node.data?.type;
+      const formData = node.data?.formData;
+
+      if (formData) {
+        let variables: AvailableVariable[] = [];
+
+        // Use if-else statements to handle different node types
+        if (nodeType === 'function') {
+          // Function parameters become available variables
+          if ('parameters' in formData && Array.isArray(formData.parameters)) {
+            variables = formData.parameters.map(
+              (param: string | FunctionParameter, index: number) => {
+                const paramName =
+                  typeof param === 'string' ? param : param.name;
+                const paramType =
+                  typeof param === 'string' ? 'any' : param.type || 'any';
+                return {
+                  id: `${node.id}-param-${index}`,
+                  name: paramName,
+                  type: 'parameter',
+                  sourceNodeId: node.id,
+                  sourceNodeType: 'function',
+                  dataType: paramType,
+                };
+              },
+            );
+          }
+        } else if (nodeType === 'let') {
+          // Let bindings become available variables
+          if ('bindings' in formData && Array.isArray(formData.bindings)) {
+            variables = formData.bindings.map(
+              (binding: LetBinding, index: number) => {
+                const bindingName = Array.isArray(binding)
+                  ? binding[0]
+                  : binding.name;
+                return {
+                  id: `${node.id}-binding-${index}`,
+                  name: bindingName,
+                  type: 'binding',
+                  sourceNodeId: node.id,
+                  sourceNodeType: 'let',
+                  dataType: 'any',
+                };
+              },
+            );
+          }
+        } else if (nodeType === 'set') {
+          // Set variable becomes available
+          if ('variable' in formData) {
+            variables = [
+              {
+                id: `${node.id}-set`,
+                name: formData.variable as string,
+                type: 'set',
+                sourceNodeId: node.id,
+                sourceNodeType: 'set',
+                dataType: formData.valueDataType || 'any',
+              },
+            ];
+          }
+        } else if (nodeType === 'forLoop') {
+          // For loop variables become available
+          if ('init' in formData && formData.init) {
+            // Handle both string and Expression types
+            if (typeof formData.init === 'string') {
+              // Extract variable name from initialization (e.g., "let i = 0" -> "i")
+              const initMatch = formData.init.match(/let\s+(\w+)/);
+              if (initMatch) {
+                variables = [
+                  {
+                    id: `${node.id}-loop`,
+                    name: initMatch[1],
+                    type: 'loop',
+                    sourceNodeId: node.id,
+                    sourceNodeType: 'forLoop',
+                    dataType: formData.initDataType || 'number',
+                  },
+                ];
+              }
+            } else if (
+              typeof formData.init === 'object' &&
+              'operation' in formData.init
+            ) {
+              // If it's an operation, we can't extract variable names, so skip
+              // This is a limitation when using operations instead of string expressions
+            }
+          }
+        } else if (nodeType === 'return') {
+          // Return value becomes available as a variable
+          if ('value' in formData && formData.value) {
+            // Extract variable name from return expression if it's a simple variable reference
+            let returnVarName = 'returnValue';
+            if (typeof formData.value === 'string' && formData.value.trim()) {
+              // If it's a simple variable name, use it directly
+              const trimmedValue = formData.value.trim();
+              if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmedValue)) {
+                returnVarName = trimmedValue;
+              }
+            }
+
+            variables = [
+              {
+                id: `${node.id}-return`,
+                name: returnVarName,
+                type: 'return',
+                sourceNodeId: node.id,
+                sourceNodeType: 'return',
+                dataType:
+                  'dataType' in formData && formData.dataType
+                    ? (formData.dataType as string)
+                    : 'any',
+              },
+            ];
+          }
+        } else if (nodeType === 'call') {
+          // Function call return value becomes available as a variable
+          if ('returnValueName' in formData && formData.returnValueName) {
+            variables = [
+              {
+                id: `${node.id}-call`,
+                name: formData.returnValueName as string,
+                type: 'call',
+                sourceNodeId: node.id,
+                sourceNodeType: 'call',
+                dataType:
+                  'returnValueDataType' in formData &&
+                  formData.returnValueDataType
+                    ? (formData.returnValueDataType as string)
+                    : 'any',
+              },
+            ];
+          }
+        } else if (nodeType === 'try') {
+          // Try block variables become available
+          if ('try' in formData && formData.try) {
+            // Extract variable names from try expression if possible
+            let tryVarName = 'tryResult';
+            if (typeof formData.try === 'string' && formData.try.trim()) {
+              const trimmedValue = formData.try.trim();
+              if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmedValue)) {
+                tryVarName = trimmedValue;
+              }
+            }
+
+            variables = [
+              {
+                id: `${node.id}-try`,
+                name: tryVarName,
+                type: 'try',
+                sourceNodeId: node.id,
+                sourceNodeType: 'try',
+                dataType: 'any',
+              },
+            ];
+          }
+        } else if (nodeType === 'catch') {
+          // Catch block variables become available
+          if ('catch' in formData && formData.catch) {
+            // Extract variable names from catch expression if possible
+            let catchVarName = 'catchResult';
+            if (typeof formData.catch === 'string' && formData.catch.trim()) {
+              const trimmedValue = formData.catch.trim();
+              if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmedValue)) {
+                catchVarName = trimmedValue;
+              }
+            }
+
+            variables = [
+              {
+                id: `${node.id}-catch`,
+                name: catchVarName,
+                type: 'catch',
+                sourceNodeId: node.id,
+                sourceNodeType: 'catch',
+                dataType: 'any',
+              },
+            ];
+          }
+        } else if (nodeType === 'switch') {
+          // Switch statement result becomes available as a variable
+          if ('switchValue' in formData && formData.switchValue) {
+            variables = [
+              {
+                id: `${node.id}-switch`,
+                name: 'switchResult',
+                type: 'switch',
+                sourceNodeId: node.id,
+                sourceNodeType: 'switch',
+                dataType: 'any',
+              },
+            ];
+          }
+        }
+
+        // Process each variable
+        variables.forEach((variable) => {
+          const isNewVariable = !registeredVariableIds.current.has(variable.id);
+          const hasDataChanged =
+            JSON.stringify(variable) !==
+            JSON.stringify(variableDataCache.current.get(variable.id));
+
+          if (isNewVariable) {
+            // Register new variable
+            addVariable(variable);
+            registeredVariableIds.current.add(variable.id);
+            variableDataCache.current.set(variable.id, variable);
+          } else if (hasDataChanged) {
+            // Update existing variable
+            editVariable(variable.id, variable);
+            variableDataCache.current.set(variable.id, variable);
+          }
+        });
+      }
+    });
+  }, [nodes, addVariable, editVariable, deleteVariable]);
+};
+
+

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

@@ -0,0 +1,64 @@
+import { useCallback } from 'react';
+import { useDiagram } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from './customUseReactFlow';
+
+/**
+ * A hook to handle node deletion when the Delete key is pressed.
+ * @param nodeId - The ID of the node to delete.
+ * @returns A callback function to handle keydown events.
+ */
+const useDeleteNodeByEvent = (nodeId: string) => {
+  const { getNodes, setNodes, setEdges } = useCustomReactFlow();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+
+  const handleKeyEvents = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Delete' && nodeId) {
+        // Get all nodes to find parent-child relationships
+        const allNodes = getNodes();
+        const nodesToDelete = new Set<string>();
+
+        // Recursively find all child nodes that should be deleted along with their parents
+        const findChildNodes = (parentId: string) => {
+          const children = allNodes.filter(
+            (node) => node.parentId === parentId,
+          );
+          children.forEach((child) => {
+            if (!nodesToDelete.has(child.id)) {
+              nodesToDelete.add(child.id);
+              findChildNodes(child.id); // Recursively find grandchildren
+            }
+          });
+        };
+
+        // Add the main node to delete
+        nodesToDelete.add(nodeId);
+
+        // Find children for the node to delete
+        findChildNodes(nodeId);
+
+        // Delete all nodes at once - this will trigger onNodesChange properly
+        setNodes((currentNodes) =>
+          currentNodes.filter((node) => !nodesToDelete.has(node.id)),
+        );
+
+        // Delete associated edges
+        setEdges((prevEdges) =>
+          prevEdges.filter(
+            (edge) =>
+              !nodesToDelete.has(edge.source) &&
+              !nodesToDelete.has(edge.target),
+          ),
+        );
+
+        // Clear the selected node
+        setSelectedNode(null);
+      }
+    },
+    [nodeId, getNodes, setNodes, setEdges, setSelectedNode],
+  );
+
+  return handleKeyEvents;
+};
+
+export default useDeleteNodeByEvent;