@flowuent-org/diagramming-core 1.0.8 → 1.1.0

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

@@ -1,45 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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

@@ -1,286 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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;