@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/stateMachine/nodes/PinPointNode.tsx

@@ -1,112 +1,112 @@
-import { memo } from "react"
-import { Handle, Position, type NodeProps, NodeResizeControl } from "@xyflow/react"
-import { Box, Typography } from "@mui/material"
-import ResizeIcon from "../../../components/ResizeIcon";
-
-export interface PinPointNodeData {
-    type?: 'point' | 'pin';
-    label?: string;
-    color?: string;
-    onResize?: (id: string, width: number, height: number) => void;
-    width?: number;
-    height?: number;
-    [key: string]: unknown;
-}
-
-const controlStyle = {
-    background: 'transparent',
-    border: 'none',
-};
-
-const PinPointNode: React.FC<NodeProps> = ({ data, selected }) => {
-    const pinData = data as PinPointNodeData;
-    const { type, label, color = '#61dafb' } = pinData;
-    const isPoint = type === 'point';
-
-    // Calculate dimensions
-    const minWidth = isPoint ? 20 : Math.max((label?.length || 0) * 8 + 32, 60);
-    const minHeight = isPoint ? 20 : 40;
-    const currentWidth = pinData.width || minWidth;
-    const currentHeight = pinData.height || minHeight;
-
-    return (
-        <>
-            {!isPoint && (
-                <NodeResizeControl
-                    style={controlStyle}
-                    minWidth={minWidth}
-                    minHeight={minHeight}
-                    maxWidth={25000}
-                    maxHeight={25000}
-                >
-                    <ResizeIcon />
-                </NodeResizeControl>
-            )}
-
-            <Box
-                sx={{
-                    width: currentWidth,
-                    height: currentHeight,
-                    minWidth,
-                    minHeight,
-                    bgcolor: isPoint ? color : '#2d2d2d',
-                    border: isPoint ? 'none' : `2px solid ${color}`,
-                    borderRadius: isPoint ? '50%' : 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    cursor: 'grab',
-                    transition: 'all 0.2s ease',
-                    boxShadow: selected
-                        ? `0 0 0 2px ${color}`
-                        : `0 2px 4px rgba(0,0,0,0.3)`,
-                    '&:hover': {
-                        transform: 'scale(1.05)',
-                        boxShadow: `0 4px 8px rgba(0,0,0,0.4)`,
-                    },
-                    '&:active': {
-                        cursor: 'grabbing',
-                    },
-                }}
-            >
-                {!isPoint && label && (
-                    <Typography
-                        variant="body2"
-                        sx={{
-                            color: '#fff',
-                            fontWeight: 'bold',
-                            fontSize: Math.max(currentWidth / 10, 10),
-                            textAlign: 'center',
-                            wordBreak: 'break-word',
-                        }}
-                    >
-                        {label}
-                    </Typography>
-                )}
-
-                <Handle
-                    type="source"
-                    position={Position.Right}
-                    style={{
-                        background: color,
-                        width: '8px',
-                        height: '8px',
-                        right: '-4px'
-                    }}
-                />
-                <Handle
-                    type="target"
-                    position={Position.Left}
-                    style={{
-                        background: color,
-                        width: '8px',
-                        height: '8px',
-                        left: '-4px'
-                    }}
-                />
-            </Box>
-        </>
-    );
-};
-
+import { memo } from "react"
+import { Handle, Position, type NodeProps, NodeResizeControl } from "@xyflow/react"
+import { Box, Typography } from "@mui/material"
+import ResizeIcon from "../../../components/ResizeIcon";
+
+export interface PinPointNodeData {
+    type?: 'point' | 'pin';
+    label?: string;
+    color?: string;
+    onResize?: (id: string, width: number, height: number) => void;
+    width?: number;
+    height?: number;
+    [key: string]: unknown;
+}
+
+const controlStyle = {
+    background: 'transparent',
+    border: 'none',
+};
+
+const PinPointNode: React.FC<NodeProps> = ({ data, selected }) => {
+    const pinData = data as PinPointNodeData;
+    const { type, label, color = '#61dafb' } = pinData;
+    const isPoint = type === 'point';
+
+    // Calculate dimensions
+    const minWidth = isPoint ? 20 : Math.max((label?.length || 0) * 8 + 32, 60);
+    const minHeight = isPoint ? 20 : 40;
+    const currentWidth = pinData.width || minWidth;
+    const currentHeight = pinData.height || minHeight;
+
+    return (
+        <>
+            {!isPoint && (
+                <NodeResizeControl
+                    style={controlStyle}
+                    minWidth={minWidth}
+                    minHeight={minHeight}
+                    maxWidth={25000}
+                    maxHeight={25000}
+                >
+                    <ResizeIcon />
+                </NodeResizeControl>
+            )}
+
+            <Box
+                sx={{
+                    width: currentWidth,
+                    height: currentHeight,
+                    minWidth,
+                    minHeight,
+                    bgcolor: isPoint ? color : '#2d2d2d',
+                    border: isPoint ? 'none' : `2px solid ${color}`,
+                    borderRadius: isPoint ? '50%' : 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'grab',
+                    transition: 'all 0.2s ease',
+                    boxShadow: selected
+                        ? `0 0 0 2px ${color}`
+                        : `0 2px 4px rgba(0,0,0,0.3)`,
+                    '&:hover': {
+                        transform: 'scale(1.05)',
+                        boxShadow: `0 4px 8px rgba(0,0,0,0.4)`,
+                    },
+                    '&:active': {
+                        cursor: 'grabbing',
+                    },
+                }}
+            >
+                {!isPoint && label && (
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            color: '#fff',
+                            fontWeight: 'bold',
+                            fontSize: Math.max(currentWidth / 10, 10),
+                            textAlign: 'center',
+                            wordBreak: 'break-word',
+                        }}
+                    >
+                        {label}
+                    </Typography>
+                )}
+
+                <Handle
+                    type="source"
+                    position={Position.Right}
+                    style={{
+                        background: color,
+                        width: '8px',
+                        height: '8px',
+                        right: '-4px'
+                    }}
+                />
+                <Handle
+                    type="target"
+                    position={Position.Left}
+                    style={{
+                        background: color,
+                        width: '8px',
+                        height: '8px',
+                        left: '-4px'
+                    }}
+                />
+            </Box>
+        </>
+    );
+};
+
 export default memo(PinPointNode); 

