@flowuent-org/diagramming-core 1.4.0 → 1.4.2

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

@@ -0,0 +1,215 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Box } from '@mui/material';
+import { useNodeId, useNodeSideHandles } from '../contexts/CardDataProvider';
+import { useSelectedNode } from '../contexts/DiagramProvider';
+
+// Define the props type for the component
+interface SideHandlesProps {
+  className?: string;
+  /** Show all handles regardless of selection state */
+  alwaysShow?: boolean;
+  /** Which positions to show handles on */
+  positions?: ('top' | 'bottom' | 'left' | 'right')[];
+}
+
+// Connection point handle styles
+const handleBaseStyle: React.CSSProperties = {
+  width: '14px',
+  height: '14px',
+  borderRadius: '50%',
+  border: '3px solid #10B981',
+  backgroundColor: '#1a1a2e',
+  transition: 'all 0.2s ease-in-out',
+  cursor: 'crosshair',
+  zIndex: 10,
+};
+
+// Hidden handle style for the duplicate (allows bidirectional but only shows one visual handle)
+const hiddenHandleStyle: React.CSSProperties = {
+  ...handleBaseStyle,
+  opacity: 0,
+  pointerEvents: 'all',
+};
+
+const handleHoverStyle = `
+  .connection-handle:hover {
+    transform: scale(1.3);
+    background-color: #10B981 !important;
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+  }
+  .connection-handle:active {
+    transform: scale(1.1);
+    background-color: #059669 !important;
+  }
+`;
+
+export const SideHandles: React.FC<SideHandlesProps> = React.memo(
+  ({ className, alwaysShow = false, positions = ['top', 'bottom', 'left', 'right'] }) => {
+    const sideHandles = useNodeSideHandles();
+    const nodeId = useNodeId();
+    const selectedNode = useSelectedNode();
+    
+    const isSelected = selectedNode === nodeId;
+    const shouldShow = alwaysShow || isSelected;
+
+    // Inject hover styles
+    React.useEffect(() => {
+      const styleId = 'connection-handle-styles';
+      if (!document.getElementById(styleId)) {
+        const styleSheet = document.createElement('style');
+        styleSheet.id = styleId;
+        styleSheet.textContent = handleHoverStyle;
+        document.head.appendChild(styleSheet);
+      }
+    }, []);
+
+    if (sideHandles) {
+      return (
+        <div>
+          {/* Left - Bidirectional */}
+          <Handle
+            type="source"
+            id={`${nodeId}-left-source`}
+            position={Position.Left}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-left-target`}
+            position={Position.Left}
+            style={hiddenHandleStyle}
+          />
+          {/* Right - Bidirectional */}
+          <Handle
+            type="source"
+            id={`${nodeId}-right-source`}
+            position={Position.Right}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-right-target`}
+            position={Position.Right}
+            style={hiddenHandleStyle}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <Box
+        sx={{
+          opacity: shouldShow ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          pointerEvents: shouldShow ? 'auto' : 'none',
+          '& .react-flow__handle': {
+            visibility: shouldShow ? 'visible' : 'hidden',
+          }
+        }}
+      >
+        {/* Top Handle - Bidirectional (source + target) */}
+        {positions.includes('top') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-top-source`}
+              position={Position.Top}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                top: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-top-target`}
+              position={Position.Top}
+              style={{
+                ...hiddenHandleStyle,
+                top: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Bottom Handle - Bidirectional (source + target) */}
+        {positions.includes('bottom') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-bottom-source`}
+              position={Position.Bottom}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                bottom: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-bottom-target`}
+              position={Position.Bottom}
+              style={{
+                ...hiddenHandleStyle,
+                bottom: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Left Handle - Bidirectional (source + target) */}
+        {positions.includes('left') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-left-source`}
+              position={Position.Left}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                left: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-left-target`}
+              position={Position.Left}
+              style={{
+                ...hiddenHandleStyle,
+                left: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Right Handle - Bidirectional (source + target) */}
+        {positions.includes('right') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-right-source`}
+              position={Position.Right}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                right: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-right-target`}
+              position={Position.Right}
+              style={{
+                ...hiddenHandleStyle,
+                right: '-8px',
+              }}
+            />
+          </>
+        )}
+      </Box>
+    );
+  },
+);

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>
+    );
+  },
+);