@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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

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