@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,221 @@
+import React, { useCallback, useMemo, useRef, memo } from 'react';
+import { EdgeProps, getBezierPath, useReactFlow, Node, EdgeLabelRenderer } from '@xyflow/react';
+import { Box, Typography } from "@mui/material";
+import { getEdgeParams } from '../../../utils/nodeutils';
+import { v4 as uuidv4 } from 'uuid';
+
+const CustomEdge = ({
+    id,
+    source,
+    target,
+    data,
+    style = {},
+}: EdgeProps) => {
+    const { getNodes, setNodes, setEdges, screenToFlowPosition } = useReactFlow();
+    const nodes = getNodes();
+    const pathRef = useRef<SVGPathElement>(null);
+
+    // Memoize node lookup for source and target
+    const [sourceNodeRaw, targetNodeRaw] = useMemo(() => [
+        nodes.find((n: Node) => n.id === source),
+        nodes.find((n: Node) => n.id === target)
+    ], [nodes, source, target]);
+
+    if (!sourceNodeRaw || !targetNodeRaw) return null;
+
+    // Get absolute position of a node, including parent offsets
+    const getAbsolutePosition = useCallback((node: Node): { x: number, y: number } => {
+        return node.position;
+    }, []);
+
+    // Normalize bendpoint node size for edge calculation
+    const shrinkForEdgeCalc = useCallback((node: Node) => {
+        if (!node) return node;
+        if (node.type === 'bendpoint') {
+            return {
+                ...node,
+                width: 5,
+                height: 5,
+                measured: { width: 5, height: 5 },
+            };
+        }
+        return node;
+    }, []);
+
+    // Double click handler to create a bendpoint
+    const onEdgeDoubleClick = useCallback(
+        (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (!pathRef.current) return;
+            const flowPosition = screenToFlowPosition({
+                x: evt.clientX,
+                y: evt.clientY,
+            });
+            const bendpointId = `bendpoint-${uuidv4()}`;
+            const newNode = {
+                id: bendpointId,
+                type: 'bendpoint',
+                position: flowPosition,
+                data: {},
+                measured: { width: 5, height: 5 },
+                width: 5,
+                height: 5,
+                draggable: true,
+                deletable: true,
+                selectable: true,
+            };
+            const newEdge = {
+                id: `edge-${uuidv4()}`,
+                source: bendpointId,
+                target,
+                type: 'customEdge',
+                data: { ...data },
+            };
+            const updatedEdge = {
+                id,
+                source,
+                target: bendpointId,
+                type: 'customEdge',
+                data: { ...data },
+            };
+            setNodes((nds) => [...nds, newNode]);
+            setEdges((eds) => {
+                const filteredEdges = eds.filter((e) => e.id !== id);
+                return [...filteredEdges, updatedEdge, newEdge];
+            });
+        },
+        [id, source, target, data, setNodes, setEdges, screenToFlowPosition]
+    );
+
+    // Memoize absolute positions and safe node objects
+    const { sourceNode, targetNode, safeNodes } = useMemo(() => {
+        const normalizedSource = shrinkForEdgeCalc(sourceNodeRaw);
+        const normalizedTarget = shrinkForEdgeCalc(targetNodeRaw);
+        const sourceAbs = getAbsolutePosition(normalizedSource);
+        const targetAbs = getAbsolutePosition(normalizedTarget);
+        return {
+            sourceNode: {
+                ...normalizedSource,
+                position: sourceAbs,
+                width: normalizedSource.width == null ? undefined : normalizedSource.width,
+                height: normalizedSource.height == null ? undefined : normalizedSource.height,
+            },
+            targetNode: {
+                ...normalizedTarget,
+                position: targetAbs,
+                width: normalizedTarget.width == null ? undefined : normalizedTarget.width,
+                height: normalizedTarget.height == null ? undefined : normalizedTarget.height,
+            },
+            safeNodes: nodes.map((n) => {
+                const nn = shrinkForEdgeCalc(n);
+                return {
+                    ...nn,
+                    width: nn.width == null ? undefined : nn.width,
+                    height: nn.height == null ? undefined : nn.height,
+                };
+            }),
+        };
+    }, [getAbsolutePosition, sourceNodeRaw, targetNodeRaw, nodes, shrinkForEdgeCalc]);
+
+    // Edge params and Bezier path
+    const {
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    } = useMemo(() => getEdgeParams(
+        sourceNode,
+        targetNode,
+        undefined,
+        2,
+        'state-machine',
+        safeNodes
+    ), [sourceNode, targetNode, safeNodes]);
+
+    const [edgePath, labelX, labelY] = useMemo(() =>
+        getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+        }),
+        [sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition]
+    );
+
+    // Marker IDs
+    const markerStartId = `${id}-custom-marker-start`;
+    const markerEndId = `${id}-custom-marker-end`;
+    const showStart = data?.arrowHeadLeft === 'v';
+    const showEnd = data?.arrowHeadRight === 'v';
+
+    return (
+        <>
+            <defs>
+                {showStart && (
+                    <marker
+                        id={markerStartId}
+                        markerWidth="10"
+                        markerHeight="10"
+                        refX="5"
+                        refY="5"
+                        orient="auto"
+                        markerUnits="strokeWidth"
+                    >
+                        <path d="M10,0 L0,5 L10,10" fill="#222" />
+                    </marker>
+                )}
+                {showEnd && (
+                    <marker
+                        id={markerEndId}
+                        markerWidth="10"
+                        markerHeight="10"
+                        refX="5"
+                        refY="5"
+                        orient="auto"
+                        markerUnits="strokeWidth"
+                    >
+                        <path d="M0,0 L10,5 L0,10" fill="#222" />
+                    </marker>
+                )}
+            </defs>
+            <path
+                ref={pathRef}
+                id={id}
+                style={{
+                    ...style,
+                    strokeWidth: 1.5,
+                    stroke: "#555",
+                }}
+                className={data?.animated ? "react-flow__edge-path-animated" : "react-flow__edge-path"}
+                d={edgePath}
+                markerStart={showStart ? `url(#${markerStartId})` : undefined}
+                markerEnd={showEnd ? `url(#${markerEndId})` : undefined}
+                onDoubleClick={onEdgeDoubleClick}
+            />
+            {data?.label && (
+                <EdgeLabelRenderer>
+                    <Box
+                        sx={{
+                            position: "absolute",
+                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+                            fontSize: 12,
+                            pointerEvents: "all",
+                            backgroundColor: "rgba(255, 255, 255, 0.75)",
+                            padding: "2px 4px",
+                            borderRadius: 1,
+                        }}
+                    >
+                        <Typography variant="caption">{(data.label as string) || ''}</Typography>
+                    </Box>
+                </EdgeLabelRenderer>
+            )}
+        </>
+    );
+};
+
+export default memo(CustomEdge); 

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

