@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,143 @@
+import { useBlockData } from './BlockProvider';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useUpdateNode } from '../utils/node-hooks';
+import { colorMap } from '../types/colors';
+import { IBlock, ICardNode, IBlockType } from '../types/card-node';
+import CardBlockTypeSelector from '../atoms/CardBlockTypeSelector';
+import { Box, Button, Card } from '@mui/material';
+import { useNodeColor, useNodeId } from '../contexts/CardDataProvider'; // Updated to use auto-generated selectors
+import { useDiagramType, useSelectedNode } from '../contexts/DiagramProvider'; // Updated to use auto-generated selectors
+
+export const Block = memo(() => {
+  // Using auto-generated selectors for card data
+  const nodeId = useNodeId();
+  const color = useNodeColor();
+  const diagramType = useDiagramType();
+
+  // Using auto-generated selectors for diagram store
+  const selectedNode = useSelectedNode();
+
+  const blockData = useBlockData();
+  const blockRef = useRef<HTMLInputElement>(null);
+  const updateNode = useUpdateNode();
+
+  const [inputValue, setInputValue] = useState(blockData.title); // add state for input value
+
+  const handleEdit = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(event.target.value); // update inputValue state on input change
+    },
+    [],
+  );
+
+  const saveChanges = useCallback(() => {
+    // new function to save changes
+    updateNode(nodeId || '', (node) => {
+      const blocks = (node.data?.blocks as IBlock[]) || [];
+      const newBlocks = blocks.map((b: IBlock) =>
+        b.id === blockData?.id ? { ...b, title: inputValue } : b,
+      );
+      return { ...node, data: { ...node.data, blocks: newBlocks } };
+    });
+  }, [updateNode, nodeId, blockData, inputValue]);
+
+  const handleBlockClick = useCallback(() => {
+    if (selectedNode !== nodeId) return;
+    setTimeout(() => blockRef.current?.focus(), 0);
+  }, [nodeId, selectedNode]);
+
+  const handleTypeChange: React.ChangeEventHandler<HTMLSelectElement> =
+    useCallback(
+      (event) => {
+        updateNode(nodeId || '', (node) => {
+          const blocks = (node.data?.blocks as IBlock[]) || [];
+          const newBlocks = blocks.map((b: IBlock) =>
+            b.id === blockData?.id ? { ...b, type: event.target.value as IBlockType } : b,
+          );
+          return { ...node, data: { ...node.data, blocks: newBlocks } };
+        });
+      },
+      [updateNode, nodeId, blockData],
+    );
+
+  useEffect(() => {
+    setInputValue(blockData.title);
+  }, [blockData.title]);
+
+  return (
+    <Card
+      sx={{
+        p: 2,
+        mb: '6px',
+        borderRadius: '0.3rem',
+        bgcolor: colorMap[color || 'red'] || 'rgba(245, 204, 0, 0.16)',
+        py: 1,
+        px: 2,
+        display: 'flex',
+        width: 300,
+        position: 'relative',
+      }}
+    >
+      <Box
+        component={'input'}
+        onChange={handleEdit}
+        value={inputValue} // use inputValue state instead of blockData.title
+        onClick={handleBlockClick}
+        onBlur={saveChanges} // save changes when input loses focus
+        onKeyDown={(event) => {
+          // save changes when enter key is pressed
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            saveChanges();
+          }
+        }}
+        ref={blockRef}
+        sx={{
+          width: 200,
+          textAlign: 'start',
+          border: 'none',
+          outline: 'none',
+          padding: '0.05rem 0.1rem',
+          fontSize: '0.7rem',
+          fontWeight: 600,
+          backgroundColor: 'transparent',
+        }}
+      />
+
+      {diagramType === 'erd' && (
+        <CardBlockTypeSelector
+          onChange={handleTypeChange}
+          value={blockData.type || 'STRING'}
+          id={blockData.id}
+        />
+      )}
+
+      <Button
+        variant="outlined"
+        color="error"
+        size="small"
+        sx={{
+          ml: 1,
+          fontSize: '0.7rem',
+          height: '1.5rem',
+          minWidth: '1.5rem',
+          borderRadius: '0.3rem',
+          position: `${diagramType === 'erd' ? 'relative' : 'absolute'}`,
+          top: `${diagramType === 'erd' ? '0' : '0.2rem'}`,
+          right: `${diagramType === 'erd' ? '0' : '0.2rem'}`,
+        }}
+        onClick={() => {
+          updateNode(nodeId || '', (node) => {
+            const blocks = (node.data?.blocks as IBlock[]) || [];
+            const newBlocks = blocks.filter(
+              (b: IBlock) => b.id !== blockData.id,
+            );
+            return { ...node, data: { ...node.data, blocks: newBlocks } };
+          });
+        }}
+      >
+        X
+      </Button>
+    </Card>
+  );
+});

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

