@flowuent-org/diagramming-core 1.2.1 → 1.2.2

package/packages/diagrams/src/lib/templates/DiagramContent.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { ConnectionMode, ReactFlow, ReactFlowProps, NodeChange, applyNodeChanges } from '@xyflow/react';
+import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import { ConnectionMode, ReactFlow, ReactFlowProps, NodeChange, applyNodeChanges, useReactFlow, Node } from '@xyflow/react';
 import { useTriggerEvent } from '../utils/event-hooks';
 import { IBlock, ICardNodeData } from '../types/card-node';
 import {
@@ -45,6 +45,7 @@ import CollaborationDiagram from './collaborationDiagram/CollaborationDiagram';
 import Header from '../components/Header';
 import { PaneMouseHandler } from '../utils/event-store';
 import { AutomationExecutionPanel } from '../components/automation/AutomationExecutionPanel';
+import { CanvasSearchBar } from '../components/CanvasSearchBar';
 
 interface DiagramContentProps
   extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
@@ -85,7 +86,117 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
   const canUndo = useCanUndo();
   const canRedo = useCanRedo();
 
-  // Handle keyboard shortcuts for undo/redo
+  // Zoom hooks - get zoom functions from ReactFlow
+  const { zoomIn, zoomOut, fitView, setViewport, getViewport, getNodes } = useReactFlow();
+
+  // Search bar state
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
+  // Clipboard state for copy/paste
+  const [copiedNode, setCopiedNode] = useState<Node | null>(null);
+  
+  // Rename state
+  const [renamingNodeId, setRenamingNodeId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+
+  // Filter out hidden nodes for ReactFlow rendering
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(node => !node.data?.isHidden);
+  }, [nodes]);
+
+  // Search canvas functionality - opens search bar
+  const handleSearchCanvas = useCallback(() => {
+    setShowSearchBar(true);
+  }, []);
+
+  // Copy selected node
+  const handleCopyNode = useCallback(() => {
+    const nodeToCopy = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToCopy) {
+      setCopiedNode(nodeToCopy);
+    }
+  }, [visibleNodes, selectedNode]);
+
+  // Paste node
+  const handlePasteNode = useCallback(() => {
+    if (!copiedNode) return;
+    
+    const newNode = {
+      ...copiedNode,
+      id: `${copiedNode.id}-copy-${Date.now()}`,
+      position: {
+        x: copiedNode.position.x + 50,
+        y: copiedNode.position.y + 50,
+      },
+      selected: false,
+    };
+    
+    setNodes([...nodes, newNode as any]);
+    setSelectedNode(newNode.id);
+  }, [copiedNode, nodes, setNodes, setSelectedNode]);
+
+  // Delete selected node
+  const handleDeleteNode = useCallback(() => {
+    const nodeToDelete = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToDelete && onNodesChange) {
+      onNodesChange([{ id: nodeToDelete.id, type: 'remove' }]);
+      setSelectedNode(null);
+    }
+  }, [visibleNodes, selectedNode, onNodesChange, setSelectedNode]);
+
+  // Rename node
+  const handleRenameNode = useCallback(() => {
+    const nodeToRename = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToRename) {
+      setRenamingNodeId(nodeToRename.id);
+      setRenameValue((nodeToRename.data as any)?.label || nodeToRename.id);
+    }
+  }, [visibleNodes, selectedNode]);
+
+  // Save rename
+  const handleSaveRename = useCallback(() => {
+    if (!renamingNodeId || !renameValue.trim()) {
+      setRenamingNodeId(null);
+      return;
+    }
+
+    const updatedNodes = nodes.map(node => {
+      if (node.id === renamingNodeId) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            label: renameValue.trim(),
+          },
+        };
+      }
+      return node;
+    });
+
+    setNodes(updatedNodes);
+    setRenamingNodeId(null);
+    setRenameValue('');
+  }, [renamingNodeId, renameValue, nodes, setNodes]);
+
+  // Cancel rename
+  const handleCancelRename = useCallback(() => {
+    setRenamingNodeId(null);
+    setRenameValue('');
+  }, []);
+
+  // Edit node (open node configuration/form)
+  const handleEditNode = useCallback(() => {
+    const nodeToEdit = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToEdit) {
+      // For automation nodes, we can trigger a double-click or open a form
+      // This will depend on the specific node type implementation
+      // For now, we'll just ensure the node is selected and could trigger a modal
+      setSelectedNode(nodeToEdit.id);
+      // You can add specific edit logic here based on node type
+    }
+  }, [visibleNodes, selectedNode, setSelectedNode]);
+
+  // Handle keyboard shortcuts for undo/redo and zoom
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       // Don't trigger if user is typing in an input field
@@ -115,18 +226,116 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
           redo();
         }
       }
