@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,391 +0,0 @@
-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, getNodeWidth } 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 + (constantLengths.SUB_NODE_WIDTH + constantLengths.CONNECTION_LENGTH) * index, y: position.y },
-          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}-right`,
-          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 +
-                  getNodeWidth(currentNode) +
-                  constantLengths.CONNECTION_LENGTH,
-                y: currentNode.position.y,
-              };
-
-      const { nodes, edges } = generateNodesAndEdges(
-        structures[nodeVariant] || structures['workflow'],
-        isReplacement,
-        newPosition,
-        nodeVariant,
-        isParallelRoot,
-        currentNode,
-      );
-
-      // Automation nodes වලට automatic edge connections වැළැක්වීම
-      const isAutomationNodeType = (nodeType: string | undefined) => {
-        return nodeType && nodeType.startsWith('Automation');
-      };
-      const isCurrentNodeAutomation = currentNode ? isAutomationNodeType(currentNode.type) : false;
-      const isNewNodeAutomation = nodes.length > 0 ? isAutomationNodeType(nodes[0].type) : false;
-      
-      if (!isReplacement && !isParallelRoot && currentNode && !isCurrentNodeAutomation && !isNewNodeAutomation) {
-        edges.push(
-          createEdgeConnection({
-            sourceId: currentNode.id,
-            targetId: nodes[0].id,
-            sourceHandle: `${currentNode.id}-right`,
-          })!,
-        );
-      }
-      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/i18n.ts

@@ -1,42 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
-// Import translation resources
-import translationEN from '../../locales/en/translation.json';
-
-// Initialize i18next for the diagrams library
-export const initDiagramsI18n = (customResources?: any) => {
-  // Only initialize if not already initialized
-  if (!i18n.isInitialized) {
-    i18n.use(initReactI18next).init({
-      resources: customResources || {
-        en: {
-          translation: translationEN,
-        },
-      },
-      fallbackLng: 'en',
-      debug: false,
-      interpolation: {
-        escapeValue: false,
-      },
-      // Add namespace for the library to avoid conflicts
-      defaultNS: 'translation',
-    });
-  } else if (customResources) {
-    // If already initialized, add resources to existing instance
-    Object.keys(customResources).forEach((lng) => {
-      Object.keys(customResources[lng]).forEach((ns) => {
-        i18n.addResourceBundle(lng, ns, customResources[lng][ns], true, true);
-      });
-    });
-  }
-
-  return i18n;
-};
-
-// Export translation resources for manual initialization
-export { translationEN };
-
-// Export configured i18n instance
-export default i18n;
-

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

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

@@ -1,57 +0,0 @@
-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>
-    );
-};
-
-