@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/assets/markers/markers.param.tsx

@@ -0,0 +1,101 @@
+import { Position } from '@xyflow/react';
+import { Markers } from './markers.type';
+
+export const orientMap: {
+  [key: string]: { refY: number; refX: number; idPathMap: any };
+} = {
+  [Position.Top]: {
+    refY: 0,
+    refX: 50,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 50 100 L 50 0 M 50 50 L 25 100 M 50 50 L 75 100 M 25 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M50 0 L50 100 M25 25 L75 25 M25 75 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M50 100 L50 0 M50 50 L25 100 M50 50 L75 100 M25 25 L75 25" />
+      ),
+      [Markers.One]: <path d="M 50 100 L 50 0 M 25 25 L 75 25" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L50 100 M50 50 L25 100 M50 50 L75 100 M50 50 a25 25 0 1 1 1 0 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L50 0 M25 25 L75 25 M50 50 a25 25 0 1 1 -1 0 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 50 0 M 50 50 a 25 25 0 1 1 -1 0 Z" />,
+    },
+  },
+  [Position.Bottom]: {
+    refY: 100,
+    refX: 50,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 50 0 L 50 100 M 50 50 L 25 0 M 50 50 L 75 0 M 25 75" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M50 0 L50 100 M25 25 L75 25 M25 75 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M50 0 L50 100 M50 50 L25 0 M50 50 L75 0 M25 75 L75 75" />
+      ),
+      [Markers.One]: <path d="M 50 0 L 50 100 M 25 75 L 75 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L50 0 M50 50 L25 0 M50 50 L75 0 M50 50 a25 25 0 1 1 -1 0 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L50 100 M25 75 L75 75 M50 50 a25 25 0 1 1 1 0 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 50 100 M 50 50 a 25 25 0 1 1 1 0 Z" />,
+    },
+  },
+  [Position.Left]: {
+    refY: 50,
+    refX: 0,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 100 50 L 0 50 M 50 50 L 100 25 M 50 50 L 100 75 M 25 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M0 50 L100 50 M25 25 L 25 75 M75 25 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M100 50 L0 50 M50 50 L 100 25 M50 50 L100 75 M25 25 L25 75" />
+      ),
+      [Markers.One]: <path d="M 0 50 L 100 50 M 75 25 L 75 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L100 50 M50 50 L 100 25 M50 50 L100 75 M50 50 a25 25 0 1 1 0 -1 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L100 50 M75 25 L 75 75 M50 50 a25 25 0 1 1 0 -1 Z" />
+      ),
+      [Markers.Zero]: (
+        <path d="M 50 50 L 100 50 M 50 50 a 25 25 0 1 1 0 -1 Z" />
+      ),
+    },
+  },
+  [Position.Right]: {
+    refY: 50,
+    refX: 100,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 0 50 L 100 50 M 50 50 L 0 25 M 50 50 L 0 75 M 75 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M0 50 L100 50 M25 25 L 25 75 M75 25 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M0 50 L100 50 M50 50 L 0 25 M50 50 L0 75 M75 25 L75 75" />
+      ),
+      [Markers.One]: <path d="M 100 50 L 0 50 M 25 25 L 25 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L0 50 M50 50 L 0 25 M50 50 L0 75 M50 50 a25 25 0 1 1 0 1 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L0 50 M25 25 L 25 75 M50 50 a25 25 0 1 1 0 1 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 0 50 M 50 50 a 25 25 0 1 1 0 1 Z" />,
+    },
+  },
+};

package/packages/diagrams/src/lib/assets/markers/markers.type.ts

@@ -0,0 +1,10 @@
+export enum Markers {
+  One = 'one',
+  Zero = 'zero',
+  Many = 'many',
+  OneAndOneOnly = 'one and one only',
+  OneOrMany = 'one or many',
+  ZeroOrOne = 'zero or one',
+  ZeroOrMany = 'zero or many',
+
+}

package/packages/diagrams/src/lib/atoms/ActorNode.tsx

