@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/utils/functionGenerator.ts

@@ -0,0 +1,38 @@
+import { isValidIdentifier } from '../types/ndoe-form-types';
+
+export interface FunctionArgument {
+  name: string;
+  operator: string;
+}
+
+const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '(', ')'];
+
+export const generateFunctionCode = (args: FunctionArgument[]): string => {
+  if (args.length === 0) return '';
+
+  let code = 'return ';
+  for (let i = 0; i < args.length; i++) {
+    const argName = args[i].name.trim();
+    // Allow parentheses as pseudo-arguments (for grouping)
+    if (argName === '(' || argName === ')') {
+      code += argName;
+    } else if (isValidIdentifier(argName)) {
+      code += argName;
+    } else {
+      code += 'a'; // fallback to a valid identifier
+    }
+
+    if (i < args.length - 1) {
+      const op = args[i + 1].operator;
+      if (ARITHMETIC_OPERATORS.includes(op)) {
+        code += ' ' + op + ' ';
+      } else {
+        code += ' + ';
+      }
+    }
+  }
+  code += ';';
+  return code;
+};
+
+export { ARITHMETIC_OPERATORS };

package/packages/diagrams/src/lib/utils/helpers.types.ts

@@ -0,0 +1,10 @@
+import { IBlockType, ICardNode, ICardNodeData } from '../types/card-node';
+import { colorMap } from '../types/colors';
+
+export interface GenerateNewNodeProps {
+  title: string;
+  color: keyof typeof colorMap;
+  data: ICardNodeData;
+  nodes: ICardNode[];
+  type: IBlockType;
+}

package/packages/diagrams/src/lib/utils/iconMapper.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+// Empty icon mapping object - users will add their own icons
+const iconMap: Record<string, React.ComponentType<any>> = {};
+
+/**
+ * Get an icon component by name
+ * @param iconName - The name of the icon to retrieve
+ * @param fallbackIcon - Fallback icon component if iconName is not found
+ * @returns React component for the icon
+ */
+export const getIconByName = (
+    iconName: string | undefined,
+    fallbackIcon?: React.ComponentType<any>
+): React.ComponentType<any> => {
+    if (!iconName) {
+        return fallbackIcon || (() => <div>No Icon</div>);
+    }
+
+    // Check if the icon exists in the user-defined map
+    const IconComponent = iconMap[iconName];
+    if (IconComponent) {
+        return IconComponent;
+    }
+
+    // If not found and no fallback provided, return a placeholder
+    if (!fallbackIcon) {
+        return () => <div title={`Icon "${iconName}" not found`}>❓</div>;
+    }
+
+    return fallbackIcon;
+};
+
+/**
+ * Get all available icon names
+ * @returns Array of available icon names
+ */
+export const getAvailableIconNames = (): string[] => {
+    return Object.keys(iconMap);
+};
+
+/**
+ * Check if an icon name exists
+ * @param iconName - The name of the icon to check
+ * @returns True if the icon exists, false otherwise
+ */
+export const iconExists = (iconName: string): boolean => {
+    return iconName in iconMap;
+};
+
+/**
+ * Add a custom icon to the icon map
+ * @param iconName - The name to use for the icon
+ * @param iconComponent - The React component for the icon
+ */
+export const addCustomIcon = (iconName: string, iconComponent: React.ComponentType<any>): void => {
+    iconMap[iconName] = iconComponent;
+};
+
+/**
+ * Add multiple custom icons to the icon map
+ * @param icons - Object mapping icon names to React components
+ */
+export const addCustomIcons = (icons: Record<string, React.ComponentType<any>>): void => {
+    Object.assign(iconMap, icons);
+};
+
+/**
+ * Remove a custom icon from the icon map
+ * @param iconName - The name of the icon to remove
+ */
+export const removeCustomIcon = (iconName: string): void => {
+    delete iconMap[iconName];
+};
+
+export default iconMap;

package/packages/diagrams/src/lib/utils/logger.ts

@@ -0,0 +1,5 @@
+export const logger = (...params: any[]) => {
+    if (false) {
+        ;
+    }
+};

