@flowuent-org/diagramming-core 1.2.0 → 1.2.2

package/packages/diagrams/src/lib/contexts/SearchContext.tsx

@@ -0,0 +1,78 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface SearchContextType {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  highlightText: (text: string) => React.ReactNode;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export const SearchProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const highlightText = (text: string): React.ReactNode => {
+    if (!searchQuery.trim() || !text) {
+      return text;
+    }
+
+    const searchLower = searchQuery.toLowerCase();
+    const textLower = String(text).toLowerCase();
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+
+    // Highlight all occurrences
+    while (index !== -1) {
+      // Add text before match
+      if (index > lastIndex) {
+        parts.push(String(text).substring(lastIndex, index));
+      }
+
+      // Add highlighted match
+      parts.push(
+        <mark
+          key={index}
+          style={{
+            backgroundColor: '#FFD700',
+            color: '#000',
+            padding: '2px 4px',
+            borderRadius: '3px',
+            fontWeight: 'bold',
+          }}
+        >
+          {String(text).substring(index, index + searchQuery.length)}
+        </mark>
+      );
+
+      lastIndex = index + searchQuery.length;
+      index = textLower.indexOf(searchLower, lastIndex);
+    }
+
+    // Add remaining text
+    if (lastIndex < String(text).length) {
+      parts.push(String(text).substring(lastIndex));
+    }
+
+    return parts.length > 0 ? <>{parts}</> : text;
+  };
+
+  return (
+    <SearchContext.Provider value={{ searchQuery, setSearchQuery, highlightText }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export const useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    return {
+      searchQuery: '',
+      setSearchQuery: () => {},
+      highlightText: (text: string) => text,
+    };
+  }
+  return context;
+};
+

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

@@ -1,76 +1,79 @@
-import React from 'react';
-import { ReactFlowProps, ReactFlowProvider } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { DiagramContent } from './DiagramContent';
-
-interface DiagramContainerProps
-  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
-  showAutomationExecutionPanel?: boolean;
-}
-
-// Default arrow marker definitions for edges
-const EdgeMarkerDefinitions = () => (
-  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
-    <defs>
-      {/* Arrow marker - Green */}
-      <marker
-        id="arrow"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
-      </marker>
-      
-      {/* Arrow marker - Blue */}
-      <marker
-        id="arrow-blue"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
-      </marker>
-      
-      {/* Arrow marker - White */}
-      <marker
-        id="arrow-white"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
-      </marker>
-      
-      {/* Circle marker */}
-      <marker
-        id="circle"
-        viewBox="0 0 10 10"
-        refX="5"
-        refY="5"
-        markerWidth="5"
-        markerHeight="5"
-      >
-        <circle cx="5" cy="5" r="4" fill="#10B981" />
-      </marker>
-    </defs>
-  </svg>
-);
-
-export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
-  return (
-    <ReactFlowProvider>
-      <EdgeMarkerDefinitions />
-      <DiagramContent {...props} />
-    </ReactFlowProvider>
-  );
-};
+import React from 'react';
+import { ReactFlowProps, ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { DiagramContent } from './DiagramContent';
+import { SearchProvider } from '../contexts/SearchContext';
+
+interface DiagramContainerProps
+  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
+  showAutomationExecutionPanel?: boolean;
+}
+
+// Default arrow marker definitions for edges
+const EdgeMarkerDefinitions = () => (
+  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <defs>
+      {/* Arrow marker - Green */}
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
+      </marker>
+      
+      {/* Arrow marker - Blue */}
+      <marker
+        id="arrow-blue"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
+      </marker>
+      
+      {/* Arrow marker - White */}
+      <marker
+        id="arrow-white"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
+      </marker>
+      
+      {/* Circle marker */}
+      <marker
+        id="circle"
+        viewBox="0 0 10 10"
+        refX="5"
+        refY="5"
+        markerWidth="5"
+        markerHeight="5"
+      >
+        <circle cx="5" cy="5" r="4" fill="#10B981" />
+      </marker>
+    </defs>
+  </svg>
+);
+
+export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
+  return (
+    <ReactFlowProvider>
+      <SearchProvider>
+        <EdgeMarkerDefinitions />
+        <DiagramContent {...props} />
+      </SearchProvider>
+    </ReactFlowProvider>
+  );
+};

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,
 };