@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,385 @@
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  Dimensions,
+  Edge,
+  EdgeAddChange,
+  EdgeChange,
+  EdgeRemoveChange,
+  NodeAddChange,
+  NodeChange,
+  NodeDimensionChange,
+  NodePositionChange,
+  NodeRemoveChange,
+  NodeReplaceChange,
+} from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import _ from 'lodash';
+import {
+  Change,
+  DiagramState,
+  DiagramStore,
+  FlowElement,
+  HistoryEvent,
+  OnChangeEventHandler,
+  ResetChange,
+} from './diagramStoreTypes';
+import addToHistory from '../utils/addToHistory';
+import { produce } from 'immer';
+import { onWorkflowNodeDelete } from './onWorkflowNodeDelete';
+
+// Generic version of hasNodeDataChanged
+function hasElementDataChanged(
+  oldElement: FlowElement,
+  newElement: FlowElement,
+): {
+  hasChanged: boolean;
+  differences: Record<string, { oldValue: unknown; newValue: unknown }>;
+} {
+  // Compare data properties
+  let dataDifferences = getDetailedDifferences(
+    oldElement.data || {},
+    newElement.data || {},
+  );
+
+  // Compare non-data properties
+  let otherDifferences = getDetailedDifferences(
+    { ...oldElement, data: undefined },
+    { ...newElement, data: undefined },
+  );
+
+  // Remove height, width, and parentId differences from both comparisons
+  const filteredDataDifferences = Object.fromEntries(
+    Object.entries(dataDifferences).filter(
+      ([key]) => key !== 'height' && key !== 'width' && key !== 'parentId',
+    ),
+  );
+
+  const filteredOtherDifferences = Object.fromEntries(
+    Object.entries(otherDifferences).filter(
+      ([key]) => key !== 'height' && key !== 'width' && key !== 'parentId',
+    ),
+  );
+
+  // Combine filtered differences
+  const combinedDifferences = {
+    ...filteredDataDifferences,
+    ...filteredOtherDifferences,
+  };
+
+  return {
+    hasChanged: Object.keys(combinedDifferences).length > 0,
+    differences: combinedDifferences,
+  };
+}
+
+// Generic function to handle new element added during reset
+function handleNewElementInReset(
+  change: ResetChange,
+  elementType: 'node' | 'edge',
+): HistoryEvent {
+  return {
+    title: `New ${elementType} added during reset`,
+    forward: {
+      type: 'add',
+      t: `${elementType}-change`,
+      item: change.item,
+    } as Change,
+    backward: {
+      type: 'remove',
+      t: `${elementType}-change`,
+      id: change.item.id,
+    } as Change,
+  };
+}
+
+// Generic function to handle element data change during reset
+function handleElementDataChange(
+  change: ResetChange,
+  differences: Record<string, { oldValue: unknown; newValue: unknown }>,
+  existingElement: FlowElement,
+  elementType: 'node' | 'edge',
+): HistoryEvent {
+  return {
+    title: `${elementType} data updated`,
+    forward: {
+      type: 'replace',
+      t: `${elementType}-change`,
+      item: change.item,
+      differences,
+    } as Change,
+    backward: {
+      type: 'replace',
+      t: `${elementType}-change`,
+      item: existingElement,
+      differences,
+    } as Change,
+  };
+}
+
+// createHistoryEvent.ts
+export function createHistoryEvent(
+  change: NodeChange | EdgeChange,
+  currentElements: FlowElement[],
+  elementType: 'node' | 'edge',
+): HistoryEvent | null {
+  switch (change.type) {
+    case 'add': {
+      const addChange = change as NodeAddChange | EdgeAddChange;
+      return {
+        title: `${elementType.charAt(0).toUpperCase() + elementType.slice(1)} '${addChange.item.id}' added`,
+        forward: {
+          type: 'add',
+          t: `${elementType}-change`,
+          item: addChange.item,
+        } as Change,
+        backward: {
+          type: 'remove',
+          t: `${elementType}-change`,
+          id: addChange.item.id,
+        } as Change,
+      };
+    }
+
+    case 'remove': {
+      const removeChange = change as NodeRemoveChange | EdgeRemoveChange;
+      const element = currentElements.find((n) => n.id === removeChange.id);
+      if (!element) return null;
+
+      return {
+        title: `${elementType.charAt(0).toUpperCase() + elementType.slice(1)} '${removeChange.id}' removed`,
+        forward: {
+          type: 'remove',
+          t: `${elementType}-change`,
+          id: removeChange.id,
+        } as Change,
+        backward: {
+          type: 'add',
+          t: `${elementType}-change`,
+          item: element,
+        } as Change,
+      };
+    }
+
+    case 'position': {
+      const positionChange = change as NodePositionChange;
+      const nodes = currentElements as ICardNode[];
+      const node = nodes.find((n) => n.id === positionChange.id);
+      if (!node) return null;
+
+      return {
+        title: `Position of ${elementType} '${positionChange.id}' moved to (${positionChange.position?.x}, ${positionChange.position?.y})`,
+        forward: {
+          type: 'position',
+          t: `${elementType}-change`,
+          id: positionChange.id,
+          position: positionChange.position,
+          positionAbsolute: positionChange.position,
+        } as Change,
+        backward: {
+          type: 'position',
+          t: `${elementType}-change`,
+          id: positionChange.id,
+          position: node.position,
+          positionAbsolute: node.position,
+        } as Change,
+      };
+    }
+
+    case 'dimensions': {
+      const dimensionsChange = change as NodeDimensionChange;
+      const nodes = currentElements as ICardNode[];
+      const node = nodes.find((n) => n.id === dimensionsChange.id);
+      if (!node) return null;
+
+      return {
+        title: `Dimensions of ${elementType} '${dimensionsChange.id}' updated to width: ${dimensionsChange.dimensions?.width}, height: ${dimensionsChange.dimensions?.height}`,
+        forward: {
+          type: 'dimensions',
+          t: `${elementType}-change`,
+          id: dimensionsChange.id,
+          dimensions: dimensionsChange.dimensions,
+        } as Change,
+        backward: {
+          type: 'dimensions',
+          t: `${elementType}-change`,
+          id: dimensionsChange.id,
+          dimensions: { height: node.height, width: node.width } as Dimensions,
+        } as Change,
+      };
+    }
+
+    default:
+      return null;
+  }
+}
+
+export const onNodesChange =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    get: () => DiagramStore,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (changes: NodeChange[]) => {
+    const { nodes, edges, diagramType } = get();
+    // handling node delete logic
+    const removedEdgeChanges: EdgeRemoveChange[] = [];
+
+    changes
+      .filter((change: NodeChange) => change.type === 'remove')
+      .forEach((change: NodeChange) => {
+        const node = nodes.find(
+          (n) => n.id === (change as NodeRemoveChange).id,
+        );
+        if (!node) return null;
+        const edgesToRemove = edges.filter(
+          (edge) => edge.source === node.id || edge.target === node.id,
+        );
+        removedEdgeChanges.push(
+          ...edgesToRemove.map((edge) => ({
+            id: edge.id,
+            type: 'remove' as 'remove',
+          })),
+        );
+        if (diagramType === 'workflow') {
+          set(
+            produce((draft: DiagramState) => onWorkflowNodeDelete(node, draft)),
+          );
+        }
+      });
+    handleElementChanges('node', changes, set, get, onChange);
+    if (removedEdgeChanges.length > 0) {
+      handleElementChanges('edge', removedEdgeChanges, set, get, onChange);
+    }
+  };
+
+export const onEdgesChange =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    get: () => DiagramStore,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (changes: EdgeChange[]) => {
+    handleElementChanges('edge', changes, set, get, onChange);
+  };
+
+function handleElementChanges(
+  elementType: 'node' | 'edge',
+  changes: (NodeChange | EdgeChange)[],
+  set: (fn: (state: DiagramStore) => DiagramStore) => void,
+  get: () => DiagramStore,
+  onChange?: OnChangeEventHandler,
+) {
+  set((state: DiagramStore) => {
+    const newChanges: Change[] = [];
+    const accumulatedResetChanges: (ResetChange & { t: string })[] = [];
+    const newHistory: HistoryEvent[] = [];
+
+    const currentElements = elementType === 'node' ? get().nodes : get().edges;
+
+    changes.forEach((change) => {
+      if (change.type === 'position' || change.type === 'dimensions') {
+        return;
+      } else if (change.type === 'replace') {
+        accumulatedResetChanges.push(change as ResetChange & { t: string });
+      } else {
+        const historyEvent = createHistoryEvent(
+          change,
+          currentElements,
+          elementType,
+        );
+        if (historyEvent) {
+          newChanges.push(historyEvent.forward);
+          newHistory.push(historyEvent);
+        }
+      }
+    });
+
+    if (accumulatedResetChanges.length > 0) {
+      const [resetChangesToEmit, historyChanges] = handleAccumulatedResets(
+        accumulatedResetChanges,
+        currentElements,
+        elementType,
+      );
+
+      newChanges.push(...resetChangesToEmit);
+      newHistory.push(...historyChanges);
+    }
+
+    if (onChange && newChanges.length > 0) {
+      newChanges.forEach((change) => onChange(change));
+    }
+
+    const updatedElements =
+      elementType === 'node'
+        ? applyNodeChanges(
+            changes as NodeChange[],
+            currentElements as ICardNode[],
+          )
+        : applyEdgeChanges(changes as EdgeChange[], currentElements as Edge[]);
+
+    return {
+      ...addToHistory(state, newHistory),
+      [elementType === 'node' ? 'nodes' : 'edges']: updatedElements,
+    };
+  });
+}
+
+// Updated handleAccumulatedResets to use the new pattern
+function handleAccumulatedResets(
+  changes: (ResetChange & { t: string })[],
+  currentElements: FlowElement[],
+  elementType: 'node' | 'edge',
+): [Change[], HistoryEvent[]] {
+  const resetChangesToEmit: Change[] = [];
+  const historyEvents: HistoryEvent[] = [];
+
+  changes.forEach((change) => {
+    const existingElement = currentElements.find(
+      (n) => n.id === (change as NodeReplaceChange).item.id,
+    );
+
+    let historyEvent: HistoryEvent | null = null;
+
+    if (!existingElement) {
+      historyEvent = handleNewElementInReset(change, elementType);
+    } else {
+      const { hasChanged, differences } = hasElementDataChanged(
+        existingElement,
+        (change as ResetChange).item as FlowElement,
+      );
+
+      if (!hasChanged) return;
+
+      historyEvent = handleElementDataChange(
+        change,
+        differences,
+        existingElement,
+        elementType,
+      );
+    }
+
+    if (historyEvent) {
+      resetChangesToEmit.push(historyEvent.forward);
+      historyEvents.push(historyEvent);
+    }
+  });
+
+  return [resetChangesToEmit, historyEvents];
+}
+
+// Function to get detailed differences
+function getDetailedDifferences(
+  oldData: Record<string, unknown>,
+  newData: Record<string, unknown>,
+): Record<string, { oldValue: unknown; newValue: unknown }> {
+  return _.transform(
+    oldData,
+    (result, value, key) => {
+      if (!_.isEqual(value, newData[key])) {
+        result[key] = { oldValue: value, newValue: newData[key] };
+      }
+    },
+    {} as Record<string, { oldValue: unknown; newValue: unknown }>,
+  );
+}

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

