@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,85 @@
+import { useDraggable } from '@dnd-kit/core';
+import { Box, Card, Typography } from '@mui/material';
+import { StencilItemType } from '../types/stencil-item';
+import LazyIcon from '../atoms/LazyIcon';
+
+export default function StencilItem({
+  id,
+  data,
+  label,
+  iconName,
+}: StencilItemType) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id,
+    data, //optional data that we can use on drop
+  });
+  const style = transform
+    ? {
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      zIndex: 1000000,
+    }
+    : undefined;
+
+  return (
+    <Card
+      variant="outlined"
+      onClick={(e) => {
+        e.stopPropagation();
+        console.log('Stencil item clicked:', id);
+      }}
+      sx={{
+        border: '1px solid #232323',
+        borderRadius: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#1F1D1DCC', // 80% opacity dark background
+        p: 1,
+        cursor: 'grab', // Added cursor style
+        transition: 'box-shadow 0.3s ease', // Added transition
+        '&:hover': {
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // Added hover effect
+        },
+      }}
+      style={style}
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+    >
+      <Box
+        style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 8, width: '40px', height: '40px' }}
+      >
+        <svg width="40" height="40" viewBox="0 0 56 48" style={{ display: 'block' }}>
+          <polygon
+            points="28,4 52,16 52,40 28,52 4,40 4,16"
+            fill="#6B04F1"
+            stroke="#6B04F1"
+            strokeWidth="2"
+          />
+        </svg>
+        <Box style={{
+          position: 'absolute',
+          width: '40px',
+          height: '50px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          pointerEvents: 'none',
+        }}>
+          <LazyIcon iconName={iconName} size={18} color="#fff" />
+        </Box>
+      </Box>
+
+      <Typography
+        sx={{
+          fontSize: 12,
+          whiteSpace: 'nowrap',
+        }}
+        style={{ fontWeight: 'bold', color: '#fff' }} // Added styles
+      >
+        {label}
+      </Typography>
+    </Card>
+  );
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useModalControls } from '../hooks/useModalControls';
+import AnimatedExpandButton from './animated-add-button';
+import { NodeDirection } from '../types/card-node';
+import { AddParallelColButton } from '../atoms/AddParallelColButton';
+import { useWorkflowNodeAction } from '../hooks/useWorkflowNodeActiont';
+import { useRenderAddNodeView } from '../contexts/DiagramProvider';
+import { useNodeId } from '../contexts/CardDataProvider'; // Import the selector
+import { Box } from '@mui/material';
+
+export interface AddWorkflowNodeAnchorProps {
+  direction: NodeDirection;
+  isReplacing?: boolean;
+  addInMiddle?: boolean;
+  variant?: 'addParallelCol' | 'anchor';
+}
+
+export const WorkflowNodeActionButtons: React.FC<AddWorkflowNodeAnchorProps> =
+  React.memo(
+    ({
+      direction,
+      isReplacing = false,
+      variant = 'anchor',
+      addInMiddle,
+    }) => {
+      const { open, onClick, setOpen } = useModalControls();
+      const renderAddNodeView = useRenderAddNodeView(); // Specific hook for renderAddNodeView
+      const nodeId = useNodeId(); // Use selector for nodeId
+      const { addNode } = useWorkflowNodeAction({
+        isReplacing,
+        variant,
+        addInMiddle,
+        direction,
+        closeModal: () => setOpen(false),
+        nodeId: nodeId || '',
+      });
+      // console.log('varient: ', variant);
+      // console.log('is replasing: ', isReplacing);
+      // console.log('add in middle: ', addInMiddle);
+      // console.log('direction: ', direction);
+      // console.log('node id: ', nodeId);
+      // console.log('render add node view: ', renderAddNodeView);
+
+      return (
+        <Box>
+          {renderAddNodeView && renderAddNodeView(addNode, open, setOpen)}
+          {variant === 'anchor' && (
+            <AnimatedExpandButton
+              onClick={onClick}
+              direction={direction}
+              isReplacing={isReplacing}
+            />
+          )}
+          {variant === 'addParallelCol' && (
+            <AddParallelColButton
+              onClick={onClick}
+            />
+          )}
+        </Box>
+      );
+    },
+  );

