@flowuent-org/diagramming-core 1.2.0 → 1.2.2

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -149,6 +149,51 @@ export const automationDefaultNodes = [
     height: 150,
     measured: { width: 336, height: 150 },
   },
+  {
+    id: 'navigation-node',
+    type: 'AutomationNavigationNode',
+    position: { x: 600, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Navigate to Website',
+      description: 'Navigate to the target website and wait for page load',
+      status: 'Ready',
+      navigationType: 'navigate',
+      url: 'https://example.com',
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+      iconName: 'Navigation',
+      // Form data for configuration
+      formData: {
+        nodeId: 'navigation-node',
+        title: 'Navigate to Website',
+        type: 'navigation',
+        navigationType: 'navigate',
+        url: 'https://example.com',
+        timeout: 30000,
+        retryCount: 3,
+        outputVariable: 'navigationResult',
+        errorHandling: {
+          onError: 'retry',
+          maxRetries: 3,
+          fallbackAction: 'skip',
+        },
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
   {
     id: 'ai-suggestion-node',
     type: 'AutomationAISuggestionNode',
@@ -504,8 +549,27 @@ export const automationDefaultEdges = [
     },
   },
   {
-    id: 'edge-api-to-formatting',
+    id: 'edge-api-to-navigation',
     source: 'api-call-node',
+    target: 'navigation-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#ffffff',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ffffff',
+    },
+  },
+  {
+    id: 'edge-navigation-to-formatting',
+    source: 'navigation-node',
     target: 'data-formatting-node',
     sourceHandle: 'right',
     targetHandle: 'left',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/src/lib/components/CanvasSearchBar.tsx

@@ -0,0 +1,281 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Box, TextField, IconButton, Typography, Paper } from '@mui/material';
+import { RiCloseLine, RiArrowUpLine, RiArrowDownLine } from 'react-icons/ri';
+import { Node } from '@xyflow/react';
+import { useSearch } from '../contexts/SearchContext';
+
+interface CanvasSearchBarProps {
+  nodes: Node[];
+  onClose: () => void;
+  onNodeSelect: (nodeId: string) => void;
+  onViewportChange: (nodeId: string) => void;
+  getViewport: () => { x: number; y: number; zoom: number };
+  setViewport: (viewport: { x: number; y: number; zoom: number }) => void;
+}
+
+export const CanvasSearchBar: React.FC<CanvasSearchBarProps> = ({
+  nodes,
+  onClose,
+  onNodeSelect,
+  onViewportChange,
+  getViewport,
+  setViewport,
+}) => {
+  const { searchQuery, setSearchQuery } = useSearch();
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+  const [matchingNodes, setMatchingNodes] = useState<Node[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when component mounts
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Search nodes when query changes
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setMatchingNodes([]);
+      setCurrentMatchIndex(0);
+      return;
+    }
+
+    const searchLower = searchQuery.toLowerCase().trim();
+    const matches = nodes.filter((node) => {
+      const label = (node.data as any)?.label?.toLowerCase() || '';
+      const id = node.id.toLowerCase();
+      const description = (node.data as any)?.description?.toLowerCase() || '';
+      return (
+        label.includes(searchLower) ||
+        id.includes(searchLower) ||
+        description.includes(searchLower)
+      );
+    });
+
+    setMatchingNodes(matches);
+    setCurrentMatchIndex(0);
+
+    // Navigate to first match if any
+    if (matches.length > 0) {
+      navigateToNode(matches[0].id);
+    }
+  }, [searchQuery, nodes]);
+
+  // Navigate to a specific node
+  const navigateToNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (!node) return;
+
+      // Center view on the node
+      const viewport = getViewport();
+      setViewport({
+        x: -node.position.x + window.innerWidth / 2 - (node.width || 0) / 2,
+        y: -node.position.y + window.innerHeight / 2 - (node.height || 0) / 2,
+        zoom: viewport.zoom,
+      });
+
+      // Select the node
+      onNodeSelect(nodeId);
+      onViewportChange(nodeId);
+    },
+    [nodes, getViewport, setViewport, onNodeSelect, onViewportChange]
+  );
+
+  // Navigate to next match
+  const handleNextMatch = useCallback(() => {
+    if (matchingNodes.length === 0) return;
+    const nextIndex = (currentMatchIndex + 1) % matchingNodes.length;
+    setCurrentMatchIndex(nextIndex);
+    navigateToNode(matchingNodes[nextIndex].id);
+  }, [matchingNodes, currentMatchIndex, navigateToNode]);
+
+  // Navigate to previous match
+  const handlePreviousMatch = useCallback(() => {
+    if (matchingNodes.length === 0) return;
+    const prevIndex =
+      currentMatchIndex === 0 ? matchingNodes.length - 1 : currentMatchIndex - 1;
+    setCurrentMatchIndex(prevIndex);
+    navigateToNode(matchingNodes[prevIndex].id);
+  }, [matchingNodes, currentMatchIndex, navigateToNode]);
+
+  // Clear search query when closing
+  const handleClose = useCallback(() => {
+    setSearchQuery('');
+    onClose();
+  }, [setSearchQuery, onClose]);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleClose();
+      } else if (event.key === 'Enter') {
+        if (event.shiftKey) {
+          handlePreviousMatch();
+        } else {
+          handleNextMatch();
+        }
+      } else if (event.key === 'ArrowDown' && event.ctrlKey) {
+        event.preventDefault();
+        handleNextMatch();
+      } else if (event.key === 'ArrowUp' && event.ctrlKey) {
+        event.preventDefault();
+        handlePreviousMatch();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClose, handleNextMatch, handlePreviousMatch]);
+
+  return (
+    <Paper
+      elevation={8}
+      sx={{
+        position: 'fixed',
+        top: 16,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 10000,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        p: 1,
+        bgcolor: '#1F2937',
+        border: '1px solid #374151',
+        borderRadius: '8px',
+        minWidth: '400px',
+        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
+      }}
+    >
+      <TextField
+        inputRef={inputRef}
+        placeholder="Search nodes..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        size="small"
+        autoFocus
+        sx={{
+          flex: 1,
+          '& .MuiOutlinedInput-root': {
+            bgcolor: '#111827',
+            color: '#fff',
+            borderRadius: '6px',
+            '& fieldset': {
+              borderColor: '#374151',
+            },
+            '&:hover fieldset': {
+              borderColor: '#4B5563',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: '#3b82f6',
+            },
+          },
+          '& .MuiInputBase-input': {
+            color: '#fff',
+            fontSize: '14px',
+            '&::placeholder': {
+              color: '#9CA3AF',
+              opacity: 1,
+            },
+          },
+        }}
+      />
+
+      {/* Match count and navigation */}
+      {searchQuery.trim() && matchingNodes.length > 0 && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            px: 1,
+            borderRight: '1px solid #374151',
+            borderLeft: '1px solid #374151',
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#9CA3AF',
+              fontSize: '12px',
+              minWidth: '50px',
+              textAlign: 'center',
+            }}
+          >
+            {currentMatchIndex + 1}/{matchingNodes.length}
+          </Typography>
+          <IconButton
+            size="small"
+            onClick={handlePreviousMatch}
+            disabled={matchingNodes.length === 0}
+            sx={{
+              color: '#9CA3AF',
+              '&:hover': {
+                bgcolor: 'rgba(255, 255, 255, 0.1)',
+                color: '#fff',
+              },
+              '&:disabled': {
+                color: '#4B5563',
+              },
+            }}
+            title="Previous match (Shift+Enter or Ctrl+↑)"
+          >
+            <RiArrowUpLine size={16} />
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={handleNextMatch}
+            disabled={matchingNodes.length === 0}
+            sx={{
+              color: '#9CA3AF',
+              '&:hover': {
+                bgcolor: 'rgba(255, 255, 255, 0.1)',
+                color: '#fff',
+              },
+              '&:disabled': {
+                color: '#4B5563',
+              },
+            }}
+            title="Next match (Enter or Ctrl+↓)"
+          >
+            <RiArrowDownLine size={16} />
+          </IconButton>
+        </Box>
+      )}
+
+      {/* No results indicator */}
+      {searchQuery.trim() && matchingNodes.length === 0 && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: '#EF4444',
+            fontSize: '12px',
+            px: 1,
+          }}
+        >
+          No matches
+        </Typography>
+      )}
+
+      {/* Close button */}
+      <IconButton
+        size="small"
+        onClick={handleClose}
+        sx={{
+          color: '#9CA3AF',
+          '&:hover': {
+            bgcolor: 'rgba(255, 255, 255, 0.1)',
+            color: '#fff',
+          },
+        }}
+        title="Close (Esc)"
+      >
+        <RiCloseLine size={18} />
+      </IconButton>
+    </Paper>
+  );
+};
+

