@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

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