+
+      // + or = for Zoom In (handles both + key and = key with shift)
+      if (event.key === '+' || event.key === '=') {
+        event.preventDefault();
+        zoomIn();
+      }
+
+      // - for Zoom Out
+      if (event.key === '-') {
+        event.preventDefault();
+        zoomOut();
+      }
+
+      // 0 for Reset Zoom (reset to zoom level 1)
+      if (event.key === '0' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        const viewport = getViewport();
+        setViewport({ x: viewport.x, y: viewport.y, zoom: 1 });
+      }
+
+      // 1 for Fit to View
+      if (event.key === '1' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        fitView();
+      }
+
+      // Ctrl+G or Cmd+G for Search Canvas (toggle search bar)
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'g' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        if (showSearchBar) {
+          // Close search bar if already open
+          setShowSearchBar(false);
+        } else {
+          // Open search bar
+          handleSearchCanvas();
+        }
+      }
+
+      // Ctrl+C or Cmd+C for Copy selected node
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'c' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        handleCopyNode();
+      }
+
+      // Ctrl+V or Cmd+V for Paste node
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'v' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        handlePasteNode();
+      }
+
+      // Delete key for Delete selected node
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        if (selectedNode || visibleNodes.some(node => node.selected)) {
+          event.preventDefault();
+          handleDeleteNode();
+        }
+      }
+
+      // F2 for Rename node
+      if (event.key === 'F2') {
+        event.preventDefault();
+        handleRenameNode();
+      }
+
+      // Enter for Edit node
+      if (event.key === 'Enter' && !event.shiftKey) {
+        if (selectedNode || visibleNodes.some(node => node.selected)) {
+          event.preventDefault();
+          handleEditNode();
+        }
+      }
+
+      // Escape to cancel rename
+      if (event.key === 'Escape' && renamingNodeId) {
+        event.preventDefault();
+        handleCancelRename();
+      }
+
+      // Enter to save rename
+      if (event.key === 'Enter' && renamingNodeId) {
+        event.preventDefault();
+        handleSaveRename();
+      }
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [undo, redo, canUndo, canRedo]);
-
-  // Filter out hidden nodes for ReactFlow rendering
-  const visibleNodes = useMemo(() => {
-    return nodes.filter(node => !node.data?.isHidden);
-  }, [nodes]);
+  }, [
+    undo, redo, canUndo, canRedo, zoomIn, zoomOut, fitView, setViewport, getViewport,
+    handleSearchCanvas, showSearchBar, handleCopyNode, handlePasteNode, handleDeleteNode,
+    handleRenameNode, handleEditNode, handleSaveRename, handleCancelRename,
+    selectedNode, visibleNodes, renamingNodeId
+  ]);
 
   // Filter out edges connected to hidden nodes
   const visibleEdges = useMemo(() => {
@@ -214,58 +423,6 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
     setActiveCard,
   });
 
