@flowuent-org/diagramming-core 1.3.10 → 1.4.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/generateEdgesFromNodeOrder.ts

@@ -1,113 +0,0 @@
-import { Edge, MarkerType } from '@xyflow/react';
-import { ICardNode } from '../types/card-node';
-
-/**
- * Generates edges based on the order of nodes in the array.
- * Creates a linear connection from first node to last node.
- * 
- * @param nodes - Array of nodes in the desired order
- * @param options - Configuration options for edge generation
- * @returns Array of edges connecting nodes in sequence
- */
-export interface GenerateEdgesOptions {
-  /** Edge style stroke color */
-  strokeColor?: string;
-  /** Edge stroke width */
-  strokeWidth?: number;
-  /** Whether to add arrow marker at the end */
-  markerEnd?: boolean;
-  /** Whether edges should be animated */
-  animated?: boolean;
-  /** Source handle ID pattern (e.g., 'right-source', 'bottom-source') */
-  sourceHandleId?: string;
-  /** Target handle ID pattern (e.g., 'left-target', 'top-target') */
-  targetHandleId?: string;
-}
-
-const defaultOptions: GenerateEdgesOptions = {
-  strokeColor: '#10B981',
-  strokeWidth: 2,
-  markerEnd: true,
-  animated: false,
-  sourceHandleId: 'right-source',
-  targetHandleId: 'left-target',
-};
-
-export function generateEdgesFromNodeOrder(
-  nodes: ICardNode[],
-  options: GenerateEdgesOptions = {}
-): Edge[] {
-  const opts = { ...defaultOptions, ...options };
-  const edges: Edge[] = [];
-
-  // Need at least 2 nodes to create edges
-  if (nodes.length < 2) {
-    return edges;
-  }
-
-  // Create edges between consecutive nodes
-  for (let i = 0; i < nodes.length - 1; i++) {
-    const sourceNode = nodes[i];
-    const targetNode = nodes[i + 1];
-
-    const edge: Edge = {
-      id: `edge-${sourceNode.id}-${targetNode.id}`,
-      source: sourceNode.id,
-      target: targetNode.id,
-      sourceHandle: opts.sourceHandleId,
-      targetHandle: opts.targetHandleId,
-      type: 'default',
-      animated: opts.animated,
-      style: {
-        stroke: opts.strokeColor,
-        strokeWidth: opts.strokeWidth,
-      },
-    };
-
-    // Add arrow marker if enabled
-    if (opts.markerEnd) {
-      edge.markerEnd = {
-        type: MarkerType.ArrowClosed,
-        width: 20,
-        height: 20,
-        color: opts.strokeColor,
-      };
-    }
-
-    edges.push(edge);
-  }
-
-  return edges;
-}
-
-/**
- * Generates edges based on node order for automation diagrams (horizontal layout)
- */
-export function generateAutomationEdges(nodes: ICardNode[]): Edge[] {
-  return generateEdgesFromNodeOrder(nodes, {
-    strokeColor: '#10B981',
-    strokeWidth: 2,
-    markerEnd: true,
-    animated: false,
-    sourceHandleId: 'right-source',
-    targetHandleId: 'left-target',
-  });
-}
-
-/**
- * Generates edges based on node order for vertical layout diagrams
- */
-export function generateVerticalEdges(nodes: ICardNode[]): Edge[] {
-  return generateEdgesFromNodeOrder(nodes, {
-    strokeColor: '#10B981',
-    strokeWidth: 2,
-    markerEnd: true,
-    animated: false,
-    sourceHandleId: 'bottom-source',
-    targetHandleId: 'top-target',
-  });
-}
-
-export default generateEdgesFromNodeOrder;
-
-

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/highlightText.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-
-/**
- * Utility function to highlight search terms in text
- * @param text - The text to highlight
- * @param searchQuery - The search query to highlight
- * @returns React node with highlighted text
- */
-export const highlightText = (text: string, searchQuery: string): React.ReactNode => {
-  if (!searchQuery.trim() || !text) {
-    return text;
-  }
-
-  const searchLower = searchQuery.toLowerCase();
-  const textLower = text.toLowerCase();
-  const index = textLower.indexOf(searchLower);
-
-  if (index === -1) {
-    return text;
-  }
-
-  const beforeMatch = text.substring(0, index);
-  const match = text.substring(index, index + searchQuery.length);
-  const afterMatch = text.substring(index + searchQuery.length);
-
-  return (
-    <>
-      {beforeMatch}
-      <mark
-        style={{
-          backgroundColor: '#FFD700',
-          color: '#000',
-          padding: '2px 4px',
-          borderRadius: '3px',
-          fontWeight: 'bold',
-        }}
-      >
-        {match}
-      </mark>
-      {afterMatch}
-    </>
-  );
-};
-
-/**
- * Highlight all occurrences of search query in text
- */
-export const highlightAllOccurrences = (text: string, searchQuery: string): React.ReactNode => {
-  if (!searchQuery.trim() || !text) {
-    return text;
-  }
-
-  const searchLower = searchQuery.toLowerCase();
-  const textLower = text.toLowerCase();
-  const parts: React.ReactNode[] = [];
-  let lastIndex = 0;
-  let index = textLower.indexOf(searchLower, lastIndex);
-
-  while (index !== -1) {
-    // Add text before match
-    if (index > lastIndex) {
-      parts.push(text.substring(lastIndex, index));
-    }
-
-    // Add highlighted match
-    parts.push(
-      <mark
-        key={index}
-        style={{
-          backgroundColor: '#FFD700',
-          color: '#000',
-          padding: '2px 4px',
-          borderRadius: '3px',
-          fontWeight: 'bold',
-        }}
-      >
-        {text.substring(index, index + searchQuery.length)}
-      </mark>
-    );
-
-    lastIndex = index + searchQuery.length;
-    index = textLower.indexOf(searchLower, lastIndex);
-  }
-
-  // Add remaining text
-  if (lastIndex < text.length) {
-    parts.push(text.substring(lastIndex));
-  }
-
-  return <>{parts}</>;
-};
-
-

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/nodeAIAssistantConfig.ts

