@flowuent-org/diagramming-core 1.0.5 → 1.0.6

package/packages/diagrams/project.json

@@ -15,8 +15,7 @@
         "entryFile": "packages/diagrams/src/index.ts",
         "external": ["react", "react-dom", "react/jsx-runtime"],
         "rollupConfig": "packages/diagrams/rollup.config.js",
-        "compiler": "swc",
-        "skipTypeCheck": false,
+        "compiler": "babel",
         "assets": [
           {
             "glob": "packages/diagrams/README.md",

package/packages/diagrams/rollup.config.js

@@ -1,31 +1,26 @@
-const getRollupOptions = require('@nx/react/plugins/bundle-rollup');
-const preserveDirectives = require('rollup-preserve-directives').default;
-
-module.exports = (options) => {
-  // Get the default Nx Rollup options
-  const nxRollupOptions = getRollupOptions(options);
-
-  // Enable tree shaking
-  nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
-
-  // Filter out rollup-plugin-typescript2 (rpt2) which has path issues on Windows
-  // But keep @rollup/plugin-typescript if it exists
-  nxRollupOptions.plugins = (Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : [])
-    .filter(plugin => {
-      // Remove rollup-plugin-typescript2 (rpt2) - it has cross-platform path issues
-      return !(plugin && plugin.name === 'rpt2');
-    });
-
-  // Add the preserveDirectives plugin  
-  nxRollupOptions.plugins.push(preserveDirectives());
-
-  // Externalize MUI packages
-  nxRollupOptions.external = [
-    ...(Array.isArray(nxRollupOptions.external) ? nxRollupOptions.external : []),
-    '@mui/material',
-    '@mui/icons-material',
-    /^@mui\/icons-material\/.*/,
-  ];
-
-  return nxRollupOptions;
-};
+const getRollupOptions = require('@nx/react/plugins/bundle-rollup');
+const preserveDirectives = require('rollup-preserve-directives').default;
+
+module.exports = (options) => {
+  // Get the default Nx Rollup options
+  const nxRollupOptions = getRollupOptions(options);
+
+  // Enable tree shaking
+  nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
+
+  // Add the preserveDirectives plugin to the existing plugins
+  nxRollupOptions.plugins = [
+    ...(Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : []),
+    preserveDirectives(),
+  ];
+
+  // Externalize MUI packages
+  nxRollupOptions.external = [
+    ...(Array.isArray(nxRollupOptions.external) ? nxRollupOptions.external : []),
+    '@mui/material',
+    '@mui/icons-material',
+    /^@mui\/icons-material\/.*/,
+  ];
+
+  return nxRollupOptions;
+};

package/packages/diagrams/src/lib/atoms/CardEditableTitle.tsx

@@ -1,76 +1,76 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, TextField } from '@mui/material';
-import { ICardNode } from '../types/card-node';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-import { useNodeId, useNodeTitle } from '../contexts/CardDataProvider';
-
-export const CardEditableTitle = React.memo(() => {
-  const title = useNodeTitle()
-  const nodeId = useNodeId()
-  const { getNodes, setNodes } = useCustomReactFlow();
-  const [text, setText] = useState(title);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (title !== text) setText(title);
-  }, [title]);
-
-  const changeTitle = useCallback(
-    (val: string) => {
-      const prevNodes = [...getNodes()] as ICardNode[];
-      const newNodes: ICardNode[] = prevNodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, title: val },
-          };
-        } else return node;
-      });
-      setNodes(newNodes);
-    },
-    [getNodes, setNodes, nodeId],
-  );
-
-  const handleSave = useCallback(() => {
-    changeTitle(text ?? '');
-  }, [text, changeTitle]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSave();
-      } else if (e.key === 'Escape') {
-        setText(title);
-      }
-    },
-    [handleSave, title],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        my: 1,
-        backgroundColor: '#6B04F1',
-        borderRadius: '3px',
-      }}
-    >
-      <TextField
-        size={'small'}
-        inputProps={{
-          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
-        }}
-        variant="outlined"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        inputRef={inputRef}
-        fullWidth
-      />
-    </Box>
-  );
-});
-
-export default CardEditableTitle;
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, TextField } from '@mui/material';
+import { ICardNode } from '../types/card-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { useNodeId, useNodeTitle } from '@flowuent-labs/diagrams';
+
+export const CardEditableTitle = React.memo(() => {
+  const title = useNodeTitle()
+  const nodeId = useNodeId()
+  const { getNodes, setNodes } = useCustomReactFlow();
+  const [text, setText] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (title !== text) setText(title);
+  }, [title]);
+
+  const changeTitle = useCallback(
+    (val: string) => {
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, title: val },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    },
+    [getNodes, setNodes, nodeId],
+  );
+
+  const handleSave = useCallback(() => {
+    changeTitle(text ?? '');
+  }, [text, changeTitle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSave();
+      } else if (e.key === 'Escape') {
+        setText(title);
+      }
+    },
+    [handleSave, title],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        my: 1,
+        backgroundColor: '#6B04F1',
+        borderRadius: '3px',
+      }}
+    >
+      <TextField
+        size={'small'}
+        inputProps={{
+          style: { fontSize: '18px', fontWeight: 'bold', textAlign: 'center', color: '#fff' },
+        }}
+        variant="outlined"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        inputRef={inputRef}
+        fullWidth
+      />
+    </Box>
+  );
+});
+
+export default CardEditableTitle;