@@ -0,0 +1,124 @@
+import React, { memo } from 'react';
+import { Handle, NodeProps, Position, NodeResizeControl } from '@xyflow/react';
+import { ActorNodeData } from '../types/shared-node-types';
+import { Box, Typography } from '@mui/material';
+import ResizeIcon from '../components/ResizeIcon';
+
+const controlStyle = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'nw-resize',
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+const ActorNode: React.FC<NodeProps> = (props) => {
+    const { data, selected } = props as NodeProps & { data: ActorNodeData };
+    const color = data.color || '#61dafb';
+    const isBusiness = data.style === 'business';
+    const labelLength = data.label.length;
+
+    // Flexible dimensions calculation
+    const getFlexibleDimensions = () => {
+        // 1. INFINITE RESIZE: Truly infinite limits
+        if (data.infiniteResize === true) {
+            return {
+                minWidth: 20,
+                minHeight: 30,
+                maxWidth: 50000, // Effectively infinite
+                maxHeight: 50000 // Effectively infinite
+            };
+        }
+
+        // 2. CUSTOM RESTRICTIONS: User-defined limits
+        if (data.customRestrictions) {
+            const baseMinWidth = Math.max(labelLength * 10 + 32, data.customRestrictions.minWidth || 40);
+            return {
+                minWidth: baseMinWidth,
+                minHeight: data.customRestrictions.minHeight || 60,
+                maxWidth: data.customRestrictions.maxWidth || 50000, // Default to infinite if not specified
+                maxHeight: data.customRestrictions.maxHeight || 50000, // Default to infinite if not specified
+            };
+        }
+
+        // 3. DEFAULT RESTRICTIONS: Much more generous standard actor sizing
+        const baseMinWidth = Math.max(labelLength * 10 + 32, 40);
+        return {
+            minWidth: baseMinWidth,
+            minHeight: 60,
+            maxWidth: 25000, // Much larger default limits
+            maxHeight: 25000, // Much larger default limits
+        };
+    };
+
+    const { minWidth, minHeight, maxWidth, maxHeight } = getFlexibleDimensions();
+    const calculatedWidth = Math.max(data.width || minWidth, minWidth);
+    const calculatedHeight = Math.max(data.height || minHeight, minHeight);
+
+    return (
+        <>
+            {/* Conditional NodeResizeControl */}
+            {data.resizable !== false && (
+                <NodeResizeControl
+                    style={controlStyle}
+                    minWidth={minWidth}
+                    minHeight={minHeight}
+                    maxWidth={maxWidth}
+                    maxHeight={maxHeight}
+                >
+                    <ResizeIcon
+                        size={18}
+                        color={color}
+                        hoverColor={color === '#61dafb' ? '#4fc3f7' : `${color}dd`}
+                    />
+                </NodeResizeControl>
+            )}
+
+            <Box sx={{
+                textAlign: 'center',
+                width: calculatedWidth,
+                height: calculatedHeight,
+                padding: 0,
+                margin: 0,
+                position: 'relative',
+                border: '2px solid #61dafb',
+                backgroundColor: '#4d4d4d',
+                borderRadius: 1
+            }}>
+                {/* Stickman or Business Actor SVG */}
+                <svg width={calculatedWidth} height={calculatedHeight} viewBox="0 0 40 60">
+                    <circle cx="20" cy="10" r="8" stroke={color} strokeWidth="2" fill="#4d4d4d" />
+                    {isBusiness && (
+                        <>
+                            <line x1="16" y1="6" x2="24" y2="14" stroke={color} strokeWidth="2" />
+                            <line x1="24" y1="6" x2="16" y2="14" stroke={color} strokeWidth="2" />
+                        </>
+                    )}
+                    <line x1="20" y1="18" x2="20" y2="38" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="24" x2="8" y2="32" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="24" x2="32" y2="32" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="38" x2="8" y2="52" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="38" x2="32" y2="52" stroke={color} strokeWidth="2" />
+                </svg>
+                <Typography variant="body2" sx={{ fontWeight: selected ? 'bold' : 'normal', whiteSpace: 'nowrap', color: '#ffffff' }}>
+                    {data.label}
+                </Typography>
+                <Handle
+                    id="right"
+                    type="source"
+                    position={Position.Right}
+                />
+                <Handle
+                    id="left"
+                    type="target"
+                    position={Position.Left}
+                />
+            </Box>
+        </>
+    );
+};
+
+export default memo(ActorNode); 