@@ -0,0 +1,28 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+import { IBlock } from '../types/card-node';
+
+// Create a context with an undefined initial value
+const BlockContext = createContext<IBlock | undefined>(undefined);
+
+interface BlockProviderProps {
+  value: IBlock;
+  children: ReactNode;
+}
+
+export const BlockProvider: React.FC<BlockProviderProps> = ({
+  value,
+  children,
+}) => {
+  return (
+    <BlockContext.Provider value={value}>{children}</BlockContext.Provider>
+  );
+};
+
+// Custom hook to use the block context
+export const useBlockData = () => {
+  const context = useContext(BlockContext);
+  if (context === undefined) {
+    throw new Error('useBlockData must be used within a BlockProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,14 @@
+import { BlockProvider } from './BlockProvider';
+import { Block } from './Block';
+import React from 'react';
+import { IBlock } from '../types/card-node';
+
+function BlockWrapper(props: { data: IBlock }) {
+  return (
+    <BlockProvider value={props.data}>
+      <Block />
+    </BlockProvider>
+  );
+}
+
+export default BlockWrapper;

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

@@ -0,0 +1,132 @@
+import { Box, IconButton, MenuItem, Select } from "@mui/material";
+import { Delete } from '@mui/icons-material';
+import React, { useCallback } from "react";
+import { ContentAssist, Option } from "../atoms/ContentAssist";
+import { Rule } from "../types/condition-builder";
+
+const contentAssistStyles = {
+  mr: 1,
+  ".MuiInputBase-root": {
+    padding: '5px',
+    color: '#FFFFFF',
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: '#8E8E93'
+    }
+  }
+}
+
+const iconBtnStyles = {
+  padding: '0px',
+  'svg': {
+    width: '20px',
+    height: '20px'
+  }
+}
+
+const ruleWrapper = {
+  mb: 1,
+  mt: 1,
+  '.select': {
+    mr: 1, padding: '0px', height: '30px'
+  }
+}
+
+type Props = {
+  rule: Rule,
+  onChange: (rule: Rule) => void,
+  onDelete: () => void,
+  options: Option[],
+  initialOptions: Option[];
+  optionsType: string;
+  setOptions: (value: Option[]) => void;
+  setOptionsType: (value: string) => void;
+}
+
+const ConditionRule: React.FC<Props> = React.memo((props: Props) => {
+  const { rule, onChange, onDelete, options, initialOptions, optionsType, setOptions, setOptionsType } = props;
+  const operators = ['=', '!=', '>', '<'];
+
+  const handleContentAssistChange = useCallback((event: React.ChangeEvent<HTMLInputElement>, activeSelections: Option[], updateField: string) => {
+    if (activeSelections?.length) {
+      const { id, label, type } = activeSelections[0];
+      onChange({
+        ...rule,
+        [updateField]: {
+          id: id as number,
+          label,
+          type: type as string
+        }
+      });
+    } else {
+      // Handle plain text input when no activeSelections
+      const inputValue = event.target.value;
+      onChange({
+        ...rule,
+        [updateField]: {
+          id: 0,
+          label: inputValue,
+          type: 'literal',
+          rawValue: inputValue
+        }
+      });
+    }
+  }, [rule, onChange]);
+
+  return (
+    <Box display="flex" alignItems="center" sx={ruleWrapper}>
+      <ContentAssist
+        defaultValue={rule?.field?.id ? `{{${rule?.field?.type}.${rule?.field?.label}}}` : ''}
+        className='editTranslationField'
+        options={options || []}
+        initialOptions={initialOptions}
+        setOptions={setOptions}
+        optionsType={optionsType}
+        setOptionsType={setOptionsType}
+        onChange={(event, activeSelections) => handleContentAssistChange(event, activeSelections, 'field')}
+        sx={contentAssistStyles}
+      />
+      <Select
+        value={rule.operator}
+        onChange={e => onChange({ ...rule, operator: e.target.value })}
+        className="select nodrag nopan"
+        sx={{
+          color: '#FFFFFF',
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#8E8E93'
+          }
+        }}
+        MenuProps={{
+          PaperProps: {
+            sx: {
+              backgroundColor: '#393939',
+              color: '#FFFFFF',
+              '& .MuiMenuItem-root': {
+                backgroundColor: '#393939',
+                color: '#FFFFFF',
+                '&:hover': {
+                  backgroundColor: '#555555',
+                },
+              },
+            },
+          },
+        }}
+      >
+        {operators.map(o => <MenuItem key={o} value={o}>{o}</MenuItem>)}
+      </Select>
+      <ContentAssist
+        defaultValue={rule?.value?.id ? `{{${rule?.value?.type}.${rule?.value?.label}}}` : ''}
+        className='editTranslationField'
+        options={options || []}
+        initialOptions={initialOptions}
+        setOptions={setOptions}
+        optionsType={optionsType}
+        setOptionsType={setOptionsType}
+        onChange={(event, activeSelections) => handleContentAssistChange(event, activeSelections, 'value')}
+        sx={contentAssistStyles}
+      />
+      <IconButton sx={iconBtnStyles} onClick={onDelete}><Delete /></IconButton>
+    </Box>
+  );
+});
+
+export default ConditionRule;

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

@@ -0,0 +1,198 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Rnd, RndResizeCallback } from 'react-rnd';
+import { Box, CardContent, IconButton, Paper, Typography } from '@mui/material';
+import { RiPushpin2Fill, RiPushpin2Line } from 'react-icons/ri'; // Import icons from react-icons/ri
+
+// Hook for docking functionality
+const useDock = (initialDocked: boolean) => {
+  const [isDocked, setIsDocked] = useState<boolean>(initialDocked);
+
+  const toggleDock = () => {
+    setIsDocked(!isDocked);
+  };
+
+  return { isDocked, toggleDock };
+};
+
+// Props for the DraggablePane component
+export interface DraggablePaneProps {
+  children: ReactNode;
+  x: number;
+  y: number;
+  title: string;
+  width?: number; // Optional width prop
+  height?: number; // Optional height prop
+  anchorPoint?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; // Optional anchor point prop
+}
+
+// DraggablePane component
+const DraggablePane = ({
+  children,
+  x,
+  y,
+  title,
+  width = 250, // Default width if not provided
+  height = window.innerHeight * 0.5, // Default height if not provided
+  anchorPoint = 'top-left', // Default anchor point
+}: DraggablePaneProps) => {
+  const { isDocked, toggleDock } = useDock(true);
+  const [position, setPosition] = useState<{ x: number; y: number }>({ x, y });
+  const [size, setSize] = useState<{ width: number; height: number }>({
+    width,
+    height,
+  });
+
+  // Function to calculate position based on the anchor point and viewport size
+  const calculatePosition = () => {
+    let calculatedX = x;
+    let calculatedY = y;
+
+    switch (anchorPoint) {
+      case 'top-right':
+        calculatedX = window.innerWidth - size.width; // Adjust X for top-right
+        break;
+      case 'bottom-left':
+        calculatedY = window.innerHeight - size.height; // Adjust Y for bottom-left
+        break;
+      case 'bottom-right':
+        calculatedX = window.innerWidth - size.width; // Adjust X for bottom-right
+        calculatedY = window.innerHeight - size.height; // Adjust Y for bottom-right
+        break;
+      default: // 'top-left'
+        break;
+    }
+
+    return { x: calculatedX, y: calculatedY };
+  };
+
+  // Handle resizing stop
+  const onResizeStop: RndResizeCallback = (
+    e,
+    direction,
+    ref,
+    delta,
+    newPosition,
+  ) => {
+    setSize({ width: ref.offsetWidth, height: ref.offsetHeight });
+    setPosition(newPosition);
+  };
+
+  // Update position on viewport resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (isDocked) {
+        setPosition(calculatePosition());
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isDocked, size, anchorPoint]);
+
+  return (
+    <Rnd
+      size={{ width: size.width, height: size.height }}
+      position={isDocked ? calculatePosition() : position}
+      dragHandleClassName="zd__drag-handle"
+      disableDragging={isDocked}
+      onDragStop={(e, d) => {
+        if (!isDocked) {
+          setPosition({ x: d.x, y: d.y });
+        }
+      }}
+      onResizeStop={onResizeStop}
+      bounds="parent" // Keep the pane within the parent bounds
+      style={{ zIndex: 5 }}
+      resizeHandleClasses={{
+        top: 'zd__top-handle',
+        right: 'zd__right-handle',
+        bottom: 'zd__bottom-handle',
+        left: 'zd__left-handle',
+        bottomRight: 'zd__bottom-right-handle',
+        bottomLeft: 'zd__bottom-left-handle',
+        topRight: 'zd__top-right-handle',
+        topLeft: 'zd__top-left-handle',
+      }}
+    >
+      <Box sx={{ p: 1, height: '100%' }}>
+        <Paper
+          elevation={5}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            p: 0,
+            width: '100%',
+            height: '100%',
+            bgcolor: '#242424',
+            color: '#fff',
+            border: '1px solid #333',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              px: 2,
+              py: 1,
+              width: '100%',
+              bgcolor: '#333',
+              borderBottom: '1px solid #444',
+              cursor: 'move',
+            }}
+          >
+            <Typography
+              variant="h6"
+              component="div"
+              color="#FFFFFF"
+            >
+              {title}
+            </Typography>
+            <IconButton
+              size={'small'}
+              onClick={toggleDock}
+            >
+              {isDocked ? (
+                <RiPushpin2Fill fontSize={'small'} />
+              ) : (
+                <RiPushpin2Line fontSize={'small'} />
+              )}
+            </IconButton>
+          </Box>
+
+          <CardContent
+            sx={{
+              width: '100%',
+              height: '100%',
+              overflowY: 'auto',
+              overflowX: 'visible',
+              bgcolor: '#242424',
+              color: '#fff',
+              // Custom scrollbar styling
+              '&::-webkit-scrollbar': {
+                width: '6px',
+              },
+              '&::-webkit-scrollbar-track': {
+                background: 'transparent',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                background: '#444',
+                borderRadius: '3px',
+                '&:hover': {
+                  background: '#666',
+                },
+              },
+            }}
+          >
+            {children}
+          </CardContent>
+        </Paper>
+      </Box>
+    </Rnd>
+  );
+};
+
+export default DraggablePane;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { AddBlockBtn } from './AddingBlock';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useNodeId } from '@xyflow/react';
+import BlockWrapper from './BlockWrapper';
+import { useNodeData } from '../contexts/CardDataProvider';
+import { IBlock, ICardNodeData } from '../types/card-node';
+
+interface EntityNodeBlocksProps {
+}
+
+export const EntityNodeBlocks: React.FC<EntityNodeBlocksProps> = React.memo(
+  () => {
+    const data = useNodeData();
+
+    if (!data.isBlock) {
+      return null;
+    }
+
+    return (
+      <div
+        onClick={(e) => e.stopPropagation()}
+        onMouseDownCapture={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <SortableContext
+          items={data.blocks || []}
+          strategy={verticalListSortingStrategy}
+        >
+          {(data.blocks || []).map((block) => (
+            <SortableItem key={block.id} data={block} cardData={data} />
+          ))}
+        </SortableContext>
+        <AddBlockBtn />
+      </div>
+    );
+  },
+);
+
+function SortableItem(props: { data: IBlock; cardData: ICardNodeData }) {
+  const id = useNodeId();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: props.data.id,
+    data: { nodeId: id, blockData: props.data, cardData: props.cardData },
+  });
+  const style = {
+    opacity: isDragging ? 0 : 1,
+    cursor: 'pointer',
+  };
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <BlockWrapper data={props.data} />
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+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;
+}
+
+export const SideHandles: React.FC<SideHandlesProps> = React.memo(
+  ({ className }) => {
+    const sideHandles = useNodeSideHandles();
+    const nodeId = useNodeId();
+    const selectedNode = useSelectedNode();
+
+    if (sideHandles) {
+      return (
+        <div>
+          <Handle
+            type="source"
+            position={Position.Left}
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <Box
+        display={selectedNode ? undefined : 'none'}
+      >
+        <Handle
+          type="source"
+          id={`${nodeId}-bottom`}
+          position={Position.Bottom}
+        />
+        <Handle
+          type="target"
+          id={`${nodeId}-top`}
+          position={Position.Top}
+        />
+      </Box>
+    );
+  },
+);