package/packages/diagrams/src/lib/components/automation/AutomationApiNode.tsx

@@ -278,6 +278,19 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -322,8 +335,16 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
+                                : data.status === 'Running'
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
+                                : data.status === 'Running'
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',
@@ -370,7 +391,7 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                     {t('automation.apiNode.additionalInfo')}
                 </Typography>
 
-                {(data.formData?.executionResult || data.formData?.schemaMatch) && (
+                {data.status === 'Completed' && (data.formData?.executionResult || data.formData?.schemaMatch) && (
                     <>
                         {/* Schema Row */}
                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>

package/packages/diagrams/src/lib/components/automation/AutomationEndNode.tsx

@@ -207,6 +207,19 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -251,8 +264,16 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed' 
+                                ? 'rgba(37, 99, 235, 0.1)' 
+                                : data.status === 'Running'
+                                ? 'rgba(251, 191, 36, 0.1)'
+                                : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed' 
+                                ? '#93C5FD' 
+                                : data.status === 'Running'
+                                ? '#FCD34D'
+                                : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.tsx

@@ -282,6 +282,19 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -326,8 +339,16 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed' 
+                                ? 'rgba(37, 99, 235, 0.1)' 
+                                : data.status === 'Running'
+                                ? 'rgba(251, 191, 36, 0.1)'
+                                : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed' 
+                                ? '#93C5FD' 
+                                : data.status === 'Running'
+                                ? '#FCD34D'
+                                : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',
@@ -408,7 +429,7 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                     </Box>
                 </Box>
 
-                {(data.formData?.executionResult || data.formData?.schemaMatch) && (
+                {data.status === 'Completed' && (data.formData?.executionResult || data.formData?.schemaMatch) && (
                     <>
                         {/* Schema Row */}
                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>

package/packages/diagrams/src/lib/components/automation/AutomationStartNode.tsx

@@ -208,6 +208,19 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                 transition: 'all 0.2s ease',
                 cursor: 'pointer',
                 overflow: 'hidden',
+                ...(data.status === 'Running' && {
+                    animation: 'pulse-glow 2s ease-in-out infinite',
+                    '@keyframes pulse-glow': {
+                        '0%, 100%': {
+                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                        },
+                        '50%': {
+                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                        },
+                    },
+                }),
             }}
             onClick={handleJsonClick}
         >
@@ -252,8 +265,16 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                            color: '#86EFAC',
+                            backgroundColor: data.status === 'Completed' 
+                                ? 'rgba(37, 99, 235, 0.1)' 
+                                : data.status === 'Running'
+                                ? 'rgba(251, 191, 36, 0.1)'
+                                : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed' 
+                                ? '#93C5FD' 
+                                : data.status === 'Running'
+                                ? '#FCD34D'
+                                : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

package/packages/diagrams/src/lib/contexts/onWorkflowNodeDelete.ts

@@ -1,5 +1,5 @@
 import { DiagramState } from './diagramStoreTypes';
-import { ICardNode } from '../types/card-node';
+import { ICardNode } from '@flowuent-labs/diagrams';
 
 // Helper function to handle node deletion and edge updates
 export const onWorkflowNodeDelete = (

package/packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.tsx

@@ -1,119 +1,121 @@
-import { Edge } from '@xyflow/react';
-import { closestPoint } from '../../utils/closestPoint';
-import { DiagramStore } from '../../contexts/DiagramProvider';
-import { EdgeTypes } from './custom-edge.type';
-import { HistoryEvent } from '../../types/history-event';
-import { ICardNode } from '../../types/card-node';
-import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
-import { useDiagram } from '../../contexts/DiagramProvider';
-import React, { useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import addToHistory from '../../utils/addToHistory';
-
-export const useCreateBendPoint = (
-  currentEdge: Edge,
-  sourceNode: ICardNode,
-  targetNode: ICardNode,
-  pathRef: React.RefObject<SVGPathElement>,
-) => {
-  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
-    useCustomReactFlow();
-  const store = useDiagram<DiagramStore>();
-  const { diagramType, nodes, edges, setStore } = store;
-
-  return useCallback(
-    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
-      if (diagramType === 'workflow') {
-        return;
-      }
-      evt.preventDefault();
-      evt.stopPropagation();
-      if (!pathRef.current) return;
-
-      const position = screenToFlowPosition({
-        x: evt.clientX,
-        y: evt.clientY,
-      });
-      const cpoint = closestPoint(pathRef.current, [position.x, position.y]);
-      if (!currentEdge || !sourceNode || !targetNode)
-        throw new Error(
-          'Invalid Edge found with source, target or curr edge missing',
-        );
-
-      const nodesAndEdgesBefore = {
-        nodes: [...nodes],
-        edges: [...edges],
-      };
-      const nodeId = uuidv4();
-      const newBendPoint: ICardNode = {
-        id: nodeId,
-        position: { x: cpoint[0], y: cpoint[1] },
-        data: { nodeId: nodeId },
-        type: 'bendPoint',
-      };
-      const newEdge: Edge = {
-        id: uuidv4(),
-        source: newBendPoint.id,
-        target: currentEdge.target,
-        type:
-          currentEdge.type === EdgeTypes.Default ||
-            currentEdge.type === EdgeTypes.Bend2Target
-            ? EdgeTypes.Bend2Target
-            : EdgeTypes.Bend2Bend,
-      };
-      newEdge.markerEnd =
-        newEdge.type === EdgeTypes.Bend2Target
-          ? currentEdge.markerEnd
-          : undefined;
-      currentEdge.target = newBendPoint.id;
-      currentEdge.type =
-        currentEdge.type === EdgeTypes.Default ||
-          currentEdge.type === EdgeTypes.Source2Bend
-          ? EdgeTypes.Source2Bend
-          : EdgeTypes.Bend2Bend;
-      delete currentEdge.markerEnd;
-      currentEdge.markerStart =
-        currentEdge.type === EdgeTypes.Source2Bend
-          ? currentEdge.markerStart
-          : undefined;
-
-      const newEdges = [
-        ...edges.filter((e) => e.id !== currentEdge.id),
-        currentEdge,
-        newEdge,
-      ];
-      const newNodes = [...nodes, newBendPoint];
-      const nodesAndEdgesAfter = {
-        nodes: newNodes,
-        edges: newEdges,
-      };
-
-      const event: HistoryEvent = {
-        forward: {
-          t: 'complex-change',
-          type: 'complex',
-          nodesAndEdges: nodesAndEdgesAfter,
-        },
-        backward: {
-          t: 'complex-change',
-          type: 'complex',
-          nodesAndEdges: nodesAndEdgesBefore,
-        },
-        title: 'Bend point created in the middle of ' + currentEdge.id,
-      };
-      setStore({
-        ...addToHistory(store, [event]),
-        ...nodesAndEdgesAfter,
-      });
-    },
-    [
-      pathRef.current,
-      currentEdge.id,
-      getEdge,
-      setEdges,
-      addNodes,
-      sourceNode,
-      targetNode,
-    ],
-  );
-};
+import { Edge } from '@xyflow/react';
+import {
+  closestPoint,
+  DiagramStore,
+  EdgeTypes,
+  HistoryEvent,
+  ICardNode,
+  useCustomReactFlow,
+  useDiagram,
+} from '@flowuent-labs/diagrams';
+import React, { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import addToHistory from '../../utils/addToHistory';
+
+export const useCreateBendPoint = (
+  currentEdge: Edge,
+  sourceNode: ICardNode,
+  targetNode: ICardNode,
+  pathRef: React.RefObject<SVGPathElement>,
+) => {
+  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
+    useCustomReactFlow();
+  const store = useDiagram<DiagramStore>();
+  const { diagramType, nodes, edges, setStore } = store;
+
+  return useCallback(
+    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
+      if (diagramType === 'workflow') {
+        return;
+      }
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (!pathRef.current) return;
+
+      const position = screenToFlowPosition({
+        x: evt.clientX,
+        y: evt.clientY,
+      });
+      const cpoint = closestPoint(pathRef.current, [position.x, position.y]);
+      if (!currentEdge || !sourceNode || !targetNode)
+        throw new Error(
+          'Invalid Edge found with source, target or curr edge missing',
+        );
+
+      const nodesAndEdgesBefore = {
+        nodes: [...nodes],
+        edges: [...edges],
+      };
+      const nodeId = uuidv4();
+      const newBendPoint: ICardNode = {
+        id: nodeId,
+        position: { x: cpoint[0], y: cpoint[1] },
+        data: { nodeId: nodeId },
+        type: 'bendPoint',
+      };
+      const newEdge: Edge = {
+        id: uuidv4(),
+        source: newBendPoint.id,
+        target: currentEdge.target,
+        type:
+          currentEdge.type === EdgeTypes.Default ||
+            currentEdge.type === EdgeTypes.Bend2Target
+            ? EdgeTypes.Bend2Target
+            : EdgeTypes.Bend2Bend,
+      };
+      newEdge.markerEnd =
+        newEdge.type === EdgeTypes.Bend2Target
+          ? currentEdge.markerEnd
+          : undefined;
+      currentEdge.target = newBendPoint.id;
+      currentEdge.type =
+        currentEdge.type === EdgeTypes.Default ||
+          currentEdge.type === EdgeTypes.Source2Bend
+          ? EdgeTypes.Source2Bend
+          : EdgeTypes.Bend2Bend;
+      delete currentEdge.markerEnd;
+      currentEdge.markerStart =
+        currentEdge.type === EdgeTypes.Source2Bend
+          ? currentEdge.markerStart
+          : undefined;
+
+      const newEdges = [
+        ...edges.filter((e) => e.id !== currentEdge.id),
+        currentEdge,
+        newEdge,
+      ];
+      const newNodes = [...nodes, newBendPoint];
+      const nodesAndEdgesAfter = {
+        nodes: newNodes,
+        edges: newEdges,
+      };
+
+      const event: HistoryEvent = {
+        forward: {
+          t: 'complex-change',
+          type: 'complex',
+          nodesAndEdges: nodesAndEdgesAfter,
+        },
+        backward: {
+          t: 'complex-change',
+          type: 'complex',
+          nodesAndEdges: nodesAndEdgesBefore,
+        },
+        title: 'Bend point created in the middle of ' + currentEdge.id,
+      };
+      setStore({
+        ...addToHistory(store, [event]),
+        ...nodesAndEdgesAfter,
+      });
+    },
+    [
+      pathRef.current,
+      currentEdge.id,
+      getEdge,
+      setEdges,
+      addNodes,
+      sourceNode,
+      targetNode,
+    ],
+  );
+};