package/packages/diagrams/src/lib/components/automation/AutomationApiNode.tsx

@@ -21,6 +21,7 @@ import { AISuggestion } from './AISuggestionsModal';
 import { AISuggestionsPanel } from './AISuggestionsPanel';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationApiNodeProps {
     data: {
@@ -60,6 +61,7 @@ interface AutomationApiNodeProps {
 
 export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
+    const { highlightText } = useSearch();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
@@ -346,7 +348,7 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                             <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                            {data.label}
+                            {highlightText(data.label)}
                         </Typography>
                     </Box>
                     <Chip
@@ -399,7 +401,7 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                             lineHeight: 1.4,
                             margin: 0
                         }}>
-                            {data.description}
+                            {highlightText(data.description)}
                         </Typography>
                     </Box>
                 </Box>

package/packages/diagrams/src/lib/components/automation/AutomationEndNode.tsx

@@ -12,6 +12,7 @@ import { AISuggestion } from './AISuggestionsModal';
 import { AISuggestionsPanel } from './AISuggestionsPanel';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationEndNodeProps {
     data: {
@@ -40,6 +41,7 @@ interface AutomationEndNodeProps {
 
 export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
+    const { highlightText } = useSearch();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
@@ -275,7 +277,7 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                             <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                            {data.label}
+                            {highlightText(data.label)}
                         </Typography>
                     </Box>
                     <Chip

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.tsx

@@ -21,6 +21,7 @@ import { AISuggestion } from './AISuggestionsModal';
 import { AISuggestionsPanel } from './AISuggestionsPanel';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationFormattingNodeProps {
     data: {
@@ -65,6 +66,7 @@ interface AutomationFormattingNodeProps {
 
 export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
+    const { highlightText } = useSearch();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
@@ -349,7 +351,7 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                             <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                            {data.label}
+                            {highlightText(data.label)}
                         </Typography>
                     </Box>
                     <Chip