package/packages/diagrams/src/lib/molecules/animated-add-button.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { styled, useTheme } from '@mui/material';
+import { FaExchangeAlt, FaPlus } from 'react-icons/fa';
+import { NodeDirection } from '../types/card-node';
+
+// Styled button using HTML button
+const StyledButton = styled('button')(({ theme }) => ({
+  position: 'absolute',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%', // Make the button circular
+  width: '30px', // Fixed width
+  height: '30px', // Fixed height
+  border: `2px solid #3688A2`,
+  color: '#3688A2',
+  cursor: 'pointer',
+  '&:hover': {
+    border: `3px solid #3688A2`,
+    color: '#3688A2',
+  },
+}));
+
+interface AnimatedExpandButtonProps {
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  direction: NodeDirection;
+  isReplacing: boolean;
+}
+
+const AnimatedExpandButton: React.FC<AnimatedExpandButtonProps> = ({
+  onClick,
+  direction,
+  isReplacing,
+}) => {
+  const theme = useTheme();
+
+  // Get position style based on direction
+  const getPositionStyle = () => {
+    switch (direction) {
+      case 'bottom':
+        return {
+          bottom: '-15px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        };
+      case 'top':
+        return {
+          top: '-15px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        };
+      case 'left':
+        return {
+          left: '-15px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+        };
+      default: // right
+        return {
+          right: '-15px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+        };
+    }
+  };
+
+  return (
+    <StyledButton
+      onClick={onClick}
+      style={{
+        ...getPositionStyle(),
+      }}
+    >
+      {isReplacing ? (
+        <FaExchangeAlt size={12} />
+      ) : (
+        <FaPlus size={12} />
+      )}
+    </StyledButton>
+  );
+};
+
+export default AnimatedExpandButton;

package/packages/diagrams/src/lib/molecules/json-viewer.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Card, CardContent, IconButton, useTheme } from '@mui/material';
+import ReactJson from 'react-json-view';
+import { ICardNode } from '../types/card-node';
+import { RiCloseLine, RiUser2Line } from 'react-icons/ri';
+
+const JsonPortalButton = ({ curNode }: { curNode: ICardNode }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleButtonClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isOpen && !(event.target as Element).closest('#mouse-over-popover')) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      const portalRoot = document.createElement('div');
+      document.body.appendChild(portalRoot);
+
+      ReactDOM.render(
+        <Card
+          id="mouse-over-popover"
+          sx={{
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            width: '400px',
+            height: '100vh',
+            overflow: 'auto',
+            bgcolor: '#242424',
+            color: '#fff',
+            border: '1px solid #333',
+            // Custom scrollbar styling
+            '&::-webkit-scrollbar': {
+              width: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+              background: 'transparent',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: '#444',
+              borderRadius: '3px',
+              '&:hover': {
+                background: '#666',
+              },
+            },
+          }}
+        >
+          <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
+            <IconButton
+              aria-label="close"
+              onClick={handleClose}
+              sx={{
+                color: '#999',
+                '&:hover': {
+                  color: '#fff',
+                  bgcolor: 'rgba(255, 255, 255, 0.1)',
+                },
+              }}
+            >
+              <RiCloseLine />
+            </IconButton>
+            <ReactJson theme={'monokai'} src={curNode} collapsed={false} />
+          </CardContent>
+        </Card>,
+        portalRoot
+      );
+
+      return () => {
+        ReactDOM.unmountComponentAtNode(portalRoot);
+        document.body.removeChild(portalRoot);
+      };
+    }
+  }, [isOpen, curNode, handleClose]);
+
+  const theme = useTheme();
+
+  return (
+    <IconButton
+      aria-owns={isOpen ? 'mouse-over-popover' : undefined}
+      aria-haspopup="true"
+      onClick={handleButtonClick}
+      color={'primary'}
+    >
+      <RiUser2Line />
+    </IconButton>
+  );
+};
+
+export default JsonPortalButton;

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Box, Button, Grid, Modal, Paper, Typography } from '@mui/material';
+import {
+  RiAddBoxLine,
+  RiArrowRightLine,
+  RiGitBranchLine,
+  RiLayoutColumnLine,
+  RiNodeTree,
+  RiRepeatLine,
+  RiShuffleLine,
+  RiGlobalLine,
+} from 'react-icons/ri';
+
+export interface NodeAction {
+  label: string;
+  type: string;
+  icon: React.ReactNode;
+}
+
+const nodeActions: NodeAction[] = [
+  { label: 'Parallel', type: 'parallel', icon: <RiNodeTree /> },
+  { label: 'Branch', type: 'branch', icon: <RiGitBranchLine /> },
+  { label: 'Return', type: 'return', icon: <RiArrowRightLine /> },
+  { label: 'Loop', type: 'loop', icon: <RiRepeatLine /> },
+  { label: 'Repeat', type: 'loop', icon: <RiLayoutColumnLine /> },
+  { label: 'Switch', type: 'switch', icon: <RiShuffleLine /> },
+  { label: 'API Call', type: 'api', icon: <RiGlobalLine /> },
+  { label: 'Rest API', type: 'rest', icon: <RiAddBoxLine /> },
+];
+
+export const AddNodeView = React.memo(
+  ({
+    addNode,
+    open,
+    setOpen,
+  }: {
+    addNode: (type: string) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+  }) => {
+    return (
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            backdropFilter: 'blur(10px) saturate(180%)', // Glass effect
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+          }}
+        >
+          <Paper
+            elevation={3}
+            sx={{
+              width: 500,
+              padding: 3,
+              borderRadius: 4,
+              background: 'rgba(255, 255, 255, 0.7)',
+              boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
+              backdropFilter: 'blur(10px)',
+            }}
+          >
+            <Typography variant="h6" component="h3" gutterBottom>
+              Add a New Node
+            </Typography>
+            <Typography variant="subtitle1" component="h5" gutterBottom>
+              Select your data flow type for your new nodes
+            </Typography>
+            <Grid container spacing={2}>
+              {nodeActions.map((item) => (
+                <Grid item xs={12} key={item.label}>
+                  <Button
+                    sx={{
+                      textTransform: 'none', // Prevent capitalization
+                      justifyContent: 'flex-start', // Align text and icon left
+                    }}
+                    startIcon={item.icon}
+                    fullWidth
+                    variant="outlined"
+                    color="inherit"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      addNode(item.type);
+                    }}
+                  >
+                    {item.label}
+                  </Button>
+                </Grid>
+              ))}
+            </Grid>
+          </Paper>
+        </Box>
+      </Modal>
+    );
+  },
+);