@@ -0,0 +1,65 @@
+import { DiagramState } from './diagramStoreTypes';
+import { ICardNode } from '../types/card-node';
+
+// Helper function to handle node deletion and edge updates
+export const onWorkflowNodeDelete = (
+  node: ICardNode, // The node to be deleted
+  draft: DiagramState, // The current diagram state (edges and nodes)
+) => {
+  const { edges, nodes: allNodes } = draft;
+
+  if (node.data.branchRoot) {
+    // Find all nodes with the same branchRoot value
+    const nodesToDelete = allNodes.filter(
+      (n) => n.data.branchRoot === node.data.branchRoot,
+    );
+
+    // Remove the edges connected to these nodes
+    const nodeIdsToDelete = new Set(nodesToDelete.map((n) => n.id));
+    console.log('nodeIdsToDelete', nodeIdsToDelete);
+    // Get the previous node of the root and the next node of the final node
+    const branchRootNode = allNodes.find((n) => n.id === node.data.branchRoot);
+    const finalNode = allNodes.find((n) => n.id === node.data.finalNodeId);
+
+    if (branchRootNode && finalNode) {
+      const previousEdge = edges.find(
+        (edge) => edge.target === branchRootNode.id,
+      );
+      const nextEdge = edges.find((edge) => edge.source === finalNode.id);
+
+      // Find the next node (if exists)
+      const nextNode =
+        nextEdge && allNodes.find((n) => n.id === nextEdge.target);
+      // If there's a previous edge and a next node, update the previous edge's target to the next node's id
+      if (previousEdge && nextNode) {
+        previousEdge.target = nextNode.id;
+      }
+    }
+
+    // Remove the nodes that are part of the branch
+    draft.nodes = allNodes.filter((n) => !nodeIdsToDelete.has(n.id));
+  } else {
+    // Find the previous edge and next edge
+    const previousEdge = edges.find((edge) => edge.target === node.id);
+    const nextEdge = edges.find((edge) => edge.source === node.id);
+
+    // Find the next node (if exists)
+    const nextNode = nextEdge && allNodes.find((n) => n.id === nextEdge.target);
+
+    // If there's a previous edge and a next node, update the previous edge's target to the next node's id
+    if (previousEdge && nextNode) {
+      previousEdge.target = nextNode.id;
+    }
+
+    // If there's a next edge, remove it
+    if (nextEdge) {
+      const nextEdgeIndex = edges.findIndex((edge) => edge.id === nextEdge.id);
+      if (nextEdgeIndex !== -1) {
+        edges.splice(nextEdgeIndex, 1); // Remove the next edge from the edges array
+      }
+    }
+
+    // Remove the node from the nodes array
+    draft.nodes = allNodes.filter((n) => n.id !== node.id);
+  }
+};

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