package/packages/diagrams/src/lib/utils/model-hooks.ts

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect } from 'react';
+import { getNodesBounds, getViewportForBounds } from '@xyflow/react';
+import { toPng } from 'html-to-image';
+import { useDiagram } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+
+export const useExportJson = (name = 'model.json') => {
+  const { getNodes, getEdges } = useCustomReactFlow();
+
+  return () => {
+    const nodes = getNodes();
+    const edges = getEdges();
+
+    const jsonData = JSON.stringify({ nodes, edges }, null, 2);
+    const blob = new Blob([jsonData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    // Create a link element to trigger the download
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+
+    // Append the link to the body and click it
+    document.body.appendChild(a);
+    a.click();
+
+    // Remove the link from the body
+    document.body.removeChild(a);
+
+    // Revoke the URL to release resources
+    URL.revokeObjectURL(url);
+  };
+};
+export const useImportJson = () => {
+  const setNodes = useDiagram((state) => state.setNodes); // Generic hook for setNodes
+  const setEdges = useDiagram((state) => state.setEdges); // Generic hook for setEdges
+
+  return (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+
+    reader.onload = function (event) {
+      try {
+        const jsonData = JSON.parse(event.target?.result as string);
+        if (!jsonData.nodes || !jsonData.edges)
+          return alert('Unsupported Json');
+        setNodes(jsonData.nodes);
+        setEdges(jsonData.edges);
+      } catch (error) {
+        console.error('Error parsing JSON:', error);
+      }
+    };
+
+    reader.readAsText(file);
+  };
+};
+export const useAttachHistoryKeyEvents = () => {
+  // Use the useDiagram hook to access actions
+  const undo = useDiagram((state) => state.undo);
+  const redo = useDiagram((state) => state.redo);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        // For Windows: Ctrl + Z for undo, Ctrl + Y for redo
+        // For Mac: Command + Z for undo, Command + Y for redo
+        if (event.key === 'z') {
+          event.preventDefault();
+          undo();
+        } else if (event.key === 'y') {
+          event.preventDefault();
+          redo();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [undo, redo]);
+};
+export const useDownload = ({
+  imageWidth = 1024,
+  imageHeight = 768,
+  name = 'preview.png',
+} = {}) => {
+  const { getNodes } = useCustomReactFlow();
+
+  return useCallback(() => {
+    const nodesBounds = getNodesBounds(getNodes());
+    const transform = getViewportForBounds(
+      nodesBounds,
+      imageWidth,
+      imageHeight,
+      0.5,
+      2,
+      0,
+    );
+
+    const reactflowEl = document.querySelector('.react-flow__viewport');
+
+    if (reactflowEl instanceof HTMLElement) {
+      const downloadImage = (dataUrl: string) => {
+        const a = document.createElement('a');
+        a.setAttribute('download', name);
+        a.setAttribute('href', dataUrl);
+        document.body.appendChild(a); // Append to body to ensure visibility in the DOM
+        a.click();
+        document.body.removeChild(a); // Clean up by removing the element after click
+      };
+
+      toPng(reactflowEl, {
+        backgroundColor: '#fff',
+        width: imageWidth,
+        height: imageHeight,
+        style: {
+          width: `${imageWidth}px`,
+          height: `${imageHeight}px`,
+          transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,
+        },
+      }).then(downloadImage);
+    } else {
+      console.error('Failed to find the react-flow viewport element.');
+    }
+  }, [imageWidth, imageHeight, name, getNodes]);
+};

package/packages/diagrams/src/lib/utils/node-hooks.ts

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import { Node } from '@xyflow/react';
+import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { ICardNode } from '../types/card-node';
+
+export const useUpdateNode = () => {
+  const { getNodes, setNodes } = useCustomReactFlow();
+
+  return useCallback(
+    (dataId: string, mutationUpdate: (node: Node) => Partial<Node>) => {
+      const newNodes = getNodes().map((node) => {
+        if (node.id === dataId) {
+          return { ...node, ...mutationUpdate(node) } as ICardNode;
+        }
+        return node;
+      });
+
+      setNodes(newNodes);
+    },
+    [getNodes, setNodes],
+  );
+};
+export const useDeleteNodeByEvent = (nodeId: string) => {
+  const deleteNode = useDeleteNode(nodeId);
+  return (e: React.KeyboardEvent<Element>) => {
+    if (e.key === 'Delete') {
+      deleteNode();
+    }
+  };
+};
+
+export const useDeleteNode = (nodeId: string) => {
+  const { getNodes, getEdges, setNodes } = useCustomReactFlow();
+
+  const deleteNode = (node_id = nodeId) => {
+    // Get all nodes to find parent-child relationships
+    const allNodes = getNodes();
+    const nodesToDelete = new Set<string>();
+
+    // Recursively find all child nodes that should be deleted along with their parents
+    const findChildNodes = (parentId: string) => {
+      const children = allNodes.filter((node) => node.parentId === parentId);
+      children.forEach((child) => {
+        if (!nodesToDelete.has(child.id)) {
+          nodesToDelete.add(child.id);
+          findChildNodes(child.id); // Recursively find grandchildren
+        }
+      });
+    };
+
+    // Add the main node to delete
+    nodesToDelete.add(node_id);
+
+    // Find children for the node to delete
+    findChildNodes(node_id);
+
+    // Handle edge-based deletions (existing logic)
+    const attachedLowerEdges = getEdges().filter((e) => e.source === node_id);
+    attachedLowerEdges.forEach((e) => {
+      if (e.type === EdgeTypes.Source2Bend || e.type === EdgeTypes.Bend2Bend)
+        deleteNode(e.target);
+    });
+
+    const attachedUpperEdges = getEdges().filter((e) => e.target === node_id);
+    attachedUpperEdges.forEach((e) => {
+      if (e.type === EdgeTypes.Bend2Target || e.type === EdgeTypes.Bend2Bend)
+        deleteNode(e.source);
+    });
+
+    // Delete all nodes at once - this will trigger onNodesChange properly
+    setNodes((currentNodes) =>
+      currentNodes.filter((node) => !nodesToDelete.has(node.id)),
+    );
+  };
+
+  return () => deleteNode(nodeId);
+};

package/packages/diagrams/src/lib/utils/nodeutils.ts

@@ -0,0 +1,242 @@
+import { Node, Position } from '@xyflow/react';
+import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
+
+// Helper function to validate a node
+const isValidNode = (node: NodeWithMeasured): boolean => {
+  return (
+    typeof node?.position?.x === 'number' &&
+    typeof node?.position?.y === 'number' &&
+    typeof node?.measured?.width === 'number' &&
+    typeof node?.measured?.height === 'number'
+  );
+};
+
+interface EdgeParams {
+  sourceX?: number;
+  sourceY?: number;
+  targetX?: number;
+  targetY?: number;
+  sourcePosition?: Position;
+  targetPosition?: Position;
+}
+
+// Helper function to sanitize parameters
+const sanitizeEdgeParams = (params: EdgeParams) => {
+  return {
+    sourceX: params.sourceX || 0,
+    sourceY: params.sourceY || 0,
+    targetX: params.targetX || 0,
+    targetY: params.targetY || 0,
+    sourcePosition: params.sourcePosition || Position.Bottom,
+    targetPosition: params.targetPosition || Position.Bottom,
+  };
+};
+
+interface NodeWithMeasured extends Node {
+  measured?: {
+    width?: number;
+    height?: number;
+  };
+  width?: number;
+  height?: number;
+}
+
+// This helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+const getNodeIntersection = (
+  intersectionNode: NodeWithMeasured,
+  targetNode: NodeWithMeasured,
+) => {
+  const intersectionNodePosition = intersectionNode.position;
+  const intersectionNodeWidth =
+    intersectionNode.width ?? intersectionNode.measured?.width ?? 0;
+  const intersectionNodeHeight =
+    intersectionNode.height ?? intersectionNode.measured?.height ?? 0;
+  const targetPosition = targetNode.position;
+
+  const w = intersectionNodeWidth ? intersectionNodeWidth / 2 : 0;
+  const h = intersectionNodeHeight ? intersectionNodeHeight / 2 : 0;
+
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + (targetNode.measured?.width || 0) / 2;
+  const y1 = targetPosition.y + (targetNode.measured?.height || 0) / 2;
+
+  const xx1 = (x1 - x2) / (2 * w || 1) - (y1 - y2) / (2 * h || 1);
+  const yy1 = (x1 - x2) / (2 * w || 1) + (y1 - y2) / (2 * h || 1);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+};
+
+// Helper function to recursively get absolute position for a node
+const getAbsolutePosition = (
+  node: Node,
+  nodes: Node[],
+): { x: number; y: number } => {
+  let x = node.position.x;
+  let y = node.position.y;
+  let current = node;
+  while (current.parentId) {
+    const parent = nodes.find((n) => n.id === current.parentId);
+    if (!parent) break;
+    x += parent.position.x;
+    y += parent.position.y;
+    current = parent;
+  }
+  return { x, y };
+};
+
+// Returns the position (top, right, bottom, or left) of the node relative to another node
+const getEdgePosition = (node: Node, otherNode: Node) => {
+  if (!isValidNode(node)) {
+    console.error('Invalid node detected in getEdgePosition', { node });
+    return Position.Bottom;
+  }
+
+  const nodeCenter = {
+    x: node.position.x + (node.measured?.width || 0) / 2,
+    y: node.position.y + (node.measured?.height || 0) / 2,
+  };
+
+  const otherCenter = {
+    x: otherNode.position.x + (otherNode.measured?.width || 0) / 2,
+    y: otherNode.position.y + (otherNode.measured?.height || 0) / 2,
+  };
+
+  // Calculate angle between nodes
+  const dx = otherCenter.x - nodeCenter.x;
+  const dy = otherCenter.y - nodeCenter.y;
+  const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+
+  // Determine the most appropriate side based on angle
+  if (angle >= -45 && angle < 45) {
+    return Position.Right;
+  } else if (angle >= 45 && angle < 135) {
+    return Position.Bottom;
+  } else if (angle >= 135 || angle < -135) {
+    return Position.Left;
+  } else {
+    return Position.Top;
+  }
+};
+
+// Returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) needed to create an edge
+export const getEdgeParams = (
+  source: Node,
+  target: Node,
+  edgeType: EdgeTypes = EdgeTypes.Default,
+  strokeWidth: number,
+  diagramType: string,
+  nodes: Node[],
+) => {
+  const isErDiagram = diagramType === 'erd';
+  const GAP_SIZE = isErDiagram ? strokeWidth * 10 : 0; // Adjust this value as needed
+
+  // Debug logging for edge calculations
+  // console.log('getEdgeParams Debug:', {
+  //   sourceId: source.id,
+  //   targetId: target.id,
+  //   diagramType,
+  //   isErDiagram,
+  //   GAP_SIZE,
+  //   strokeWidth,
+  //   sourceDimensions: {
+  //     width: source.width || source.measured?.width,
+  //     height: source.height || source.measured?.height,
+  //     position: source.position,
+  //   },
+  //   targetDimensions: {
+  //     width: target.width || target.measured?.width,
+  //     height: target.height || target.measured?.height,
+  //     position: target.position,
+  //   },
+  // });
+
+  // Use recursively calculated absolute positions
+  const adjustedSourcePosition = getAbsolutePosition(source, nodes);
+  const adjustedTargetPosition = getAbsolutePosition(target, nodes);
+
+  // Determine edge positions based on relative node positions
+  const sourcePosition = getEdgePosition(
+    { ...source, position: adjustedSourcePosition },
+    { ...target, position: adjustedTargetPosition },
+  );
+  const targetPosition = getEdgePosition(
+    { ...target, position: adjustedTargetPosition },
+    { ...source, position: adjustedSourcePosition },
+  );
+
+  // Calculate intersection points using absolute positions and determined positions
+  const sourceIntersectionPoint = getNodeIntersection(
+    { ...source, position: adjustedSourcePosition },
+    { ...target, position: adjustedTargetPosition },
+  );
+  const targetIntersectionPoint = getNodeIntersection(
+    { ...target, position: adjustedTargetPosition },
+    { ...source, position: adjustedSourcePosition },
+  );
+
+  // Adjust the intersection points based on the position
+  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Source2Bend) {
+    switch (sourcePosition) {
+      case Position.Top:
+        sourceIntersectionPoint.y -= GAP_SIZE;
+        break;
+      case Position.Right:
+        sourceIntersectionPoint.x += GAP_SIZE;
+        break;
+      case Position.Bottom:
+        sourceIntersectionPoint.y += GAP_SIZE;
+        break;
+      case Position.Left:
+        sourceIntersectionPoint.x -= GAP_SIZE;
+        break;
+    }
+  }
+
+  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Bend2Target) {
+    switch (targetPosition) {
+      case Position.Top:
+        targetIntersectionPoint.y -= GAP_SIZE;
+        break;
+      case Position.Right:
+        targetIntersectionPoint.x += GAP_SIZE;
+        break;
+      case Position.Bottom:
+        targetIntersectionPoint.y += GAP_SIZE;
+        break;
+      case Position.Left:
+        targetIntersectionPoint.x -= GAP_SIZE;
+        break;
+    }
+  }
+
+  const rawParams = {
+    sourceX: sourceIntersectionPoint.x,
+    sourceY: sourceIntersectionPoint.y,
+    targetX: targetIntersectionPoint.x,
+    targetY: targetIntersectionPoint.y,
+    sourcePosition,
+    targetPosition,
+  };
+
+  const finalParams = sanitizeEdgeParams(rawParams);
+
+  // Debug logging for final edge parameters
+  // console.log('getEdgeParams Final:', {
+  //   sourceId: source.id,
+  //   targetId: target.id,
+  //   sourceIntersectionPoint,
+  //   targetIntersectionPoint,
+  //   sourcePosition,
+  //   targetPosition,
+  //   finalParams,
+  // });
+
+  return finalParams;
+};

package/packages/diagrams/src/lib/utils/object.ts

@@ -0,0 +1,13 @@
+/**
+ * Change key -> value to value -> key pair
+ */
+export function reverseObj(
+  originalMap: Record<string, string>
+): Record<string, string> {
+  const reversedMap: Record<string, string> = {};
+  for (const key in originalMap) {
+    const value = originalMap[key];
+    reversedMap[value] = key;
+  }
+  return reversedMap;
+}

package/packages/diagrams/src/lib/utils/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;