@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/organisms/WorkflowNode.tsx

@@ -0,0 +1,484 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  Card,
+  Drawer,
+  Divider,
+  Typography,
+  useTheme,
+  IconButton,
+  Button,
+  Collapse,
+} from '@mui/material';
+import {
+  useConditionBuilderStates,
+  useDiagram,
+  useDiagramEdges,
+  useDiagramNodes,
+  useSetEdges,
+  useSetNodes,
+  useWorkflowNodeContent,
+} from '../contexts/DiagramProvider';
+import constantLengths from '../utils/constant-lengths';
+import { getNextNodes } from '../utils/utilities';
+import { SideHandles } from '../molecules/SideHandles';
+import {
+  CardDataProvider,
+  useNodeData,
+  useNodeId,
+  useNodeTitle,
+  useNodeType,
+  useSetNodeData,
+} from '../contexts/CardDataProvider';
+import NodeTypeDisplay from './WorkFlowNode/NodeTypeDisplay';
+import NodeActionButtons from './WorkFlowNode/NodeActionButtons';
+import { WorkflowNodeActionButtons } from '../molecules/WorkflowNodeActionButtons';
+import useIsSelectedNode from '../hooks/useIsSelectedNode';
+import useNodeDragHandlers from '../hooks/useNodeDragHandlers';
+import { useRegisterEventCallback } from '../utils/event-hooks';
+import { useDeleteNodeByEvent, useDeleteNode } from '../utils/node-hooks';
+import { useAddSwitchCase } from '../hooks/useAddSwitchCase';
+import useNodeSelection from '../hooks/useNodeSelection';
+import ReactJson from 'react-json-view';
+import ConditionRuleGroup from './ConditionRuleGroup';
+import { Option } from '../atoms/ContentAssist';
+import { RuleGroup } from '../types/condition-builder';
+import { ICardNodeData, NodeVariant } from '../types/card-node';
+import { produce } from 'immer';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { RiCodeSSlashLine } from 'react-icons/ri';
+import { MdDelete, MdExpandMore, MdExpandLess } from 'react-icons/md';
+import { AiOutlineRobot } from 'react-icons/ai';
+import { useResizeObserver } from '../hooks/useResizeObserver';
+import { NodeMouseHandler } from '../utils/event-store';
+import { ApiNodeForm } from '../types/workflow-node-data-types';
+
+const JsonDrawer = React.memo(
+  ({
+    isOpen,
+    onClose,
+    nodeId,
+  }: {
+    isOpen: boolean;
+    onClose: () => void;
+    nodeId: string;
+  }) => {
+    const nodes = useCustomReactFlow().getNodes();
+    const node = nodes.find((node) => node.id === nodeId) ?? {};
+    return (
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        onClose={onClose}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: '400px',
+            padding: 2,
+          },
+        }}
+      >
+        <ReactJson
+          src={node}
+          theme="monokai"
+          displayDataTypes={false}
+          collapsed={2}
+        />
+      </Drawer>
+    );
+  },
+);
+
+// Memoized subcomponent for the JSON View Icon Button
+const JsonViewButton = React.memo(({ onClick }: { onClick: () => void }) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      sx={{
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        zIndex: 10,
+        color: '#FFFFFF',
+      }}
+    >
+      <RiCodeSSlashLine />
+    </IconButton>
+  );
+});
+
+// Memoized subcomponent for the Delete Button
+const DeleteButton = React.memo(({ onClick }: { onClick: () => void }) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      sx={{
+        position: 'absolute',
+        top: 8,
+        right: 40,
+        zIndex: 10,
+        color: '#FF6B6B',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 107, 107, 0.1)',
+        },
+      }}
+    >
+      <MdDelete />
+    </IconButton>
+  );
+});
+
+const WorkflowNodeContent = React.memo(() => {
+  // console.log('WorkflowNodeContent re-rendered');
+
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const setNodes = useSetNodes();
+  const setEdges = useSetEdges();
+
+  const nodeId = useNodeId();
+  const data = useNodeData();
+  const type = useNodeType() as NodeVariant | undefined;
+  const title = useNodeTitle();
+  const setNodeData = useSetNodeData();
+  const isSelected = useIsSelectedNode();
+  const { handleOnNodeDragStart, handleOnNodeDragEnd } = useNodeDragHandlers();
+  const { states, envVar } = useConditionBuilderStates();
+  const [isJsonDrawerOpen, setIsJsonDrawerOpen] = useState(false);
+  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+  const [isMoreExpanded, setIsMoreExpanded] = useState(false);
+
+  // Register event callbacks with proper types
+  useRegisterEventCallback('onNodeDragStart', handleOnNodeDragStart as NodeMouseHandler);
+  useRegisterEventCallback('onNodeDragStop', handleOnNodeDragEnd as NodeMouseHandler);
+  const handleKeyEvents = useDeleteNodeByEvent(nodeId || '');
+  const deleteNode = useDeleteNode(nodeId || '');
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const childNodes = useMemo(
+    () => nodes.filter((n) => n.parentId === nodeId),
+    [nodes, nodeId],
+  );
+  const lengthOfChildren = childNodes.length;
+
+  // Check if child nodes should be visible based on form data
+  const childNodesExpanded = data.formData?.childNodesExpanded ?? true;
+  const childNodesVisible = childNodesExpanded;
+
+  const setContentHeight = useDiagram((state) => state.setContentHeight);
+
+  // Trigger layout recalculation when childNodesExpanded changes
+  useEffect(() => {
+    if (type === 'forLoop' && data.formData?.childNodesExpanded !== undefined) {
+      // Force a layout recalculation by updating the node data
+      // This will trigger the elkLayout to recalculate positions
+      const timeoutId = setTimeout(() => {
+        setNodeData(
+          produce(data, (draft: ICardNodeData) => {
+            // This triggers a re-render and layout recalculation
+          }),
+        );
+
+        // Also recalculate content height after a delay to ensure layout is updated
+        const heightTimeoutId = setTimeout(() => {
+          if (contentRef.current) {
+            const newHeight = contentRef.current.scrollHeight;
+            setContentHeight(nodeId || '', newHeight + 15);
+          }
+        }, 200);
+
+        return () => clearTimeout(heightTimeoutId);
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [data.formData?.childNodesExpanded, type, data, setNodeData, setContentHeight, nodeId]);
+
+  const addButtonVisible =
+    (type === 'loop' ||
+      type === 'try' ||
+      type === 'forLoop' ||
+      (type === 'catch' && lengthOfChildren === 0) ||
+      type === 'parallel') && childNodesVisible;
+
+  // Node types that have child nodes expansion functionality
+  const hasChildNodesExpansion =
+    type === 'loop' ||
+    type === 'try' ||
+    type === 'forLoop' ||
+    type === 'catch' ||
+    type === 'parallel';
+
+  const theme = useTheme();
+
+  const workflowNodeContent = useWorkflowNodeContent();
+
+  const [options, setOptions] = useState<Option[]>();
+  const [optionsType, setOptionsType] = useState('default');
+  const [conditions, setConditions] = useState<RuleGroup>(
+    data.conditions || { combinator: 'and', rules: [] },
+  );
+
+  useEffect(() => {
+    setNodeData(
+      produce(data, (draft: ICardNodeData) => {
+        draft.conditions = draft.conditions || { combinator: 'and', rules: [] };
+        draft.conditions = conditions;
+      }),
+    );
+  }, [conditions]);
+
+  const updateOptions = useCallback(
+    (type: string) => {
+      const defaultOptions = [
+        { id: 0, label: 'store', value: '' },
+        { id: 1, label: 'env', value: '' },
+      ];
+      const envVars = envVar?.map((variable) => ({
+        ...variable,
+        value: variable.label,
+      }));
+      switch (type) {
+        case 'store':
+          if (JSON.stringify(options) === JSON.stringify(defaultOptions)) {
+            setOptions(states);
+          }
+          break;
+        case 'env':
+          if (JSON.stringify(options) === JSON.stringify(defaultOptions)) {
+            setOptions(envVars);
+          }
+          break;
+        case 'default':
+          if (JSON.stringify(options) !== JSON.stringify(defaultOptions)) {
+            setOptions(defaultOptions);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [options, setOptions],
+  );
+
+  useEffect(() => {
+    if (optionsType?.length) {
+      updateOptions(optionsType);
+    }
+  }, [optionsType, updateOptions]);
+
+  const handleResize = React.useCallback(
+    ({ height }: { height: number }) => {
+      if (nodeId) {
+        const safeHeight = height || constantLengths.SUB_NODE_HEIGHT;
+        setContentHeight(nodeId, safeHeight + 15);
+      }
+    },
+    [nodeId, setContentHeight]
+  );
+
+  useResizeObserver(contentRef, handleResize);
+
+  const addNewCase = useAddSwitchCase();
+  const addNewCaseNode = () => {
+    const switchNode = nodes.find((node) => node.id === nodeId);
+
+    if (!switchNode) {
+      console.error('Switch node not found');
+      return;
+    }
+
+    const { nodes: newNodes, edges: newEdges } = addNewCase(switchNode);
+
+    const uniqueNodes = nodes.filter(
+      (node) => !newNodes.some((newNode) => newNode.id === node.id),
+    );
+    const updatedNodes = [...uniqueNodes, ...newNodes];
+
+    const uniqueEdges = edges.filter(
+      (edge) => !newEdges.some((newEdge) => newEdge.id === edge.id),
+    );
+    const updatedEdges = [...uniqueEdges, ...newEdges];
+
+    setNodes(updatedNodes);
+    setEdges(updatedEdges);
+  };
+  const { onSelect } = useNodeSelection();
+  const nextNodes = getNextNodes(nodeId || '', nodes, edges);
+  const toggleJsonDrawer = useCallback(() => {
+    setIsJsonDrawerOpen((prev) => !prev);
+  }, []);
+
+  const toggleMoreExpansion = useCallback(() => {
+    setIsMoreExpanded((prev) => !prev);
+  }, []);
+
+  const handleDeleteClick = useCallback(() => {
+    deleteNode();
+  }, [deleteNode]);
+
+  const handleGenerateWithAI = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if ((type as string) === 'api' && data.formData) {
+      console.log('API node - Generate with AI clicked');
+      // TODO: Implement AI integration for code generation
+    } else {
+      console.log('Generate with AI clicked');
+    }
+  }, [type, data.formData]);
+
+
+  return (
+    <>
+      <Card
+        elevation={5}
+        onClick={onSelect}
+        onKeyDown={handleKeyEvents}
+        tabIndex={0}
+        sx={{
+          width: '100%',
+          height: '100%',
+          p: 2,
+          background: '#181C25',
+          border: `${isSelected ? '3px' : '2px'} solid #3688A2`,
+          position: 'relative',
+          overflow: 'visible',
+          borderRadius: '5px',
+        }}
+      >
+        <Box ref={contentRef}>
+          {enableJson && <JsonViewButton onClick={toggleJsonDrawer} />}
+          <DeleteButton onClick={handleDeleteClick} />
+          <SideHandles />
+          {/* <ReactJson src={data}/>*/}
+          <Box >
+            <Typography sx={{ fontSize: '20px', fontWeight: '700', color: '#FFFFFF' }}>
+              {data.title}
+            </Typography>
+            <NodeTypeDisplay />
+          </Box>
+          <ConditionRuleGroup
+            wrapperProps={{}}
+            options={options || []}
+            initialOptions={[...envVar, ...states]}
+            setOptions={setOptions}
+            optionsType={optionsType}
+            setOptionsType={setOptionsType}
+            value={conditions}
+            onChange={setConditions}
+          />
+          <Divider />
+
+          {/* Buttons row after divider */}
+          <Box
+            display="flex"
+            justifyContent={hasChildNodesExpansion ? "flex-end" : "space-between"}
+            alignItems="center"
+            sx={{ mt: 1, mb: 1 }}
+          >
+            {/* Only show More button for non-nesting nodes */}
+            {!hasChildNodesExpansion && (
+              <Button
+                variant="text"
+                endIcon={isMoreExpanded ? <MdExpandLess /> : <MdExpandMore />}
+                onClick={toggleMoreExpansion}
+                sx={{
+                  color: '#FFFFFF',
+                  fontSize: '12px',
+                  padding: '4px 12px',
+                  minWidth: 'auto',
+                  '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  },
+                }}
+              >
+                More
+              </Button>
+            )}
+
+            <Button
+              variant="outlined"
+              startIcon={<AiOutlineRobot />}
+              onClick={handleGenerateWithAI}
+              sx={{
+                backgroundColor: 'transparent',
+                borderColor: '#4A90E2',
+                color: '#4A90E2',
+                fontSize: '12px',
+                padding: '4px 12px',
+                minWidth: 'auto',
+                '&:hover': {
+                  backgroundColor: 'transparent',
+                  borderColor: '#357ABD',
+                  color: '#357ABD',
+                },
+              }}
+            >
+              Generate with AI
+            </Button>
+          </Box>
+
+          {/* Form content - always visible for nesting nodes, collapsible for others */}
+          {hasChildNodesExpansion ? (
+            // For nesting nodes, always show the form content (includes child nodes expansion)
+            <Box sx={{ mt: 1, mb: 1 }}>
+              {type &&
+                !['emptyNode', 'parallel'].includes(type as string) &&
+                workflowNodeContent &&
+                nodeId &&
+                workflowNodeContent({ ...data, nodeId, type, title }, setNodeData)}
+            </Box>
+          ) : (
+            // For non-nesting nodes, show form content in collapsible section
+            <Collapse in={isMoreExpanded}>
+              <Box sx={{ mt: 1, mb: 1 }}>
+                {type &&
+                  !['emptyNode', 'parallel'].includes(type as string) &&
+                  workflowNodeContent &&
+                  nodeId &&
+                  workflowNodeContent({ ...data, nodeId, type, title }, setNodeData)}
+              </Box>
+            </Collapse>
+          )}
+
+          {data.isRoot && (
+            <WorkflowNodeActionButtons
+              direction={'top'}
+              variant={'anchor'}
+            />
+          )}
+
+          <NodeActionButtons
+            addButtonVisible={addButtonVisible}
+            addNewCaseNode={addNewCaseNode}
+            nextNodes={nextNodes}
+          />
+        </Box>
+      </Card>
+      {enableJson && (
+        <JsonDrawer
+          isOpen={isJsonDrawerOpen}
+          onClose={toggleJsonDrawer}
+          nodeId={nodeId ?? ''}
+        />
+      )}
+    </>
+  );
+});
+
+// Main EntityNode component
+const WorkflowNode = React.memo(({ id }: { id: string }) => {
+  return (
+    <CardDataProvider nodeId={id}>
+      <WorkflowNodeContent />
+    </CardDataProvider>
+  );
+});
+
+export default WorkflowNode;