@flowuent-org/diagramming-core 1.0.8 → 1.1.0

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

@@ -1,38 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

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

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

@@ -1,129 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-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;