@@ -0,0 +1,14 @@
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setContentHeight =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (id: string, height: number) => {
+    set((state) => ({
+      ...state,
+      contentHeights: state.contentHeights.some((item) => item.id === id)
+        ? state.contentHeights.map((item) =>
+            item.id === id ? { ...item, height } : item,
+          )
+        : [...state.contentHeights, { id, height }],
+    }));
+  };

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

@@ -0,0 +1,10 @@
+// diagramHandlers/setDiagramType.ts
+
+import DiagramTypes from '../types/diagram-types';
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setDiagramType =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (diagramType: DiagramTypes) => {
+    set((state) => ({ ...state, diagramType }));
+  };

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

@@ -0,0 +1,7 @@
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setEdgeShapeType =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (edgeShapeType: 'curly' | 'step') => {
+    set((state) => ({ ...state, edgeShapeType }));
+  };

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

@@ -0,0 +1,9 @@
+// diagramHandlers/setEdges.ts
+import { Edge } from '@xyflow/react';
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setEdges =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (edges: Edge[]) => {
+    set((state) => ({ ...state, edges }));
+  };

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

@@ -0,0 +1,9 @@
+import { DiagramStore, LayoutDirection } from './diagramStoreTypes';
+
+export const setLayoutDirection =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (layoutDirection: LayoutDirection) => {
+    set((state) => ({ ...state, layoutDirection }));
+  };
+
+

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

