@flowuent-org/diagramming-core 1.0.8 → 1.1.0

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

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

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

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

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

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

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