@flowuent-org/diagramming-core 1.4.0 → 1.4.2

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

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

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