@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    IconButton,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    ToggleButton,
+    ToggleButtonGroup,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslation } from 'react-i18next';
+import { StateMachineNode } from '../../../types/state-machine-types';
+
+interface EdgeSettingsProps {
+    data: {
+        label?: string;
+        arrowHeadLeft?: 'none' | 'v';
+        arrowHeadRight?: 'none' | 'v';
+        source?: string;
+        target?: string;
+        [key: string]: unknown;
+    };
+    nodes: StateMachineNode[];
+    onUpdate: (updates: Record<string, unknown>) => void;
+    onClose: () => void;
+    open?: boolean;
+    onDelete?: () => void;
+}
+
+const EdgeSettings: React.FC<EdgeSettingsProps> = ({
+    data,
+    nodes,
+    onUpdate,
+    onClose,
+    open = true,
+    onDelete,
+}) => {
+    const [label, setLabel] = useState(data.label || '');
+    const [arrowHeadLeft, setArrowHeadLeft] = useState<'none' | 'v'>(data.arrowHeadLeft || 'none');
+    const [arrowHeadRight, setArrowHeadRight] = useState<'none' | 'v'>(data.arrowHeadRight || 'none');
+    const [sourceId, setSourceId] = useState(data.source || '');
+    const [targetId, setTargetId] = useState(data.target || '');
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        setLabel(data.label || '');
+        setArrowHeadLeft(data.arrowHeadLeft || 'none');
+        setArrowHeadRight(data.arrowHeadRight || 'none');
+        setSourceId(data.source || '');
+        setTargetId(data.target || '');
+    }, [data]);
+
+    const handleApply = useCallback(() => {
+        onUpdate({ label, arrowHeadLeft, arrowHeadRight, source: sourceId, target: targetId });
+        onClose();
+    }, [label, arrowHeadLeft, arrowHeadRight, sourceId, targetId, onUpdate, onClose]);
+
+    // Helper for toggle logic: allow deselecting (set to 'none')
+    const handleArrowHeadLeftChange = useCallback((_: React.MouseEvent<HTMLElement>, value: 'none' | 'v') => {
+        if (arrowHeadLeft === value) {
+            setArrowHeadLeft('none');
+        } else if (value) {
+            setArrowHeadLeft(value);
+        }
+    }, [arrowHeadLeft]);
+    const handleArrowHeadRightChange = useCallback((_: React.MouseEvent<HTMLElement>, value: 'none' | 'v') => {
+        if (arrowHeadRight === value) {
+            setArrowHeadRight('none');
+        } else if (value) {
+            setArrowHeadRight(value);
+        }
+    }, [arrowHeadRight]);
+
+    // Memoize dropdown options for large node lists
+    const sourceNodeOptions = React.useMemo(() => (
+        nodes.map((node) => (
+            <MenuItem key={node.id} value={node.id}>
+                {node.data?.label || node.id}
+            </MenuItem>
+        ))
+    ), [nodes]);
+
+    const targetNodeOptions = React.useMemo(() => (
+        nodes.map((node) => (
+            <MenuItem key={node.id} value={node.id}>
+                {node.data?.label || node.id}
+            </MenuItem>
+        ))
+    ), [nodes]);
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+            <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span>{t('stateMachine.edgeSettings.title')}</span>
+                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent>
+                {/* Source Node Dropdown */}
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                    <InputLabel>{t('stateMachine.edgeSettings.sourceNode')}</InputLabel>
+                    <Select
+                        value={sourceId}
+                        label={t('stateMachine.edgeSettings.sourceNode')}
+                        onChange={e => setSourceId(e.target.value as string)}
+                    >
+                        {sourceNodeOptions}
+                    </Select>
+                </FormControl>
+                {/* Target Node Dropdown */}
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                    <InputLabel>{t('stateMachine.edgeSettings.targetNode')}</InputLabel>
+                    <Select
+                        value={targetId}
+                        label={t('stateMachine.edgeSettings.targetNode')}
+                        onChange={e => setTargetId(e.target.value as string)}
+                    >
+                        {targetNodeOptions}
+                    </Select>
+                </FormControl>
+                {/* Label Field */}
+                <TextField
+                    label={t('stateMachine.edgeSettings.label')}
+                    value={label}
+                    onChange={e => setLabel(e.target.value)}
+                    fullWidth
+                    variant="outlined"
+                    size="small"
+                    sx={{ mb: 2 }}
+                />
+                {/* Arrow Head (Source) */}
+                <Box mb={2}>
+                    <Typography variant="subtitle2" sx={{ mb: 1 }}>{t('stateMachine.edgeSettings.arrowHeadSource')}</Typography>
+                    <ToggleButtonGroup
+                        value={arrowHeadLeft}
+                        exclusive
+                        onChange={handleArrowHeadLeftChange}
+                        size="small"
+                    >
+                        <ToggleButton value="none">{t('stateMachine.edgeSettings.none')}</ToggleButton>
+                        <ToggleButton value="v">
+                            <svg width="24" height="16"><polyline points="24,0 12,8 24,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                        </ToggleButton>
+                    </ToggleButtonGroup>
+                </Box>
+                {/* Arrow Head (Target) */}
+                <Box mb={2}>
+                    <Typography variant="subtitle2" sx={{ mb: 1 }}>{t('stateMachine.edgeSettings.arrowHeadTarget')}</Typography>
+                    <ToggleButtonGroup
+                        value={arrowHeadRight}
+                        exclusive
+                        onChange={handleArrowHeadRightChange}
+                        size="small"
+                    >
+                        <ToggleButton value="none">{t('stateMachine.edgeSettings.none')}</ToggleButton>
+                        <ToggleButton value="v">
+                            <svg width="24" height="16"><polyline points="0,0 12,8 0,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                        </ToggleButton>
+                    </ToggleButtonGroup>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                {onDelete && (
+                    <Button onClick={onDelete} color="error">
+                        {t('stateMachine.edgeSettings.delete')}
+                    </Button>
+                )}
+                <Button onClick={onClose} color="secondary">
+                    {t('stateMachine.edgeSettings.cancel')}
+                </Button>
+                <Button
+                    onClick={handleApply}
+                    color="primary"
+                    variant="contained"
+                >
+                    {t('stateMachine.edgeSettings.save')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default EdgeSettings; 

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

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { BaseEdge, EdgeLabelRenderer, EdgeProps } from '@xyflow/react';
+
+const SelfConnectingEdge = ({ id, sourceX, sourceY, targetX, targetY, data, markerEnd }: EdgeProps) => {
+    // Use node size if available, otherwise default
+    const nodeWidth = (data?.nodeWidth as number) || 120;
+    const nodeHeight = (data?.nodeHeight as number) || 40;
+    // Use node position if available, otherwise fallback
+    const nodeX = (data?.nodeX as number) ?? (sourceX - nodeWidth / 2);
+    const nodeY = (data?.nodeY as number) ?? (sourceY - nodeHeight / 2);
+    const centerX = nodeX + nodeWidth / 2;
+    const topY = nodeY + 20; // 20px from top for arc start
+    const r = Math.max(nodeWidth, nodeHeight) * 0.4; // Arc radius proportional to node size
+    // Arc path 
+    const edgePath = `M ${centerX - r * 2.3} ${topY - 18} a ${r} ${r} 0 1 1 ${2 * r} 0`;
+    // Label position above the arc
+    const labelX = centerX - r * 1.3;
+    const labelY = topY - r - 20;
+    return (
+        <>
+            <BaseEdge path={edgePath} markerEnd={markerEnd} />
+            <EdgeLabelRenderer>
+                <div
+                    style={{
+                        position: 'absolute',
+                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+                        pointerEvents: 'all',
+                        fontSize: 12,
+                        background: 'white',
+                        padding: '2px 4px',
+                        borderRadius: 4,
+                        border: '1px solid #ccc',
+                    }}
+                >
+                    {(data?.label as string) || ''}
+                </div>
+            </EdgeLabelRenderer>
+        </>
+    );
+};
+
+export default memo(SelfConnectingEdge); 

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

@@ -0,0 +1,50 @@
+import StateNode from '../nodes/StateNode';
+import InitialStateNode from '../nodes/InitialStateNode';
+import FinalStateNode from '../nodes/FinalStateNode';
+import CompositeStateNodeOrig from '../nodes/CompositeStateNode';
+import HistoryStateNode from '../nodes/HistoryStateNode';
+import JunctionPointNode from '../nodes/JunctionPointNode';
+import ChoicePointNode from '../nodes/ChoicePointNode';
+import EntryPointNode from '../nodes/EntryPointNode';
+import ExitPointNode from '../nodes/ExitPointNode';
+import ForkJoinNode from '../nodes/ForkJoinNode';
+import CustomEdge from './CustomEdge';
+import PinPointNode from '../nodes/PinPointNode';
+import SelfConnectingEdge from './SelfConnectingEdge';
+import BendpointNode from '../nodes/bendPoint';
+import { NodeProps } from '@xyflow/react';
+import {
+    StateMachineNodeProps,
+    NodeTypeMap,
+    StateMachineNodeType
+} from '../../../types/state-machine-types';
+
+// Wrapper to allow passing onSettingsClick from parent
+interface CompositeStateNodeWrapperProps extends StateMachineNodeProps {
+    onSettingsClick?: () => void;
+}
+
+export const CompositeStateNode = (props: CompositeStateNodeWrapperProps) => {
+    const { onSettingsClick, ...nodeProps } = props;
+    return <CompositeStateNodeOrig {...nodeProps} onSettingsClick={onSettingsClick} />;
+};
+
+export const stateMachineNodeTypes: Record<StateMachineNodeType, React.FC<StateMachineNodeProps>> = {
+    StateNode,
+    InitialStateNode,
+    FinalStateNode,
+    CompositeStateNode,
+    HistoryStateNode,
+    JunctionPointNode,
+    ChoicePointNode,
+    EntryPointNode,
+    ExitPointNode,
+    ForkJoinNode,
+    PinPointNode,
+    bendpoint: BendpointNode,
+};
+
+export const stateMachineEdgeTypes = {
+    customEdge: CustomEdge,
+    selfconnecting: SelfConnectingEdge,
+};