@@ -1,54 +0,0 @@
-/**
- * Configuration utility for Node AI Assistant
- * This allows setting a global API endpoint and headers for all node AI assistants
- */
-
-let globalApiEndpoint: string | undefined = undefined;
-let globalApiHeaders: Record<string, string> = {};
-
-/**
- * Set the global API endpoint for Node AI Assistant
- * @param endpoint - The API endpoint URL (e.g., 'https://api.example.com/chat')
- */
-export const setNodeAIAssistantEndpoint = (endpoint: string | undefined) => {
-    globalApiEndpoint = endpoint;
-};
-
-/**
- * Set global API headers for Node AI Assistant requests
- * @param headers - Headers object (e.g., { 'Authorization': 'Bearer token' })
- */
-export const setNodeAIAssistantHeaders = (headers: Record<string, string>) => {
-    globalApiHeaders = headers;
-};
-
-/**
- * Get the global API endpoint
- */
-export const getNodeAIAssistantEndpoint = (): string | undefined => {
-    return globalApiEndpoint;
-};
-
-/**
- * Get the global API headers
- */
-export const getNodeAIAssistantHeaders = (): Record<string, string> => {
-    return globalApiHeaders;
-};
-
-/**
- * Configure Node AI Assistant with endpoint and headers
- * @param config - Configuration object
- */
-export const configureNodeAIAssistant = (config: {
-    endpoint?: string;
-    headers?: Record<string, string>;
-}) => {
-    if (config.endpoint !== undefined) {
-        globalApiEndpoint = config.endpoint;
-    }
-    if (config.headers) {
-        globalApiHeaders = { ...globalApiHeaders, ...config.headers };
-    }
-};
-