package/packages/diagrams/src/lib/atoms/AddNodeAnchor.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback } from 'react';
+import Button from '@mui/material/Button';
+import { useNodeId } from '../contexts/CardDataProvider';
+import { getNewNodeEdge } from '../utils/add-new-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { alpha } from '@mui/material/styles';
+import { useDiagram } from '../contexts/DiagramProvider';
+
+export type Direction = 'bottom' | 'right';
+
+export interface AddNodeAnchorProps {
+  direction: Direction;
+}
+
+const AddNodeAnchor: React.FC<AddNodeAnchorProps> = React.memo(
+  ({ direction }) => {
+    const nodeId = useNodeId();
+    // Use the useDiagram hook to access actions
+    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+    const setPannable = useDiagram((state) => state.setPannable);
+
+    const { getNodes, setNodes, setEdges } = useCustomReactFlow();
+
+    const closeToolbar = useCallback(() => {
+      setSelectedNode(null);
+      setPannable(true);
+    }, [setSelectedNode, setPannable]);
+
+    const addNode = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>, direction: Direction) => {
+        e.stopPropagation();
+        const nodes = getNodes();
+        const curNode = nodes.find(({ id }) => nodeId === id);
+        if (!curNode) return;
+
+        const offset =
+          direction === 'bottom' ? curNode.height! + 50 : curNode.width! + 50;
+        const positionKey = direction === 'bottom' ? 'offsetY' : 'offsetX';
+        const { edge, node } = getNewNodeEdge({
+          pos: direction,
+          curr: curNode,
+        });
+
+        setNodes((prevNodes) => [...prevNodes, node]);
+        if (direction === 'bottom' || curNode.parentId) {
+          setEdges((prevEdges) => [...prevEdges, edge]);
+        }
+        closeToolbar();
+      },
+      [setNodes, setEdges, closeToolbar],
+    );
+
+    const onClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        addNode(e, direction);
+      },
+      [direction],
+    );
+
+    return (
+      <Button
+        onClick={onClick}
+        sx={{
+          position: 'absolute',
+          width: '8px',
+          height: '8px',
+          minWidth: '8px',
+          minHeight: '8px',
+          padding: '7px 6px 6px 6px',
+          borderRadius: '50%',
+          border: 'none',
+          backgroundColor: '#0050ff',
+          fontSize: '13px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: '#fff',
+          '&:hover': {
+            backgroundColor: alpha('#0050ff', 0.8),
+          },
+          ...(direction === 'bottom'
+            ? {
+              bottom: '-6px',
+              left: '75%',
+            }
+            : {
+              top: '15%',
+              right: '-6px',
+            }),
+        }}
+      >
+        +
+      </Button>
+    );
+  },
+);
+export default AddNodeAnchor;

package/packages/diagrams/src/lib/atoms/AddParallelColButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import constantLengths from '../utils/constant-lengths';
+
+interface AddParallelColButtonProps {
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const AddParallelColButton: React.FC<AddParallelColButtonProps> = ({
+  onClick,
+}) => (
+  <Box sx={{}}>
+    <Button
+      variant={'contained'}
+      color={'primary'}
+      onClick={onClick}
+      size={'small'}
+      style={{
+        width: constantLengths.ADD_NODE_WIDTH,
+        fontSize: 12,
+      }}
+    >
+      Add Node
+    </Button>
+  </Box>
+);

package/packages/diagrams/src/lib/atoms/BendpointNode.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useCallback } from 'react';
+import { Edge, Handle, NodeProps, Position } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+
+const BendpointNode = React.memo(({ selected, id }: NodeProps) => {
+  const rf = useCustomReactFlow();
+  useEffect(() => {
+    function deleteThisNode(e: KeyboardEvent) {
+      if (e.key !== 'Delete' || !selected) return;
+      const thisNode = rf.getNode(id);
+      const sourceEdge = rf.getEdges().find((edge) => edge.source === id);
+      const targetEdge = rf.getEdges().find((edge) => edge.target === id);
+
+      if (!thisNode || !sourceEdge || !targetEdge) return;
+      const newEdge: Edge = {
+        ...sourceEdge,
+        id: uuidv4(),
+        source: sourceEdge.source,
+        target: targetEdge.target,
+        type: 'customEdge',
+        data: sourceEdge.data,
+      };
+
+      rf.setEdges(
+        rf
+          .getEdges()
+          .filter(
+            (edge) => edge.id !== sourceEdge.id && edge.id !== targetEdge.id,
+          )
+          .concat(newEdge),
+      );
+      rf.setNodes(rf.getNodes().filter((node) => node.id !== thisNode.id));
+    }
+
+    window.addEventListener('keydown', deleteThisNode);
+    return () => window.removeEventListener('keydown', deleteThisNode);
+  }, [selected, id, rf]);
+
+  return (
+    <>
+      <Handle
+        isConnectableEnd={false}
+        isConnectableStart={false}
+        isConnectable={false}
+        type="target"
+        position={Position.Left}
+        style={{ opacity: 0 }}
+      />
+      <div
+        style={{
+          height: 7.5,
+          width: 7.5,
+          borderRadius: '50%',
+          backgroundColor: selected ? 'black' : 'gray',
+          cursor: 'pointer',
+        }}
+      />
+      <Handle
+        isConnectableEnd={false}
+        isConnectableStart={false}
+        isConnectable={false}
+        type="source"
+        position={Position.Right}
+        style={{ opacity: 0 }}
+      />
+    </>
+  );
+});
+
+export default BendpointNode;

