@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,38 +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 };
+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 +1,113 @@
-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;
-
-
+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 +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;
-}
+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 +1,93 @@
-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}</>;
-};
-
-
+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 +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;
+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 +1,5 @@
-export const logger = (...params: any[]) => {
-    if (false) {
-        ;
-    }
-};
+export const logger = (...params: any[]) => {
+    if (false) {
+        ;
+    }
+};