@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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