@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/stateMachine/components/StateMachineLayout.ts

@@ -0,0 +1,350 @@
+import { useCallback, useState, useRef } from 'react';
+import { Node } from '@xyflow/react';
+import { StateMachineEdge } from '../../../types/state-machine-types';
+import ELK from 'elkjs/lib/elk.bundled.js';
+
+const elk = new ELK();
+
+// Constants for default node sizes (only used if no width/height is available)
+const DEFAULT_NODE_SIZES = {
+  InitialStateNode: { width: 20, height: 20 },
+  FinalStateNode: { width: 30, height: 30 },
+  HistoryStateNode: { width: 30, height: 30 },
+  JunctionPointNode: { width: 20, height: 20 },
+  ChoicePointNode: { width: 30, height: 30 },
+  EntryPointNode: { width: 30, height: 30 },
+  ExitPointNode: { width: 30, height: 30 },
+  ForkJoinNode: { width: 10, height: 60 }, // Default vertical orientation
+  bendpoint: { width: 10, height: 10 },
+};
+
+// Constants for composite node spacing
+const COMPOSITE_NODE_SPACING = {
+  MINIMUM_BORDER: 60, // Minimum space between nodes and composite border
+  HEADER_HEIGHT: 40, // Space reserved for composite node header
+  MINIMUM_WIDTH: 400, // Minimum width of a composite node
+  MINIMUM_HEIGHT: 300, // Minimum height of a composite node
+};
+
+// Base layout configuration
+const getBaseLayoutConfig = (direction: 'DOWN' | 'RIGHT') => ({
+  'elk.algorithm': 'layered',
+  'elk.direction': direction,
+  'elk.spacing.nodeNode': '100',
+  'elk.spacing.edgeNode': '30',
+  'elk.spacing.edgeEdge': '30',
+  'elk.layered.spacing.nodeNodeBetweenLayers': '150',
+  'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+  'elk.portConstraints': 'FIXED_SIDE',
+  'elk.nodeSize.constraints': 'MINIMUM_SIZE',
+  'elk.nodeSize.options': 'MINIMUM_SIZE_ACCOUNTS_FOR_PADDING',
+  'elk.padding': '[top=200,left=25,bottom=25,right=25]',
+});
+
+// Calculate required dimensions for a composite node based on its children
+const calculateCompositeNodeDimensions = (
+  compositeNode: Node,
+  allNodes: Node[],
+): { width: number; height: number } => {
+  const childNodes = allNodes.filter((n) => n.parentId === compositeNode.id);
+
+  if (!childNodes.length) {
+    return {
+      width: COMPOSITE_NODE_SPACING.MINIMUM_WIDTH,
+      height: COMPOSITE_NODE_SPACING.MINIMUM_HEIGHT,
+    };
+  }
+
+  // Find the extremes of child node positions and dimensions
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+
+  childNodes.forEach((node) => {
+    const width = node.width!;
+    const height = node.height!;
+    const { x, y } = node.position;
+
+    // Update extremes considering node dimensions
+    minX = Math.min(minX, x);
+    maxX = Math.max(maxX, x + width);
+    minY = Math.min(minY, y);
+    maxY = Math.max(maxY, y + height);
+  });
+
+  // Calculate required dimensions with padding and header
+  const contentWidth = maxX - minX;
+  const contentHeight = maxY - minY;
+
+  // Add padding and ensure minimum dimensions
+  let requiredWidth = Math.max(
+    contentWidth + COMPOSITE_NODE_SPACING.MINIMUM_BORDER * 2,
+    COMPOSITE_NODE_SPACING.MINIMUM_WIDTH,
+  );
+
+  let requiredHeight = Math.max(
+    contentHeight +
+      COMPOSITE_NODE_SPACING.MINIMUM_BORDER * 2 +
+      COMPOSITE_NODE_SPACING.HEADER_HEIGHT,
+    COMPOSITE_NODE_SPACING.MINIMUM_HEIGHT,
+  );
+
+  // Add extra padding for nodes near borders
+  const BORDER_PADDING = 40;
+  childNodes.forEach((node) => {
+    const width = node.width!;
+    const height = node.height!;
+    const { x, y } = node.position;
+
+    // Check if node is near the border
+    if (x <= BORDER_PADDING) {
+      requiredWidth += BORDER_PADDING;
+    }
+    if (x + width >= requiredWidth - BORDER_PADDING) {
+      requiredWidth += BORDER_PADDING;
+    }
+    if (y <= BORDER_PADDING) {
+      requiredHeight += BORDER_PADDING;
+    }
+    if (y + height >= requiredHeight - BORDER_PADDING) {
+      requiredHeight += BORDER_PADDING;
+    }
+  });
+
+  // Get current dimensions
+  const currentWidth =
+    compositeNode.data?.width || COMPOSITE_NODE_SPACING.MINIMUM_WIDTH;
+  const currentHeight =
+    compositeNode.data?.height || COMPOSITE_NODE_SPACING.MINIMUM_HEIGHT;
+
+  // Use the larger of current and required dimensions
+  return {
+    width: Math.max(currentWidth as number, requiredWidth),
+    height: Math.max(currentHeight as number, requiredHeight),
+  };
+};
+
+// Layout a single composite node and its children
+async function layoutCompositeNode(
+  compositeNode: Node,
+  childNodes: Node[],
+  childEdges: StateMachineEdge[],
+  direction: 'DOWN' | 'RIGHT',
+): Promise<{ nodes: Node[]; width: number; height: number }> {
+  // Create ELK nodes for children
+  const elkChildNodes = childNodes.map((node) => {
+    const width = node.width!;
+    const height = node.height!;
+    return {
+      id: node.id,
+      width,
+      height,
+      ports: [
+        { id: `${node.id}-west`, properties: { side: 'WEST' } },
+        { id: `${node.id}-east`, properties: { side: 'EAST' } },
+      ],
+    };
+  });
+
+  // Create ELK edges for children
+  const elkChildEdges = childEdges.map((edge) => ({
+    id: edge.id,
+    sources: [edge.source],
+    targets: [edge.target],
+  }));
+
+  // Create layout config for children
+  const childLayoutConfig = {
+    ...getBaseLayoutConfig(direction),
+    'elk.padding': '[top=100,left=100,bottom=50,right=50]',
+    'elk.spacing.nodeNode': '100',
+  };
+
+  // Create and layout child graph
+  const childGraph = {
+    id: compositeNode.id,
+    layoutOptions: childLayoutConfig,
+    children: elkChildNodes,
+    edges: elkChildEdges,
+  };
+
+  const layoutedChildGraph = await elk.layout(childGraph);
+
+  // Update child positions
+  const updatedChildren = childNodes.map((node) => {
+    const layoutedNode = layoutedChildGraph.children?.find(
+      (n) => n.id === node.id,
+    );
+    if (!layoutedNode) return node;
+
+    return {
+      ...node,
+      position: {
+        x: layoutedNode.x || 0,
+        y: layoutedNode.y || 0,
+      },
+      width: layoutedNode.width,
+      height: layoutedNode.height,
+    };
+  });
+
+  // Calculate composite node size based on layouted children
+  const { width, height } = calculateCompositeNodeDimensions(
+    compositeNode,
+    updatedChildren,
+  );
+
+  return { nodes: updatedChildren, width, height };
+}
+
+export const useStateMachineLayout = (
+  nodes: Node[],
+  edges: StateMachineEdge[],
+  setNodes: React.Dispatch<React.SetStateAction<Node[]>>,
+) => {
+  const frameIdRef = useRef<number | null>(null);
+  const [layoutDirection, setLayoutDirection] = useState<'DOWN' | 'RIGHT'>(
+    'DOWN',
+  );
+
+  const getLayoutedElements = useCallback(async () => {
+    if (frameIdRef.current) {
+      cancelAnimationFrame(frameIdRef.current);
+      frameIdRef.current = null;
+    }
+
+    // Filter out PinPointNodes from layout calculation but keep them in final result
+    const nonPinPointNodes = nodes.filter(
+      (node) => node.type !== 'PinPointNode',
+    );
+    const pinPointNodes = nodes.filter((node) => node.type === 'PinPointNode');
+
+    // First pass: Layout composite nodes independently
+    const updatedNodes = [...nonPinPointNodes];
+    const compositeNodes = nonPinPointNodes.filter(
+      (n) => n.type === 'CompositeStateNode' && n.data?.expanded,
+    );
+
+    for (const compositeNode of compositeNodes) {
+      const childNodes = nonPinPointNodes.filter(
+        (n) => n.parentId === compositeNode.id,
+      );
+      const childEdges = edges.filter(
+        (e) =>
+          childNodes.some((n) => n.id === e.source) &&
+          childNodes.some((n) => n.id === e.target),
+      );
+
+      const {
+        nodes: layoutedChildren,
+        width,
+        height,
+      } = await layoutCompositeNode(
+        compositeNode,
+        childNodes,
+        childEdges,
+        layoutDirection,
+      );
+
+      // Update composite node dimensions
+      const compositeIndex = updatedNodes.findIndex(
+        (n) => n.id === compositeNode.id,
+      );
+      if (compositeIndex !== -1) {
+        updatedNodes[compositeIndex] = {
+          ...updatedNodes[compositeIndex],
+          width,
+          height,
+          data: {
+            ...updatedNodes[compositeIndex].data,
+            width,
+            height,
+          },
+        };
+      }
+
+      // Update child positions
+      layoutedChildren.forEach((child) => {
+        const childIndex = updatedNodes.findIndex((n) => n.id === child.id);
+        if (childIndex !== -1) {
+          updatedNodes[childIndex] = child;
+        }
+      });
+    }
+
+    // Second pass: Layout the entire graph
+    const topLevelNodes = updatedNodes.filter(
+      (n) =>
+        !n.parentId ||
+        !nonPinPointNodes.find((p) => p.id === n.parentId)?.data?.expanded,
+    );
+
+    const elkNodes = topLevelNodes.map((node) => {
+      const width = node.width!;
+      const height = node.height!;
+      return {
+        id: node.id,
+        width,
+        height,
+        ports: [
+          { id: `${node.id}-west`, properties: { side: 'WEST' } },
+          { id: `${node.id}-east`, properties: { side: 'EAST' } },
+        ],
+      };
+    });
+
+    const elkEdges = edges
+      .filter(
+        (e) =>
+          topLevelNodes.some((n) => n.id === e.source) &&
+          topLevelNodes.some((n) => n.id === e.target),
+      )
+      .map((edge) => ({
+        id: edge.id,
+        sources: [`${edge.source}-east`],
+        targets: [`${edge.target}-west`],
+      }));
+
+    const graph = {
+      id: 'root',
+      layoutOptions: getBaseLayoutConfig(layoutDirection),
+      children: elkNodes,
+      edges: elkEdges,
+    };
+
+    const layoutedGraph = await elk.layout(graph);
+
+    // Update node positions from layout
+    const finalNodes = updatedNodes.map((node) => {
+      if (
+        !node.parentId ||
+        !nonPinPointNodes.find((p) => p.id === node.parentId)?.data?.expanded
+      ) {
+        const layoutedNode = layoutedGraph.children?.find(
+          (n) => n.id === node.id,
+        );
+        if (layoutedNode) {
+          return {
+            ...node,
+            position: {
+              x: layoutedNode.x || 0,
+              y: layoutedNode.y || 0,
+            },
+          };
+        }
+      }
+      return node;
+    });
+
+    // Add back PinPointNodes with their original positions
+    const allNodes = [...finalNodes, ...pinPointNodes];
+
+    frameIdRef.current = window.requestAnimationFrame(() => {
+      setNodes(allNodes);
+      frameIdRef.current = null;
+    });
+  }, [nodes, edges, setNodes, layoutDirection]);
+
+  return { getLayoutedElements, layoutDirection, setLayoutDirection };
+};

