@flowuent-org/diagramming-core 1.0.5 → 1.0.7

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

@@ -43,7 +43,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
     // Get the icon component based on the iconName
     const IconComponent = getIconByName(data.iconName);
 
-    
+
 
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
@@ -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/i18n.ts

@@ -0,0 +1,42 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Import translation resources
+import translationEN from '../../locales/en/translation.json';
+
+// Initialize i18next for the diagrams library
+export const initDiagramsI18n = (customResources?: any) => {
+  // Only initialize if not already initialized
+  if (!i18n.isInitialized) {
+    i18n.use(initReactI18next).init({
+      resources: customResources || {
+        en: {
+          translation: translationEN,
+        },
+      },
+      fallbackLng: 'en',
+      debug: false,
+      interpolation: {
+        escapeValue: false,
+      },
+      // Add namespace for the library to avoid conflicts
+      defaultNS: 'translation',
+    });
+  } else if (customResources) {
+    // If already initialized, add resources to existing instance
+    Object.keys(customResources).forEach((lng) => {
+      Object.keys(customResources[lng]).forEach((ns) => {
+        i18n.addResourceBundle(lng, ns, customResources[lng][ns], true, true);
+      });
+    });
+  }
+
+  return i18n;
+};
+
+// Export translation resources for manual initialization
+export { translationEN };
+
+// Export configured i18n instance
+export default i18n;
+

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,
+    ],
+  );
+};

package/packages/diagrams/src/lib/organisms/WorkFlowNode/NodeActionButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@mui/material';
 import { WorkflowNodeActionButtons } from '../../molecules/WorkflowNodeActionButtons';
 import { ICardNode } from '../../types/card-node';
-import { useNodeType } from '../../contexts/CardDataProvider';
+import { useNodeType } from '@flowuent-labs/diagrams';
 
 interface NodeActionButtonsProps {
   addButtonVisible: boolean;