@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,225 +0,0 @@
-import { memo, useRef, useEffect } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Paper, Typography, Box, Divider, IconButton } from "@mui/material"
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { useRenderPins } from '../../../hooks/useRenderPins';
-import { useRenderDividers } from '../../../hooks/useRenderDividers';
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-import { StateMachineNodeProps, CompositeStateNodeData } from '../../../types/state-machine-types';
-
-interface CompositeStateNodeProps extends StateMachineNodeProps {
-  onToggleExpand?: (id: string, expanded: boolean) => void;
-  onSettingsClick?: () => void;
-}
-
-interface PinData {
-  id: string;
-  type: 'pin' | 'point';
-  label: string;
-  side: 'top' | 'right' | 'bottom' | 'left';
-  position: number;
-}
-
-interface DividerData {
-  vertical?: number;
-  horizontal?: number;
-}
-
-const CompositeStateNode = ({ data, isConnectable, id, onToggleExpand }: CompositeStateNodeProps) => {
-  const compositeData = data as CompositeStateNodeData;
-  const { label, width = 400, height = 300, dividers = { vertical: 0, horizontal: 0 }, expanded = false } = compositeData;
-  const pins = (compositeData.pins || []) as PinData[];
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    // Use scrollWidth/Height to capture full content size including overflow
-    const actualWidth = nodeRef.current?.scrollWidth || width;
-    const actualHeight = nodeRef.current?.scrollHeight || height;
-
-    // Update the measured dimensions for edge calculations
-    if (compositeData.measured) {
-      compositeData.measured.width = actualWidth;
-      compositeData.measured.height = actualHeight;
-    } else {
-      compositeData.measured = { width: actualWidth, height: actualHeight };
-    }
-
-    // Call the onResize callback if provided
-    if (typeof compositeData.onResize === 'function') {
-      compositeData.onResize(id, actualWidth, actualHeight);
-    }
-  });
-
-  const verticalDividers = (dividers as DividerData).vertical || 0;
-  const horizontalDividers = (dividers as DividerData).horizontal || 0;
-  const dividerColor = '#bbb';
-  const dividerThickness = 2;
-
-  const renderedDividers = useRenderDividers({
-    verticalDividers,
-    horizontalDividers,
-    dividerThickness,
-    dividerColor,
-    width: width as number,
-    height: height as number,
-  });
-
-  const renderedPins = useRenderPins(pins, isConnectable);
-
-  if (!expanded) {
-    return (
-      <Paper
-        ref={nodeRef}
-        elevation={2}
-        sx={{
-          minWidth: 'min-content',
-          width: 'max-content',
-          borderRadius: 4,
-          border: "1px solid #ccc",
-          padding: 2,
-          position: 'relative',
-          overflow: 'visible',
-          boxSizing: 'border-box',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-        }}
-      >
-        <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',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'relative',
-          width: 'max-content',
-          minWidth: 'min-content'
-        }}>
-          <Typography
-            variant="subtitle1"
-            fontWeight="bold"
-            sx={{
-              whiteSpace: 'nowrap',
-              overflow: 'visible',
-              width: 'max-content'
-            }}
-          >
-            {(label as string) || 'Composite State'}
-          </Typography>
-          <IconButton
-            size="small"
-            sx={{ ml: 1 }}
-            onClick={e => {
-              e.stopPropagation();
-              if (onToggleExpand) onToggleExpand(id, true);
-            }}
-          >
-            <ExpandMoreIcon fontSize="small" />
-          </IconButton>
-        </Box>
-        <Handle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          style={{
-            right: '-6px',
-            backgroundColor: '#555',
-            border: '2px solid #fff',
-            width: '12px',
-            height: '12px'
-          }}
-        />
-      </Paper>
-    );
-  }
-
-  return (
-    <Paper
-      ref={nodeRef}
-      elevation={2}
-      sx={{
-        width: width as number,
-        height: height as number,
-        borderRadius: 4,
-        border: "1px solid #ccc",
-        padding: 2,
-        backgroundColor: "transparent",
-        position: "relative",
-        boxShadow: 'none',
-        boxSizing: 'border-box',  // Include padding in size calculations
-      }}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={{
-          left: '-6px',
-          backgroundColor: '#555',
-          border: '2px solid #fff',
-          width: '12px',
-          height: '12px'
-        }}
-      />
-      <Box sx={{ position: 'absolute', top: 4, right: 4, zIndex: 20 }}>
-        <IconButton
-          size="small"
-          onClick={e => {
-            e.stopPropagation();
-            if (onToggleExpand) onToggleExpand(id, false);
-          }}
-        >
-          <ExpandLessIcon fontSize="small" />
-        </IconButton>
-      </Box>
-      {renderedDividers}
-      {renderedPins}
-      <Box
-        sx={{
-          cursor: 'pointer',
-          userSelect: 'none',
-        }}
-      >
-        <Box sx={{ textAlign: "center", pt: 0.5 }}>
-          <Typography variant="subtitle1" fontWeight="bold">
-            {(label as string) || "Composite State"}
-          </Typography>
-        </Box>
-        <Divider sx={{ my: 1 }} />
-      </Box>
-      <Box
-        sx={{
-          minHeight: 100,
-          minWidth: 180,
-        }}
-      />
-      <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(CompositeStateNode);
-

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

@@ -1,31 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const EntryPointNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 20,
-        height: 20,
-        borderRadius: "50%",
-        bgcolor: "white",
-        border: "2px solid black",
-      }}
-    >
-      <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(EntryPointNode)

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