package/packages/diagrams/src/lib/templates/stateMachine/components/StateNodeSettings.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    IconButton,
+    InputLabel,
+    Chip,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import useSelfTransition from './useSelfTransition';
+import { useTranslation } from 'react-i18next';
+import { StateMachineNode, StateMachineEdge } from '../../../types/state-machine-types';
+
+interface StateNodeSettingsProps {
+    nodeId: string;
+    data: {
+        label?: string;
+        activities?: string;
+        color?: string;
+        [key: string]: unknown;
+    };
+    onUpdate: (updates: Record<string, unknown>) => void;
+    onClose: () => void;
+    edges: StateMachineEdge[];
+    setEdges: (edges: StateMachineEdge[] | ((prev: StateMachineEdge[]) => StateMachineEdge[])) => void;
+    nodes?: StateMachineNode[];
+}
+
+const StateNodeSettings: React.FC<StateNodeSettingsProps> = ({
+    nodeId,
+    data,
+    onUpdate,
+    onClose,
+    edges,
+    setEdges,
+    nodes,
+}) => {
+    const { t } = useTranslation();
+    // Ensure activities is always an array
+    const initialActivities = Array.isArray(data.activities)
+        ? data.activities
+        : typeof data.activities === 'string' && data.activities.trim() !== ''
+            ? [data.activities]
+            : [];
+    const [label, setLabel] = useState(data.label || '');
+    const [activities, setActivities] = useState<string[]>(initialActivities);
+    const [color, setColor] = useState(data.color || '#0066cc');
+
+    // Use custom hook for self-transition logic
+    const {
+        hasSelfTransition,
+        selfTransitionLabel,
+        setSelfTransitionLabel,
+        toggleSelfTransition,
+        handleSelfTransitionLabelChange,
+    } = useSelfTransition({ nodeId, edges, setEdges, nodes });
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleActivityChange = useCallback((index: number, value: string) => {
+        const updated = [...activities];
+        updated[index] = value;
+        setActivities(updated);
+        onUpdate({ activities: updated });
+    }, [activities, onUpdate]);
+
+    const handleAddActivity = useCallback(() => {
+        const updated = [...activities, ''];
+        setActivities(updated);
+        onUpdate({ activities: updated });
+    }, [activities, onUpdate]);
+
+    const handleRemoveActivity = useCallback((index: number) => {
+        const updated = activities.filter((_, i) => i !== index);
+        setActivities(updated);
+        onUpdate({ activities: updated });
+    }, [activities, onUpdate]);
+
+    const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setColor(e.target.value);
+        onUpdate({ color: e.target.value });
+    }, [onUpdate]);
+
+    return (
+        <Box
+            className="state-node-settings"
+            sx={{
+                position: 'absolute',
+                top: 100,
+                right: 20,
+                bgcolor: 'background.paper',
+                p: 2,
+                border: '1px solid #ddd',
+                borderRadius: 1,
+                boxShadow: 3,
+                zIndex: 10,
+                width: 320,
+            }}
+        >
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Typography variant="h6" sx={{ m: 0 }}>
+                    {t('stateMachine.stateNodeSettings.title')}
+                </Typography>
+                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </Box>
+            <TextField
+                label={t('stateMachine.stateNodeSettings.label')}
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                variant="outlined"
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <Box mb={2}>
+                <InputLabel shrink>{t('stateMachine.stateNodeSettings.activities')}</InputLabel>
+                {activities.map((activity, idx) => (
+                    <Box key={idx} display="flex" alignItems="center" mb={1}>
+                        <TextField
+                            value={activity}
+                            onChange={e => handleActivityChange(idx, e.target.value)}
+                            size="small"
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mr: 1 }}
+                        />
+                        <IconButton onClick={() => handleRemoveActivity(idx)} size="small" disabled={activities.length === 1}>
+                            <CloseIcon fontSize="small" />
+                        </IconButton>
+                    </Box>
+                ))}
+                <Button onClick={handleAddActivity} size="small" variant="outlined" sx={{ mt: 1 }}>
+                    {t('stateMachine.stateNodeSettings.addActivity')}
+                </Button>
+            </Box>
+            <Box mb={2}>
+                <InputLabel shrink htmlFor="color-picker">{t('stateMachine.stateNodeSettings.color')}</InputLabel>
+                <input
+                    id="color-picker"
+                    type="color"
+                    value={color}
+                    onChange={handleColorChange}
+                    style={{ width: '100%', height: 36, border: 'none', background: 'none', cursor: 'pointer' }}
+                />
+            </Box>
+            <Box mb={2} display="flex" alignItems="center" gap={1}>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={hasSelfTransition}
+                            onChange={toggleSelfTransition}
+                            color="primary"
+                        />
+                    }
+                    label={t('stateMachine.stateNodeSettings.selfTransition')}
+                />
+                {hasSelfTransition && (
+                    <TextField
+                        label="Label"
+                        value={selfTransitionLabel}
+                        onChange={handleSelfTransitionLabelChange}
+                        size="small"
+                        sx={{ width: 160 }}
+                    />
+                )}
+            </Box>
+            <Button
+                variant="contained"
+                color="primary"
+                fullWidth
+                onClick={onClose}
+                sx={{ mt: 1 }}
+            >
+                {t('stateMachine.stateNodeSettings.apply')}
+            </Button>
+        </Box>
+    );
+};
+
+export default StateNodeSettings; 