package/packages/diagrams/src/lib/templates/stateMachine/nodes/StateNode.tsx

@@ -1,124 +1,124 @@
-import { memo, useRef, useMemo, useEffect } from "react"
-import { Handle, Position } from "@xyflow/react"
-import { Paper, Typography, Box, Divider } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-import { StateMachineNodeProps, StateNodeData } from "../../../types/state-machine-types";
-
-const StateNode = ({ id, data, isConnectable }: StateMachineNodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  const stateData = data as StateNodeData;
-
-  // Ensure activities is always an array for rendering
-  const activities = Array.isArray(stateData.activities)
-    ? stateData.activities
-    : typeof stateData.activities === 'string' && stateData.activities.trim() !== ''
-      ? [stateData.activities]
-      : [];
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      const actualWidth = nodeRef.current?.scrollWidth || width;
-      const actualHeight = nodeRef.current?.scrollHeight || height;
-      data.onResize(id, actualWidth, actualHeight);
-    }
-  });
-
-
-
-  return (
-    <Paper
-      ref={nodeRef}
-      elevation={2}
-      sx={{
-        minWidth: 'min-content',
-        width: 'max-content',
-        borderRadius: 4,
-        border: "1px solid #ccc",
-        padding: 2,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        position: 'relative',
-        overflow: 'visible',
-        boxSizing: 'border-box',
-      }}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={{
-          left: '-6px',
-          backgroundColor: '#555',
-          border: '2px solid #fff',
-          width: '12px',
-          height: '12px'
-        }}
-      />
-      <Box sx={{
-        textAlign: "center",
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        width: 'max-content',
-        minWidth: 'min-content'
-      }}>
-        <Typography
-          variant="subtitle1"
-          fontWeight="bold"
-          sx={{
-            whiteSpace: 'nowrap',
-            overflow: 'visible',
-            width: 'max-content'
-          }}
-        >
-          {(stateData.label as string) || 'State'}
-        </Typography>
-
-        {activities.length > 0 && (
-          <>
-            <Divider sx={{ my: 1 }} />
-            <Box sx={{
-              mt: 1,
-              width: 'max-content',
-              minWidth: 'min-content'
-            }}>
-              {activities.map((activity: string, index: number) => (
-                <Typography
-                  key={index}
-                  variant="body2"
-                  sx={{
-                    fontStyle: "italic",
-                    whiteSpace: 'nowrap',
-                    overflow: 'visible',
-                    width: 'max-content',
-                    mb: 0.5,
-                    lineHeight: 1.4,
-                  }}
-                >
-                  {activity}
-                </Typography>
-              ))}
-            </Box>
-          </>
-        )}
-      </Box>
-
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        style={{
-          right: '-6px',
-          backgroundColor: '#555',
-          border: '2px solid #fff',
-          width: '12px',
-          height: '12px'
-        }}
-      />
-    </Paper>
-  )
-}
-
-export default memo(StateNode)
+import { memo, useRef, useMemo, useEffect } from "react"
+import { Handle, Position } from "@xyflow/react"
+import { Paper, Typography, Box, Divider } from "@mui/material"
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { StateMachineNodeProps, StateNodeData } from "../../../types/state-machine-types";
+
+const StateNode = ({ id, data, isConnectable }: StateMachineNodeProps) => {
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const stateData = data as StateNodeData;
+
+  // Ensure activities is always an array for rendering
+  const activities = Array.isArray(stateData.activities)
+    ? stateData.activities
+    : typeof stateData.activities === 'string' && stateData.activities.trim() !== ''
+      ? [stateData.activities]
+      : [];
+
+  useResizeObserver(nodeRef, ({ width, height }) => {
+    if (typeof data.onResize === 'function') {
+      const actualWidth = nodeRef.current?.scrollWidth || width;
+      const actualHeight = nodeRef.current?.scrollHeight || height;
+      data.onResize(id, actualWidth, actualHeight);
+    }
+  });
+
+
+
+  return (
+    <Paper
+      ref={nodeRef}
+      elevation={2}
+      sx={{
+        minWidth: 'min-content',
+        width: 'max-content',
+        borderRadius: 4,
+        border: "1px solid #ccc",
+        padding: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'visible',
+        boxSizing: 'border-box',
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        style={{
+          left: '-6px',
+          backgroundColor: '#555',
+          border: '2px solid #fff',
+          width: '12px',
+          height: '12px'
+        }}
+      />
+      <Box sx={{
+        textAlign: "center",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: 'max-content',
+        minWidth: 'min-content'
+      }}>
+        <Typography
+          variant="subtitle1"
+          fontWeight="bold"
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'visible',
+            width: 'max-content'
+          }}
+        >
+          {(stateData.label as string) || 'State'}
+        </Typography>
+
+        {activities.length > 0 && (
+          <>
+            <Divider sx={{ my: 1 }} />
+            <Box sx={{
+              mt: 1,
+              width: 'max-content',
+              minWidth: 'min-content'
+            }}>
+              {activities.map((activity: string, index: number) => (
+                <Typography
+                  key={index}
+                  variant="body2"
+                  sx={{
+                    fontStyle: "italic",
+                    whiteSpace: 'nowrap',
+                    overflow: 'visible',
+                    width: 'max-content',
+                    mb: 0.5,
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {activity}
+                </Typography>
+              ))}
+            </Box>
+          </>
+        )}
+      </Box>
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        style={{
+          right: '-6px',
+          backgroundColor: '#555',
+          border: '2px solid #fff',
+          width: '12px',
+          height: '12px'
+        }}
+      />
+    </Paper>
+  )
+}
+
+export default memo(StateNode)

package/packages/diagrams/src/lib/templates/stateMachine/nodes/bendPoint.tsx

@@ -1,71 +1,71 @@
-import React, { useEffect } from 'react';
-import { Edge, Handle, NodeProps, Position, useReactFlow } from '@xyflow/react';
-import { v4 as uuidv4 } from 'uuid';
-import { Box } from '@mui/material';
-
-const BendpointNode = React.memo(({ selected, id }: NodeProps) => {
-    const rf = useReactFlow();
-    useEffect(() => {
-        const 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 }}
-            />
-            <Box
-                sx={{
-                    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 } from 'react';
+import { Edge, Handle, NodeProps, Position, useReactFlow } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import { Box } from '@mui/material';
+
+const BendpointNode = React.memo(({ selected, id }: NodeProps) => {
+    const rf = useReactFlow();
+    useEffect(() => {
+        const 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 }}
+            />
+            <Box
+                sx={{
+                    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;