@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/stateMachine/controls/StateDiagramControls.tsx

@@ -0,0 +1,488 @@
+'use client';
+
+import React, { useState, createContext, useCallback, useMemo } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  IconButton,
+  Tabs,
+  Tab,
+  Tooltip,
+  Divider,
+  Collapse,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import RectangleIcon from '@mui/icons-material/CropSquare';
+import ControlEdgeList from '../../../components/ControlEdgeList';
+import {
+  DiagramControlsProps,
+  NodeType,
+  TabPanelProps,
+  NodeSelectionContextType,
+  StateMachineNode,
+  StateMachineEdge
+} from '../../../types/state-machine-types';
+import { Edge } from '@xyflow/react';
+
+// Memoized SVG icons for state machine components
+const InitialStateIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="black" />
+  </svg>
+));
+
+const FinalStateIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
+    <circle cx="10" cy="10" r="4" fill="black" />
+  </svg>
+));
+
+const DiamondIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <polygon
+      points="10,3 17,10 10,17 3,10"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+    />
+  </svg>
+));
+
+const BarIcon = React.memo(() => (
+  <svg width="24" height="8" viewBox="0 0 24 8">
+    <rect x="2" y="2" width="20" height="4" fill="black" />
+  </svg>
+));
+
+const HistoryIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
+    <text
+      x="10"
+      y="15"
+      textAnchor="middle"
+      fontSize="10"
+      fontWeight="bold"
+      fill="black"
+    >
+      H
+    </text>
+  </svg>
+));
+
+const SubmachineIcon = React.memo(() => (
+  <svg width="24" height="20" viewBox="0 0 24 20">
+    <rect
+      x="4"
+      y="4"
+      width="16"
+      height="12"
+      rx="6"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+    />
+    <rect
+      x="16"
+      y="12"
+      width="6"
+      height="4"
+      rx="1"
+      fill="none"
+      stroke="black"
+      strokeWidth="1.5"
+    />
+  </svg>
+));
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+      style={{ padding: '8px 0' }}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+
+
+// Memoized node types
+const nodeTypes: NodeType[] = [
+  {
+    id: 'StateNode',
+    name: 'State',
+    icon: <RectangleIcon fontSize="small" />,
+  },
+  {
+    id: 'InitialStateNode',
+    name: 'Initial State',
+    icon: <InitialStateIcon />,
+  },
+  {
+    id: 'FinalStateNode',
+    name: 'Final State',
+    icon: <FinalStateIcon />,
+  },
+  {
+    id: 'CompositeStateNode',
+    name: 'Composite State',
+    icon: <SubmachineIcon />,
+  },
+  {
+    id: 'HistoryStateNode',
+    name: 'History State',
+    icon: <HistoryIcon />,
+  },
+  {
+    id: 'JunctionPointNode',
+    name: 'Junction Point',
+    icon: <BarIcon />,
+  },
+  {
+    id: 'ChoicePointNode',
+    name: 'Choice Point',
+    icon: <DiamondIcon />,
+  },
+  {
+    id: 'EntryPointNode',
+    name: 'Entry Point',
+    icon: <ArrowForwardIcon fontSize="small" />,
+  },
+  {
+    id: 'ExitPointNode',
+    name: 'Exit Point',
+    icon: (
+      <ArrowForwardIcon
+        fontSize="small"
+        style={{ transform: 'rotate(180deg)' }}
+      />
+    ),
+  },
+  {
+    id: 'ForkJoinNode',
+    name: 'Fork/Join',
+    icon: <BarIcon />,
+  },
+];
+
+
+
+const StateDiagramControls: React.FC<DiagramControlsProps> = ({
+  onAddEntity,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLoadTemplate,
+  edges,
+  nodes,
+  onEditEdge,
+}) => {
+  const [tabValue, setTabValue] = useState(0);
+  const [expandStates, setExpandStates] = useState(true);
+  const [expandTransitions, setExpandTransitions] = useState(true);
+
+  const handleTabChange = useCallback(
+    (event: React.SyntheticEvent, newValue: number) => {
+      setTabValue(newValue);
+    },
+    [],
+  );
+
+  // For adding nodes
+  const handleAddNode = useCallback(
+    (nodeType: string) => {
+      onAddEntity(nodeType);
+    },
+    [onAddEntity],
+  );
+
+  // For loading templates
+  const handleLoadTemplate = useCallback(
+    (templateType: string) => {
+      if (onLoadTemplate) {
+        onLoadTemplate(templateType);
+      }
+    },
+    [onLoadTemplate],
+  );
+
+  // Wrapper function to handle edge type conversion
+  const handleEditEdge = useCallback(
+    (edge: Edge) => {
+      if (onEditEdge) {
+        onEditEdge(edge as StateMachineEdge);
+      }
+    },
+    [onEditEdge],
+  );
+
+  // Memoize the nodeTypes array to prevent unnecessary re-renders
+  const memoizedNodeTypes = useMemo(() => nodeTypes, []);
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        p: 2,
+        borderRadius: 2,
+        bgcolor: '#242424',
+        color: '#fff',
+        border: '1px solid #333',
+        width: '100%',
+        maxHeight: '100%',
+        overflowY: 'auto',
+        // Custom scrollbar styling
+        '&::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: '#444',
+          borderRadius: '3px',
+          '&:hover': {
+            background: '#666',
+          },
+        },
+        // Dark theme styling for all child components
+        '& .MuiTab-root': {
+          color: '#999',
+          '&.Mui-selected': {
+            color: '#61dafb',
+          },
+        },
+        '& .MuiTabs-indicator': {
+          backgroundColor: '#61dafb',
+        },
+        '& .MuiDivider-root': {
+          borderColor: '#333',
+        },
+        '& .MuiListItemButton-root': {
+          color: '#fff',
+          '&:hover': {
+            bgcolor: 'rgba(97, 218, 251, 0.1)',
+          },
+        },
+        '& .MuiIconButton-root': {
+          color: '#999',
+          '&:hover': {
+            color: '#fff',
+            bgcolor: 'rgba(255, 255, 255, 0.1)',
+          },
+          '&.Mui-disabled': {
+            color: '#555',
+          },
+        },
+      }}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={1}
+      >
+        <Typography variant="h6" sx={{ fontWeight: 'medium' }}>
+          State Machine
+        </Typography>
+        <Box>
+          <Tooltip title="Undo">
+            <span>
+              <IconButton
+                size="small"
+                onClick={onUndo}
+                disabled={!canUndo}
+                sx={{ color: canUndo ? 'primary.main' : 'text.disabled' }}
+              >
+                <UndoIcon fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="Redo">
+            <span>
+              <IconButton
+                size="small"
+                onClick={onRedo}
+                disabled={!canRedo}
+                sx={{ color: canRedo ? 'primary.main' : 'text.disabled' }}
+              >
+                <RedoIcon fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </Box>
+      </Box>
+
+      <Tabs
+        value={tabValue}
+        onChange={handleTabChange}
+        variant="fullWidth"
+        sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}
+      >
+        <Tab label="Components" />
+        <Tab label="Templates" />
+      </Tabs>
+
+      <TabPanel value={tabValue} index={0}>
+        {/* States Section */}
+        <Box mb={1}>
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={() => setExpandStates(!expandStates)}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              p: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Typography variant="subtitle2" fontWeight="bold">
+              States
+            </Typography>
+            {expandStates ? (
+              <ExpandLessIcon fontSize="small" />
+            ) : (
+              <ExpandMoreIcon fontSize="small" />
+            )}
+          </Box>
+          <Collapse in={expandStates}>
+            <List dense disablePadding>
+              {memoizedNodeTypes.map((type) => (
+                <ListItem disablePadding key={type.id}>
+                  <ListItemButton
+                    onClick={() => handleAddNode(type.id)}
+                    sx={{ pl: 2 }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      {type.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={type.name} />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </Collapse>
+        </Box>
+
+        <Divider sx={{ my: 1 }} />
+
+        {/* Transitions Section */}
+        <Box mb={1}>
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={() => setExpandTransitions(!expandTransitions)}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              p: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Typography variant="subtitle2" fontWeight="bold">
+              Transitions
+            </Typography>
+            {expandTransitions ? (
+              <ExpandLessIcon fontSize="small" />
+            ) : (
+              <ExpandMoreIcon fontSize="small" />
+            )}
+          </Box>
+          <Collapse in={expandTransitions}>
+            <Box sx={{ px: 1 }}>
+              {/* Edge list using ControlEdgeList */}
+              <ControlEdgeList
+                edges={edges}
+                nodes={nodes}
+                type="state"
+                onEditEdge={handleEditEdge}
+                nodeTypes={memoizedNodeTypes}
+              />
+            </Box>
+          </Collapse>
+        </Box>
+      </TabPanel>
+
+      {/* Templates Tab */}
+      <TabPanel value={tabValue} index={1}>
+        <Typography variant="body2" color="text.secondary" sx={{ p: 1 }}>
+          Quick start with pre-defined state machine templates
+        </Typography>
+        <List dense>
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={() => handleLoadTemplate('simple-state-machine')}
+              sx={{
+                pl: 2,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+                mb: 1,
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <TimelineIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Simple State Machine"
+                secondary="Basic state transitions"
+              />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={() => handleLoadTemplate('fork-join-state-machine')}
+              sx={{
+                pl: 2,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <TimelineIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Fork/Join Example"
+                secondary="Parallel state transitions"
+              />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </TabPanel>
+    </Paper>
+  );
+};
+
+// Node selection context
+
+export const NodeSelectionContext = createContext<NodeSelectionContextType>({
+  selectedNodeType: null,
+  setSelectedNodeType: () => { },
+  addNodeAtCenter: undefined,
+});
+
+export default StateDiagramControls;

package/packages/diagrams/src/lib/templates/stateMachine/data/template-data.ts

@@ -0,0 +1,4 @@
+import { Node, Edge } from '@xyflow/react';
+
+export const stateMachineDefaultNodes: Node[] = [];
+export const stateMachineDefaultEdges: Edge[] = [];

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

@@ -0,0 +1,54 @@
+import { memo, useRef } from "react"
+import { Handle, Position, type NodeProps } from "@xyflow/react"
+import { Box } from "@mui/material"
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+
+const ChoicePointNode = ({ 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,
+        transform: "rotate(45deg)",
+        bgcolor: "white",
+        border: "2px solid black",
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ transform: "rotate(-45deg)" }}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ transform: "rotate(-45deg)" }}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ transform: "rotate(-45deg)" }}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Left}
+        style={{ transform: "rotate(-45deg)" }}
+        isConnectable={isConnectable}
+      />
+    </Box>
+  )
+}
+
+export default memo(ChoicePointNode)