@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/apps/diagramming/src/DiagramTabs.tsx

@@ -1,205 +1,205 @@
-import React, { useEffect } from 'react';
-import { Button, Card, IconButton, Tab, Tabs } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import {
-  DiagrammingPage,
-  DownloadPanel,
-  NodeForm,
-  PropertiesPane,
-  useDiagramEdges,
-  useDiagramId,
-  useDiagramNodes,
-  FunctionSignature,
-  FunctionParameter,
-} from '@flowuent-labs/diagrams';
-import { useTabStore } from './tabsStore'; // Import the Zustand store
-import { AddNodeView } from './components/AddNodeView';
-import { conditionBuilderData } from './node-data';
-import DiagramTypes from '../../../packages/diagrams/src/lib/types/diagram-types';
-import { AppBar, Toolbar, Box } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
-import { Edge, Node } from '@xyflow/react';
-import { Node as ReactFlowNode } from 'reactflow';
-import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
-import {
-  WorkflowNodeContentType,
-  RenderAddNodeViewType,
-  GetDefaultNodeDataType,
-  OnChangeEventHandler,
-  ConditionBuilderState,
-} from '../../../packages/diagrams/src/lib/contexts/diagramStoreTypes';
-import { AvailableVariable } from '../../../packages/diagrams/src/lib/types/available-variables';
-
-// Define the interface for diagram page props
-interface DiagramPageProps {
-  onChange?: OnChangeEventHandler;
-  availableFunctions: FunctionSignature[];
-  availableVariables?: AvailableVariable[];
-  id: number;
-  workflowNodeContent?: WorkflowNodeContentType;
-  renderAddNodeView?: RenderAddNodeViewType;
-  getDefaultNodeData?: GetDefaultNodeDataType;
-  conditionBuilderStates?: ConditionBuilderState;
-}
-
-// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
-type GenericNode = ICardNode | Node | ReactFlowNode;
-
-const NodeGetter = () => {
-  const updateTabData = useTabStore.use.updateTabData();
-  const nodes = useDiagramNodes();
-  const edges = useDiagramEdges();
-  const id = useDiagramId();
-  useEffect(() => {
-    //updateTabData(id, nodes, edges);
-  }, [nodes, edges, id, updateTabData]);
-
-  return <div></div>;
-};
-
-// Transform FunctionObject[] to FunctionSignature[]
-const transformFunctions = (functionObjects: Array<{
-  id: string;
-  name: string;
-  args: string[];
-  code: string;
-}>): FunctionSignature[] => {
-  return functionObjects.map(func => ({
-    id: func.id,
-    name: func.name,
-    code: func.code,
-    args: func.args.map((arg: string): FunctionParameter => ({
-      name: arg,
-      type: 'any'
-    }))
-  }));
-};
-
-const DiagramTabs = ({
-  defaultNodes,
-  defaultEdges,
-  children,
-  diagramType,
-  diagramPageProps = {},
-}: {
-  defaultNodes: GenericNode[];
-  defaultEdges: Edge[];
-  children?: React.ReactNode;
-  diagramType: DiagramTypes;
-  diagramPageProps?: Partial<DiagramPageProps>;
-}) => {
-  const {
-    tabs,
-    currentTab,
-    addTab,
-    removeTab,
-    availableFunctions,
-    setCurrentTab,
-    setTabs,
-  } = useTabStore();
-
-  // Ensure the first tab is initialized with default nodes/edges
-  useEffect(() => {
-    if (
-      tabs.length === 1 &&
-      tabs[0].nodes.length === 0 &&
-      tabs[0].edges.length === 0 &&
-      (defaultNodes.length > 0 || defaultEdges.length > 0)
-    ) {
-      setTabs([
-        {
-          ...tabs[0],
-          nodes: defaultNodes,
-          edges: defaultEdges,
-        },
-      ]);
-    }
-  }, [tabs, defaultNodes, defaultEdges, setTabs]);
-
-  // Reset tabs when diagramType changes
-  useEffect(() => {
-    setTabs([
-      {
-        id: Date.now(),
-        title: diagramType.charAt(0).toUpperCase() + diagramType.slice(1) + ' Diagram',
-        nodes: defaultNodes,
-        edges: defaultEdges,
-      },
-    ]);
-    setCurrentTab(0);
-  }, [diagramType, defaultNodes, defaultEdges, setTabs, setCurrentTab]);
-
-  return (
-    <div>
-      {/* Tab Navigation - now using AppBar */}
-      <AppBar position="fixed" sx={{ bgcolor: '#1C1616', boxShadow: 2, borderBottom: '1px solid #23232a', top: 0, width: '100%', zIndex: 1000 }}>
-        <Toolbar sx={{ minHeight: 56, px: 2, display: 'flex', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <IconButton edge="start" color="inherit" aria-label="home" sx={{ mr: 2 }}>
-              <HomeIcon sx={{ color: '#fff' }} />
-            </IconButton>
-            <Tabs
-              value={currentTab}
-              onChange={(_, newValue) => setCurrentTab(newValue)}
-              textColor="inherit"
-              indicatorColor="secondary"
-              sx={{ minHeight: 40, '& .MuiTab-root': { color: '#fff', minWidth: 120, borderRadius: 2, mx: 1, bgcolor: '#23232a', fontWeight: 500 }, '& .Mui-selected': { bgcolor: '#111', color: '#fff' }, }}
-            >
-              {tabs.map((tab, index) => (
-                <Tab
-                  key={tab.id}
-                  label={
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <span>{tab.title}</span>
-                      <IconButton
-                        size="small"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTab(index);
-                        }}
-                        style={{ marginLeft: '8px', padding: '2px' }}
-                      >
-                        <CloseIcon fontSize="small" />
-                      </IconButton>
-                    </div>
-                  }
-                  sx={{ textTransform: 'none', fontSize: 16 }}
-                />
-              ))}
-            </Tabs>
-            <Button onClick={() => addTab(defaultNodes, defaultEdges)} sx={{ ml: 2, bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 2, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>
-              Add Tab
-            </Button>
-          </Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Button variant="contained" sx={{ bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 3, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>Share</Button>
-            <IconButton color="inherit">
-              <AccountCircleIcon sx={{ color: '#fff' }} />
-            </IconButton>
-          </Box>
-        </Toolbar>
-      </AppBar>
-
-      {/* Render Active Diagram */}
-      {tabs.map((tab, index) =>
-        index === currentTab ? (
-          <DiagrammingPage
-            availableFunctions={transformFunctions(availableFunctions)}
-            id={tab.id}
-            key={tab.id}
-            defaultNodes={tab.nodes as ICardNode[]}
-            defaultEdges={tab.edges}
-            diagramType={diagramType}
-            {...diagramPageProps}
-          >
-            {children}
-          </DiagrammingPage>
-        ) : null,
-      )}
-    </div>
-  );
-};
-
-export default DiagramTabs;
+import React, { useEffect } from 'react';
+import { Button, Card, IconButton, Tab, Tabs } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  DiagrammingPage,
+  DownloadPanel,
+  NodeForm,
+  PropertiesPane,
+  useDiagramEdges,
+  useDiagramId,
+  useDiagramNodes,
+  FunctionSignature,
+  FunctionParameter,
+} from '@flowuent-labs/diagrams';
+import { useTabStore } from './tabsStore'; // Import the Zustand store
+import { AddNodeView } from './components/AddNodeView';
+import { conditionBuilderData } from './node-data';
+import DiagramTypes from '../../../packages/diagrams/src/lib/types/diagram-types';
+import { AppBar, Toolbar, Box } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
+import { Edge, Node } from '@xyflow/react';
+import { Node as ReactFlowNode } from 'reactflow';
+import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
+import {
+  WorkflowNodeContentType,
+  RenderAddNodeViewType,
+  GetDefaultNodeDataType,
+  OnChangeEventHandler,
+  ConditionBuilderState,
+} from '../../../packages/diagrams/src/lib/contexts/diagramStoreTypes';
+import { AvailableVariable } from '../../../packages/diagrams/src/lib/types/available-variables';
+
+// Define the interface for diagram page props
+interface DiagramPageProps {
+  onChange?: OnChangeEventHandler;
+  availableFunctions: FunctionSignature[];
+  availableVariables?: AvailableVariable[];
+  id: number;
+  workflowNodeContent?: WorkflowNodeContentType;
+  renderAddNodeView?: RenderAddNodeViewType;
+  getDefaultNodeData?: GetDefaultNodeDataType;
+  conditionBuilderStates?: ConditionBuilderState;
+}
+
+// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
+type GenericNode = ICardNode | Node | ReactFlowNode;
+
+const NodeGetter = () => {
+  const updateTabData = useTabStore.use.updateTabData();
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const id = useDiagramId();
+  useEffect(() => {
+    //updateTabData(id, nodes, edges);
+  }, [nodes, edges, id, updateTabData]);
+
+  return <div></div>;
+};
+
+// Transform FunctionObject[] to FunctionSignature[]
+const transformFunctions = (functionObjects: Array<{
+  id: string;
+  name: string;
+  args: string[];
+  code: string;
+}>): FunctionSignature[] => {
+  return functionObjects.map(func => ({
+    id: func.id,
+    name: func.name,
+    code: func.code,
+    args: func.args.map((arg: string): FunctionParameter => ({
+      name: arg,
+      type: 'any'
+    }))
+  }));
+};
+
+const DiagramTabs = ({
+  defaultNodes,
+  defaultEdges,
+  children,
+  diagramType,
+  diagramPageProps = {},
+}: {
+  defaultNodes: GenericNode[];
+  defaultEdges: Edge[];
+  children?: React.ReactNode;
+  diagramType: DiagramTypes;
+  diagramPageProps?: Partial<DiagramPageProps>;
+}) => {
+  const {
+    tabs,
+    currentTab,
+    addTab,
+    removeTab,
+    availableFunctions,
+    setCurrentTab,
+    setTabs,
+  } = useTabStore();
+
+  // Ensure the first tab is initialized with default nodes/edges
+  useEffect(() => {
+    if (
+      tabs.length === 1 &&
+      tabs[0].nodes.length === 0 &&
+      tabs[0].edges.length === 0 &&
+      (defaultNodes.length > 0 || defaultEdges.length > 0)
+    ) {
+      setTabs([
+        {
+          ...tabs[0],
+          nodes: defaultNodes,
+          edges: defaultEdges,
+        },
+      ]);
+    }
+  }, [tabs, defaultNodes, defaultEdges, setTabs]);
+
+  // Reset tabs when diagramType changes
+  useEffect(() => {
+    setTabs([
+      {
+        id: Date.now(),
+        title: diagramType.charAt(0).toUpperCase() + diagramType.slice(1) + ' Diagram',
+        nodes: defaultNodes,
+        edges: defaultEdges,
+      },
+    ]);
+    setCurrentTab(0);
+  }, [diagramType, defaultNodes, defaultEdges, setTabs, setCurrentTab]);
+
+  return (
+    <div>
+      {/* Tab Navigation - now using AppBar */}
+      <AppBar position="fixed" sx={{ bgcolor: '#1C1616', boxShadow: 2, borderBottom: '1px solid #23232a', top: 0, width: '100%', zIndex: 1000 }}>
+        <Toolbar sx={{ minHeight: 56, px: 2, display: 'flex', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <IconButton edge="start" color="inherit" aria-label="home" sx={{ mr: 2 }}>
+              <HomeIcon sx={{ color: '#fff' }} />
+            </IconButton>
+            <Tabs
+              value={currentTab}
+              onChange={(_, newValue) => setCurrentTab(newValue)}
+              textColor="inherit"
+              indicatorColor="secondary"
+              sx={{ minHeight: 40, '& .MuiTab-root': { color: '#fff', minWidth: 120, borderRadius: 2, mx: 1, bgcolor: '#23232a', fontWeight: 500 }, '& .Mui-selected': { bgcolor: '#111', color: '#fff' }, }}
+            >
+              {tabs.map((tab, index) => (
+                <Tab
+                  key={tab.id}
+                  label={
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <span>{tab.title}</span>
+                      <IconButton
+                        size="small"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          removeTab(index);
+                        }}
+                        style={{ marginLeft: '8px', padding: '2px' }}
+                      >
+                        <CloseIcon fontSize="small" />
+                      </IconButton>
+                    </div>
+                  }
+                  sx={{ textTransform: 'none', fontSize: 16 }}
+                />
+              ))}
+            </Tabs>
+            <Button onClick={() => addTab(defaultNodes, defaultEdges)} sx={{ ml: 2, bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 2, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>
+              Add Tab
+            </Button>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Button variant="contained" sx={{ bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 3, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>Share</Button>
+            <IconButton color="inherit">
+              <AccountCircleIcon sx={{ color: '#fff' }} />
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+
+      {/* Render Active Diagram */}
+      {tabs.map((tab, index) =>
+        index === currentTab ? (
+          <DiagrammingPage
+            availableFunctions={transformFunctions(availableFunctions)}
+            id={tab.id}
+            key={tab.id}
+            defaultNodes={tab.nodes as ICardNode[]}
+            defaultEdges={tab.edges}
+            diagramType={diagramType}
+            {...diagramPageProps}
+          >
+            {children}
+          </DiagrammingPage>
+        ) : null,
+      )}
+    </div>
+  );
+};
+
+export default DiagramTabs;

package/apps/diagramming/src/Pages/DevPlayground.tsx

@@ -1,3 +1,3 @@
-export default function DevPlayground() {
-  return <></>;
-}
+export default function DevPlayground() {
+  return <></>;
+}

package/apps/diagramming/src/Pages/Home.tsx

@@ -1,112 +1,112 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Box,
-  Typography,
-  Card,
-  CardActionArea,
-  CardContent,
-} from '@mui/material';
-import {
-  RiFlowChart,
-  RiDatabase2Fill,
-  RiDraftFill,
-  RiArrowLeftRightLine,
-  RiArrowRightSLine,
-  RiFunctionLine,
-  RiUserLine,
-  RiCloudLine,
-  RiChatSmile2Line,
-  RiRobotLine,
-} from 'react-icons/ri';
-const HomePage = () => {
-  const pages = [
-
-    { path: "/flow", icon: <RiFlowChart size={40} />, label: "Flow" },
-    { path: "/erd", icon: <RiDatabase2Fill size={40} />, label: "ERD" },
-    { path: "/workflow", icon: <RiDraftFill size={40} />, label: "Workflow" },
-    { path: "/sequence", icon: <RiArrowLeftRightLine size={40} />, label: "Sequence" },
-    { path: "/stateMachine", icon: <RiFunctionLine size={40} />, label: "State Machine" },
-    { path: "/systemFlow", icon: <RiFlowChart size={40} />, label: "System Flow" },
-    { path: "/arch", icon: <RiArrowRightSLine size={40} />, label: "Arch" },
-    { path: "/case", icon: <RiUserLine size={40} />, label: "Case" },
-    { path: "/automation", icon: <RiRobotLine size={40} />, label: "Automation" },
-    // Temporarily disabled cloud architecture diagram
-    // {
-    //   path: 'cloud-architecture',
-    //   icon: <RiCloudLine size={40} />,
-    //   label: 'Cloud Architecture',
-    // },
-    {
-      path: 'collaboration',
-      icon: <RiChatSmile2Line size={40} />,
-      label: 'Collaboration',
-    },
-  ];
-
-  return (
-    <Box
-      className="container"
-      sx={{
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#f0f4f8',
-        gap: 4,
-      }}
-    >
-      <Typography
-        variant="h3"
-        sx={{ fontWeight: 'bold', color: '#333', mb: 4 }}
-      >
-        Welcome to the Dashboard
-      </Typography>
-
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-          gap: 3,
-          width: '80%',
-        }}
-      >
-        {pages.map((page, index) => (
-          <Card
-            key={index}
-            sx={{
-              borderRadius: 2,
-              boxShadow: 3,
-              ':hover': { transform: 'scale(1.05)', transition: '0.3s' },
-            }}
-          >
-            <CardActionArea component={Link} to={page.path}>
-              <CardContent
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  textAlign: 'center',
-                  padding: 3,
-                  gap: 2,
-                }}
-              >
-                {page.icon}
-                <Typography
-                  variant="h6"
-                  sx={{ fontWeight: 'medium', color: '#555' }}
-                >
-                  {page.label}
-                </Typography>
-              </CardContent>
-            </CardActionArea>
-          </Card>
-        ))}
-      </Box>
-    </Box>
-  );
-};
-
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Box,
+  Typography,
+  Card,
+  CardActionArea,
+  CardContent,
+} from '@mui/material';
+import {
+  RiFlowChart,
+  RiDatabase2Fill,
+  RiDraftFill,
+  RiArrowLeftRightLine,
+  RiArrowRightSLine,
+  RiFunctionLine,
+  RiUserLine,
+  RiCloudLine,
+  RiChatSmile2Line,
+  RiRobotLine,
+} from 'react-icons/ri';
+const HomePage = () => {
+  const pages = [
+
+    { path: "/flow", icon: <RiFlowChart size={40} />, label: "Flow" },
+    { path: "/erd", icon: <RiDatabase2Fill size={40} />, label: "ERD" },
+    { path: "/workflow", icon: <RiDraftFill size={40} />, label: "Workflow" },
+    { path: "/sequence", icon: <RiArrowLeftRightLine size={40} />, label: "Sequence" },
+    { path: "/stateMachine", icon: <RiFunctionLine size={40} />, label: "State Machine" },
+    { path: "/systemFlow", icon: <RiFlowChart size={40} />, label: "System Flow" },
+    { path: "/arch", icon: <RiArrowRightSLine size={40} />, label: "Arch" },
+    { path: "/case", icon: <RiUserLine size={40} />, label: "Case" },
+    { path: "/automation", icon: <RiRobotLine size={40} />, label: "Automation" },
+    // Temporarily disabled cloud architecture diagram
+    // {
+    //   path: 'cloud-architecture',
+    //   icon: <RiCloudLine size={40} />,
+    //   label: 'Cloud Architecture',
+    // },
+    {
+      path: 'collaboration',
+      icon: <RiChatSmile2Line size={40} />,
+      label: 'Collaboration',
+    },
+  ];
+
+  return (
+    <Box
+      className="container"
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f0f4f8',
+        gap: 4,
+      }}
+    >
+      <Typography
+        variant="h3"
+        sx={{ fontWeight: 'bold', color: '#333', mb: 4 }}
+      >
+        Welcome to the Dashboard
+      </Typography>
+
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: 3,
+          width: '80%',
+        }}
+      >
+        {pages.map((page, index) => (
+          <Card
+            key={index}
+            sx={{
+              borderRadius: 2,
+              boxShadow: 3,
+              ':hover': { transform: 'scale(1.05)', transition: '0.3s' },
+            }}
+          >
+            <CardActionArea component={Link} to={page.path}>
+              <CardContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  textAlign: 'center',
+                  padding: 3,
+                  gap: 2,
+                }}
+              >
+                {page.icon}
+                <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 'medium', color: '#555' }}
+                >
+                  {page.label}
+                </Typography>
+              </CardContent>
+            </CardActionArea>
+          </Card>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
 export default HomePage;