@@ -1,44 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const ExitPointNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 20,
-        height: 20,
-        borderRadius: "50%",
-        bgcolor: "white",
-        border: "2px solid black",
-        position: "relative",
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          width: "60%",
-          height: "60%",
-          top: "20%",
-          left: "20%",
-          borderRadius: "50%",
-          bgcolor: "white",
-          border: "1px solid black",
-        },
-      }}
-    >
-      <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(ExitPointNode)

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

@@ -1,41 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const FinalStateNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 30,
-        height: 30,
-        borderRadius: "50%",
-        border: "2px solid black",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Box
-        sx={{
-          width: 16,
-          height: 16,
-          borderRadius: "50%",
-          bgcolor: "black",
-        }}
-      />
-      <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(FinalStateNode)

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

@@ -1,53 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const ForkJoinNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-  const isHorizontal = data?.orientation === "horizontal";
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: isHorizontal ? 60 : 10,
-        height: isHorizontal ? 10 : 60,
-        bgcolor: "black",
-      }}
-    >
-      {isHorizontal ? (
-        <>
-          <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-          <Handle type="source" position={Position.Right} id="a" style={{ top: "25%" }} isConnectable={isConnectable} />
-          <Handle type="source" position={Position.Right} id="b" style={{ top: "75%" }} isConnectable={isConnectable} />
-        </>
-      ) : (
-        <>
-          <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
-          <Handle
-            type="source"
-            position={Position.Bottom}
-            id="a"
-            style={{ left: "25%" }}
-            isConnectable={isConnectable}
-          />
-          <Handle
-            type="source"
-            position={Position.Bottom}
-            id="b"
-            style={{ left: "75%" }}
-            isConnectable={isConnectable}
-          />
-        </>
-      )}
-    </Box>
-  )
-}
-
-export default memo(ForkJoinNode)

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

@@ -1,36 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box, Typography } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const HistoryStateNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 30,
-        height: 30,
-        borderRadius: "50%",
-        border: "2px solid black",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Typography variant="subtitle2" fontWeight="bold">
-        H
-      </Typography>
-      <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(HistoryStateNode)

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

@@ -1,29 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const InitialStateNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 20,
-        height: 20,
-        borderRadius: "50%",
-        bgcolor: "black",
-      }}
-    >
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(InitialStateNode)

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

@@ -1,33 +0,0 @@
-import { memo, useRef } from "react"
-import { Handle, Position, type NodeProps } from "@xyflow/react"
-import { Box } from "@mui/material"
-import { useResizeObserver } from "../../../hooks/useResizeObserver";
-
-const JunctionPointNode = ({ data, id, isConnectable }: NodeProps) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver(nodeRef, ({ width, height }) => {
-    if (typeof data.onResize === 'function') {
-      data.onResize(id, width, height);
-    }
-  });
-
-  return (
-    <Box
-      ref={nodeRef}
-      sx={{
-        width: 16,
-        height: 16,
-        borderRadius: "50%",
-        bgcolor: "black",
-      }}
-    >
-      <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
-      <Handle type="target" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
-    </Box>
-  )
-}
-
-export default memo(JunctionPointNode)

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

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