@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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

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

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

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

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