@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,124 +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>
-        </>
-    );
-};
-
+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/AddParallelColButton.tsx

@@ -1,26 +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>
-);
+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

@@ -1,71 +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;
+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

@@ -1,35 +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;
+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

@@ -1,76 +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 '@flowuent-labs/diagrams';
-
-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;
+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 '@flowuent-labs/diagrams';
+
+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;