package/packages/diagrams/src/lib/organisms/Card/EntityNode.tsx

@@ -0,0 +1,259 @@
+import { Node, useNodeId } from '@xyflow/react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ICardNodeData } from '../../types/card-node';
+import { NodeContextMenu } from '../NodeContextMenu';
+import {
+  useRegisterEvent,
+  useRegisterEventCallback,
+  useTriggerEvent,
+} from '../../utils/event-hooks';
+import { useDeleteNodeByEvent, useUpdateNode } from '../../utils/node-hooks';
+import { Box, Drawer, IconButton, Paper } from '@mui/material';
+import { useDroppable } from '@dnd-kit/core';
+import { SideHandles } from '../../molecules/SideHandles';
+import CardEditableTitle from '../../atoms/CardEditableTitle';
+import EntityNodeCoverContent from '../../atoms/CardMainContent';
+import { EntityNodeBlocks } from '../../molecules/EntityNodeBlocks';
+import AddNodeAnchorForCardNodes from '../../atoms/AddNodeAnchor';
+import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
+import { RiCodeSSlashLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { useDiagram, useSelectedNode } from '../../contexts/DiagramProvider';
+import {
+  CardDataProvider,
+  useDraggedCard,
+  useNodeIsPinned,
+  useSetAddingBlock,
+  useSetDraggedCard,
+} from '../../contexts/CardDataProvider';
+import constantLengths from '../../utils/constant-lengths';
+import { RiPushpin2Fill, RiPushpin2Line } from 'react-icons/ri';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { NodeMouseHandler } from '../../utils/event-store';
+
+// Memoized subcomponent for the JSON Drawer
+const JsonDrawer = React.memo(
+  ({
+    isOpen,
+    onClose,
+    nodeId,
+  }: {
+    isOpen: boolean;
+    onClose: () => void;
+    nodeId: string;
+  }) => {
+    const nodes = useCustomReactFlow().getNodes();
+
+    return (
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        onClose={onClose}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: '400px',
+            padding: 2,
+          },
+        }}
+      >
+        <ReactJson
+          src={nodes.find((node) => node.id === nodeId) ?? {}}
+          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: 20,
+        right: 10,
+        zIndex: 10,
+      }}
+    >
+      <RiCodeSSlashLine color="#FFFF" />
+    </IconButton>
+  );
+});
+
+// Memoized subcomponent for the Node Content
+const NodeContent = React.memo(() => {
+  console.log('NodeContent re-rendered');
+
+  const { getNodes, getEdges } = useCustomReactFlow();
+  const nodeId = useNodeId(); // Use selector for nodeId
+  const isPinned = useNodeIsPinned();
+  const { register: registerPaneClick, unregister: unregisterPaneClick } =
+    useRegisterEvent('onPaneClick');
+  const draggedCard = useDraggedCard(); // Use selector if available
+  const setDraggedCard = useSetDraggedCard(); // Use selector if available
+  const selectedNode = useSelectedNode();
+  const setIsPannable = useDiagram((state) => state.setPannable);
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const setContentHeight = useDiagram((state) => state.setContentHeight);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isJsonDrawerOpen, setIsJsonDrawerOpen] = useState(false);
+  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+
+  const dragData = useRef([]);
+  const handleOnNodeDragStart: NodeMouseHandler = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      if (node.id === nodeId) {
+        setDraggedCard(nodeId);
+        dragData.current = [
+          JSON.parse(JSON.stringify(getNodes())),
+          JSON.parse(JSON.stringify(getEdges())),
+        ] as never;
+      }
+    },
+    [nodeId, getNodes, getEdges],
+  );
+
+  const handleOnNodeDragEnd: NodeMouseHandler = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      if (node.id === nodeId) {
+        setDraggedCard(null);
+        if (dragData.current) {
+          dragData.current = [];
+        }
+      }
+    },
+    [nodeId, draggedCard],
+  );
+
+  useRegisterEventCallback('onNodeDragStart', handleOnNodeDragStart);
+  useRegisterEventCallback('onNodeDragStop', handleOnNodeDragEnd);
+
+  const handleOpenToolbar = useTriggerEvent('onOpenToolbar');
+  const handleKeyEvents = useDeleteNodeByEvent(nodeId || '');
+  const setAddingBlock = useSetAddingBlock();
+  const onUnselect = useCallback(() => {
+    setSelectedNode(null);
+    setAddingBlock(false); // Use selector if available
+    unregisterPaneClick();
+  }, [unregisterPaneClick]);
+
+  const onSelect = useCallback(() => {
+    if (!nodeId) return;
+    handleOpenToolbar();
+
+    setSelectedNode(nodeId);
+    registerPaneClick(onUnselect);
+  }, [registerPaneClick, handleOpenToolbar, setSelectedNode, setIsPannable]);
+
+  const { setNodeRef, isOver } = useDroppable({ id: `node-${nodeId}` });
+
+  const toggleJsonDrawer = useCallback(() => {
+    setIsJsonDrawerOpen((prev) => !prev);
+  }, []);
+
+  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 updateNode = useUpdateNode();
+
+  const togglePin = useCallback(() => {
+    updateNode(nodeId!, (node) => {
+      const isCurrentlyPinned = node?.data?.isPinned ?? false;
+      return {
+        data: {
+          ...node.data,
+          isPinned: !isCurrentlyPinned,
+        },
+      };
+    });
+  }, [updateNode, nodeId]);
+
+  return (
+    <>
+      <Paper
+        ref={setNodeRef}
+        variant={
+          (draggedCard === nodeId ? 'draggedDiagramCard' : 'diagramCard') as 'elevation' | 'outlined'
+        }
+        onClick={onSelect}
+        sx={{
+          border: `5px solid ${isOver ? '#0059ff' : '#3688A2'}`,
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          zIndex: selectedNode === nodeId ? 2 : 1,
+          transition: 'z-index 0.2s ease',
+          '& .react-flow__handle': {
+            zIndex: 3
+          },
+          backgroundColor: '#232323'
+        }}
+      >
+        <IconButton
+          onClick={togglePin}
+          sx={{
+            position: 'absolute',
+            top: 20,
+            right: 50,
+            zIndex: 10,
+          }}
+        >
+          {isPinned ? <RiPushpin2Fill color="#FFFF" /> : <RiPushpin2Line color="#FFFF" />}
+        </IconButton>
+        {enableJson && <JsonViewButton onClick={toggleJsonDrawer} />}
+        <SideHandles />
+        <NodeContextMenu />
+        <Box onKeyDown={handleKeyEvents} tabIndex={0} ref={contentRef}>
+          <div
+            style={{
+              borderColor: selectedNode === nodeId ? '#0059ff' : undefined,
+            }}
+          >
+            <CardEditableTitle />
+            <EntityNodeCoverContent />
+            <EntityNodeBlocks />
+            {selectedNode === nodeId && (
+              <AddNodeAnchorForCardNodes direction={'right'} />
+            )}
+          </div>
+        </Box>
+        {selectedNode === nodeId && (
+          <AddNodeAnchorForCardNodes direction={'bottom'} />
+        )}
+      </Paper>
+
+      {enableJson && (
+        <JsonDrawer
+          isOpen={isJsonDrawerOpen}
+          onClose={toggleJsonDrawer}
+          nodeId={nodeId ?? ''}
+        />
+      )}
+    </>
+  );
+});
+
+// Main EntityNode component
+const EntityNode = React.memo(({ id }: { id: string }) => {
+  return (
+    <CardDataProvider nodeId={id}>
+      <NodeContent />
+    </CardDataProvider>
+  );
+});
+
+export { EntityNode };