@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

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