-  // Handle keyboard deletion of selected nodes (only for automation diagram)
-  useEffect(() => {
-    if (diagramType !== 'automation') return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Check if Delete or Backspace key is pressed
-      if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Don't trigger deletion if user is typing in an input field
-        if (
-          event.target instanceof HTMLInputElement ||
-          event.target instanceof HTMLTextAreaElement ||
-          (event.target as any)?.isContentEditable
-        ) {
-          return;
-        }
-
-        // Check if a node is selected (either from store or ReactFlow's selection)
-        const selectedNodeId = selectedNode || visibleNodes.find(node => node.selected)?.id;
-        
-        if (selectedNodeId) {
-          event.preventDefault();
-          event.stopPropagation();
-          
-          // Find the node to delete
-          const nodeToDelete = nodes.find((node) => node.id === selectedNodeId);
-          if (!nodeToDelete) return;
-
-          // Create a remove change for the node
-          const nodeChanges: NodeChange[] = [
-            {
-              id: selectedNodeId,
-              type: 'remove',
-            },
-          ];
-
-          // Apply the changes through onNodesChange (which handles edge cleanup)
-          onNodesChange(nodeChanges);
-
-          // Clear the selected node
-          setSelectedNode(null);
-        }
-      }
-    };
-
-    // Add event listener
-    document.addEventListener('keydown', handleKeyDown);
-
-    // Cleanup on unmount
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [diagramType, selectedNode, nodes, visibleNodes, onNodesChange, setSelectedNode]);
 
   const renderDynamicDiagram = () => {
     if (diagramType === 'sequence') {
@@ -540,6 +697,64 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
       onDragCancel={onDragCancel}
       sensors={sensors}
     >
+      {/* Canvas Search Bar - Available for all diagram types */}
+      {showSearchBar && (
+        <CanvasSearchBar
+          nodes={visibleNodes}
+          onClose={() => setShowSearchBar(false)}
+          onNodeSelect={setSelectedNode}
+          onViewportChange={(nodeId) => {
+            // Viewport change is handled inside CanvasSearchBar
+          }}
+          getViewport={getViewport}
+          setViewport={setViewport}
+        />
+      )}
+
+      {/* Rename Input - Appears when F2 is pressed */}
+      {renamingNodeId && (() => {
+        const nodeToRename = visibleNodes.find(n => n.id === renamingNodeId);
+        if (!nodeToRename) return null;
+        const viewport = getViewport();
+        return (
+          <Box
+            sx={{
+              position: 'fixed',
+              top: `${nodeToRename.position.y * viewport.zoom + viewport.y + 20}px`,
+              left: `${nodeToRename.position.x * viewport.zoom + viewport.x + 20}px`,
+              zIndex: 1000,
+              backgroundColor: '#1e293b',
+              border: '2px solid #3b82f6',
+              borderRadius: '8px',
+              padding: '8px 12px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            <input
+              type="text"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleSaveRename();
+                } else if (e.key === 'Escape') {
+                  handleCancelRename();
+                }
+              }}
+              onBlur={handleSaveRename}
+              autoFocus
+              style={{
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: '#fff',
+                fontSize: '14px',
+                outline: 'none',
+                width: '200px',
+              }}
+            />
+          </Box>
+        );
+      })()}
       {renderDynamicDiagram()}
     </DndContext>
   );

package/packages/diagrams/src/lib/types/automation-node-data-types.ts

@@ -2,7 +2,7 @@
 export interface AutomationNodeFormData {
   nodeId: string;
   title: string;
-  type: 'start' | 'api' | 'formatting' | 'sheets' | 'end';
+  type: 'start' | 'api' | 'formatting' | 'sheets' | 'end' | 'navigation';
   isPinned?: boolean;
   isBlock?: boolean;
   blocks?: Array<{
@@ -245,12 +245,32 @@ export interface AutomationEndNodeForm extends AutomationNodeFormData {
   };
 }
 
+export interface AutomationNavigationNodeForm extends AutomationNodeFormData {
+  type: 'navigation';
+  navigationType: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
+  url?: string;
+  selector?: string;
+  action?: string;
+  waitTime?: number;
+  scrollDirection?: 'up' | 'down' | 'to-element';
+  extractSelector?: string;
+  outputVariable?: string;
+  timeout?: number;
+  retryCount?: number;
+  errorHandling?: {
+    onError: 'stop' | 'retry' | 'continue';
+    maxRetries?: number;
+    fallbackAction?: 'skip' | 'log' | 'notify';
+  };
+}
+
 export type AutomationNodeForm =
   | AutomationStartNodeForm
   | AutomationApiNodeForm
   | AutomationFormattingNodeForm
   | AutomationSheetsNodeForm
-  | AutomationEndNodeForm;
+  | AutomationEndNodeForm
+  | AutomationNavigationNodeForm;
 
 // Automation Workflow Data Structure
 export interface AutomationWorkflowData {

package/packages/diagrams/src/lib/types/node-types.ts

@@ -10,6 +10,7 @@ import {
   AutomationSheetsNode,
   AutomationEndNode,
   AutomationNoteNode,
+  AutomationNavigationNode,
   AutomationAISuggestionNode,
 } from '../components/automation';
 
@@ -25,5 +26,6 @@ export default {
   AutomationSheetsNode,
   AutomationEndNode,
   AutomationNoteNode,
+  AutomationNavigationNode,
   AutomationAISuggestionNode,
 };

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

@@ -0,0 +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}</>;
+};
+
+

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

@@ -0,0 +1,54 @@
+/**
+ * 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 };
+    }
+};
+