package/packages/diagrams/src/lib/atoms/CardBlockTypeSelector.tsx

@@ -0,0 +1,35 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { CardBlockTypesProps } from '../organisms/Card/card.types';
+import { fieldTypes } from '../organisms/Card/card.params';
+
+const CardBlockTypeSelector = React.memo(
+  ({ onChange, value, id }: CardBlockTypesProps) => {
+    return (
+      <Box
+        component={'select'}
+        sx={{
+          width: 80,
+          textAlign: 'start',
+          border: 'none',
+          outline: 'none',
+          padding: '0.05rem 0.1rem',
+          fontSize: '0.7rem',
+          backgroundColor: 'transparent',
+          color: '#555555',
+          cursor: 'pointer',
+          fontStyle: 'italic',
+        }}
+        onChange={onChange}
+        value={value}
+      >
+        {fieldTypes.map((btk) => (
+          <option value={btk} key={id + '-' + btk}>
+            {btk.toLowerCase()}
+          </option>
+        ))}
+      </Box>
+    );
+  },
+);
+export default CardBlockTypeSelector;

package/packages/diagrams/src/lib/atoms/CardEditableTitle.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, TextField } from '@mui/material';
+import { ICardNode } from '../types/card-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { useNodeId, useNodeTitle } from '../contexts/CardDataProvider';
+
+export const CardEditableTitle = React.memo(() => {
+  const title = useNodeTitle()
+  const nodeId = useNodeId()
+  const { getNodes, setNodes } = useCustomReactFlow();
+  const [text, setText] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (title !== text) setText(title);
+  }, [title]);
+
+  const changeTitle = useCallback(
+    (val: string) => {
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, title: val },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    },
+    [getNodes, setNodes, nodeId],
+  );
+
+  const handleSave = useCallback(() => {
+    changeTitle(text ?? '');
+  }, [text, changeTitle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSave();
+      } else if (e.key === 'Escape') {
+        setText(title);
+      }
+    },
+    [handleSave, title],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        my: 1,
+        backgroundColor: '#6B04F1',
+        borderRadius: '3px',
+      }}
+    >
+      <TextField
+        size={'small'}
+        inputProps={{
+          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
+        }}
+        variant="outlined"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        inputRef={inputRef}
+        fullWidth
+      />
+    </Box>
+  );
+});
+
+export default CardEditableTitle;

package/packages/diagrams/src/lib/atoms/CardMainContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useNodeImg, useNodeIsBlock } from '../contexts/CardDataProvider';
+import StyledBox from './StyledBox';
+
+const CardMainContent = React.memo(() => {
+  const isBlock = useNodeIsBlock();
+  const img = useNodeImg();
+
+  if (isBlock) {
+    return null;
+  }
+
+  return img ? (
+    <StyledBox variant={'cardCoverImage'} component="img" src={img} alt="" />
+  ) : (
+    <StyledBox variant={'cardCoverImagePreview'} />
+  );
+});
+export default CardMainContent;