package/packages/diagrams/src/lib/templates/stateMachine/components/useSelfTransition.ts

@@ -0,0 +1,114 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  StateMachineNode,
+  StateMachineEdge,
+  StateMachineEdgeType,
+} from '../../../types/state-machine-types';
+
+interface UseSelfTransitionProps {
+  nodeId: string;
+  edges: StateMachineEdge[];
+  setEdges: (
+    edges:
+      | StateMachineEdge[]
+      | ((prev: StateMachineEdge[]) => StateMachineEdge[]),
+  ) => void;
+  nodes?: StateMachineNode[];
+}
+
+const useSelfTransition = ({
+  nodeId,
+  edges,
+  setEdges,
+  nodes,
+}: UseSelfTransitionProps) => {
+  const selfEdge = edges.find(
+    (e) =>
+      e.source === nodeId &&
+      e.target === nodeId &&
+      (e.type === 'customEdge' || e.type === 'selfconnecting'),
+  );
+  const hasSelfTransition = !!selfEdge;
+  const [selfTransitionLabel, setSelfTransitionLabel] = useState(
+    selfEdge?.data?.label || '',
+  );
+
+  useEffect(() => {
+    setSelfTransitionLabel(selfEdge?.data?.label || '');
+  }, [selfEdge]);
+
+  const toggleSelfTransition = useCallback(() => {
+    if (hasSelfTransition) {
+      setEdges(edges.filter((e) => e !== selfEdge));
+    } else {
+      const node = nodes?.find?.((n) => n.id === nodeId);
+      const nodeWidth = node?.data?.width || 120;
+      const nodeHeight = node?.data?.height || 40;
+      const nodeTopY = node?.position?.y ?? 0;
+      const newEdge = {
+        id: `self-edge-${nodeId}-${Date.now()}`,
+        source: nodeId,
+        target: nodeId,
+        type: 'selfconnecting' as StateMachineEdgeType,
+        data: {
+          label: selfTransitionLabel || 'Self Transition',
+          nodeWidth,
+          nodeHeight,
+          topY: nodeTopY,
+        },
+        animated: false,
+      };
+      setEdges([...edges, newEdge]);
+    }
+  }, [
+    hasSelfTransition,
+    setEdges,
+    edges,
+    selfEdge,
+    nodeId,
+    nodes,
+    selfTransitionLabel,
+  ]);
+
+  const handleSelfTransitionLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSelfTransitionLabel(e.target.value);
+      if (selfEdge) {
+        let topY = selfEdge.data?.topY;
+        if (nodes) {
+          const node = nodes.find((n) => n.id === nodeId);
+          if (node) {
+            topY = node.position?.y ?? topY;
+          }
+        }
+        setEdges(
+          edges.map((edge) =>
+            edge === selfEdge
+              ? {
+                  ...edge,
+                  data: {
+                    ...edge.data,
+                    label: e.target.value,
+                    nodeWidth: edge.data?.nodeWidth,
+                    nodeHeight: edge.data?.nodeHeight,
+                    topY,
+                  },
+                }
+              : edge,
+          ),
+        );
+      }
+    },
+    [selfEdge, setEdges, edges, nodes, nodeId],
+  );
+
+  return {
+    hasSelfTransition,
+    selfTransitionLabel,
+    setSelfTransitionLabel,
+    toggleSelfTransition,
+    handleSelfTransitionLabelChange,
+  };
+};
+
+export default useSelfTransition;