@@ -0,0 +1,17 @@
+// diagramHandlers/setNodeSetting.ts
+
+import { NodeSettings } from './diagramStoreTypes';
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setNodeSetting =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (nodeId: string, settings: Partial<NodeSettings>) => {
+    set((state) => ({
+      ...state,
+      nodes: state.nodes.map((node) =>
+        node.id === nodeId
+          ? { ...node, data: { ...node.data, ...settings } }
+          : node,
+      ),
+    }));
+  };

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

@@ -0,0 +1,10 @@
+// diagramHandlers/setNodes.ts
+
+import { ICardNode } from '../types/card-node';
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setNodes =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (nodes: ICardNode[]) => {
+    set((state) => ({ ...state, nodes }));
+  };

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

@@ -0,0 +1,7 @@
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setPannable =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (value: boolean) => {
+    set((state) => ({ ...state, pannable: value }));
+  };

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

@@ -0,0 +1,7 @@
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setSelectedEdge =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (value: string | null) => {
+    set((state) => ({ ...state, selectedEdge: value }));
+  };

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

@@ -0,0 +1,7 @@
+import { DiagramStore } from './diagramStoreTypes';
+
+export const setSelectedNode =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (value: string | null) => {
+    set((state) => ({ ...state, selectedNode: value }));
+  };