@flowuent-org/diagramming-core 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/src/index.ts

@@ -95,6 +95,7 @@ export * from './lib/utils/object';
 export * from './lib/utils/nodeutils';
 export * from './lib/utils/utilities';
 export * from './lib/utils/vhToPixels';
+export * from './lib/utils/nodeOrderByEdges';
 export * from './lib/assets/markers/markers.param';
 export * from './lib/assets/markers/markers.type';
 export * from './lib/organisms/Card/card.params';

package/packages/diagrams/src/lib/contexts/DiagramProvider.tsx

@@ -8,6 +8,7 @@ import { ICardNode } from '../types/card-node';
 import { setPannable } from './setPannable';
 import { setSelectedNode } from './setSelectedNode';
 import { onConnect } from './onConnect';
+import { onReconnect } from './onReconnect';
 import { setNodes } from './setNodes';
 import { setEdges } from './setEdges';
 import { setContentHeight } from './setContentHeight';
@@ -99,6 +100,9 @@ const createDiagramStore = ({
             goToHistoryIndex(set, get as () => DiagramStore, index),
           onConnect: (connection: Connection) =>
             onConnect(set, onChange)(connection),
+          onReconnect: (oldEdge: Edge, newConnection: Connection) => {
+            onReconnect(set, onChange)(oldEdge, newConnection);
+          },
           setNodes: (nodes: ICardNode[]) => {
             setNodes(set)(nodes);
           },
@@ -373,3 +377,16 @@ export const useEditFunction = (): ((func: FunctionSignature) => void) =>
 
 export const useDeleteFunction = (): ((id: string) => void) =>
   useDiagram((state) => state.deleteFunction);
+
+// Undo/Redo hooks
+export const useUndo = (): (() => void) =>
+  useDiagram((state) => state.undo);
+
+export const useRedo = (): (() => void) =>
+  useDiagram((state) => state.redo);
+
+export const useCanUndo = (): boolean =>
+  useDiagram((state) => state.historyIndex >= 0);
+
+export const useCanRedo = (): boolean =>
+  useDiagram((state) => state.historyIndex < state.history.length - 1);

package/packages/diagrams/src/lib/contexts/diagramStoreTypes.tsx

@@ -90,6 +90,7 @@ export interface DiagramActions {
   onNodesChange: (changes: NodeChange[]) => void;
   onEdgesChange: (changes: EdgeChange[]) => void;
   onConnect: (connection: Connection) => void;
+  onReconnect: (oldEdge: Edge, newConnection: Connection) => void;
   setNodes: (nodes: ICardNode[]) => void;
   setEdges: (edges: Edge[]) => void;
   setContentHeight: (id: string, height: number) => void;

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

@@ -0,0 +1,59 @@
+// onReconnect.ts
+import { Edge, Connection } from '@xyflow/react';
+import { DiagramStore, OnChangeEventHandler } from './diagramStoreTypes';
+
+export const onReconnect =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (oldEdge: Edge, newConnection: Connection) => {
+    if (!newConnection.source || !newConnection.target) {
+      // If connection is invalid, remove the edge
+      set((state) => {
+        const updatedEdges = state.edges.filter((edge) => edge.id !== oldEdge.id);
+        return { ...state, edges: updatedEdges };
+      });
+
+      if (onChange) {
+        onChange({
+          t: 'edge-change',
+          type: 'remove',
+          id: oldEdge.id,
+          message: 'Edge disconnected',
+        });
+      }
+      return;
+    }
+
+    set((state) => {
+      // Manually update the edge with new connection
+      const updatedEdges = state.edges.map((edge) => {
+        if (edge.id === oldEdge.id) {
+          return {
+            ...edge,
+            source: newConnection.source,
+            target: newConnection.target,
+            sourceHandle: newConnection.sourceHandle || edge.sourceHandle,
+            targetHandle: newConnection.targetHandle || edge.targetHandle,
+          };
+        }
+        return edge;
+      });
+
+      const reconnectedEdge = updatedEdges.find((edge) => edge.id === oldEdge.id);
+
+      if (onChange && reconnectedEdge) {
+        onChange({
+          t: 'edge-change',
+          type: 'replace',
+          id: reconnectedEdge.id,
+          item: reconnectedEdge,
+          message: 'Edge reconnected',
+        });
+      }
+
+      return { ...state, edges: updatedEdges };
+    });
+  };
+