@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -14,7 +14,7 @@ import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
-import { NavigationIcon } from '../../../../../molecules/src/lib/SvgIcons/icons';
+import { NavigationIcon } from '../../icons';
 
 interface AutomationNavigationNodeProps {
     data: {

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

@@ -0,0 +1,414 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Chip, IconButton, Card, CardContent } from '@mui/material';
+import { AccessTime as AccessTimeIcon } from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { NodeActionButtons } from './NodeActionButtons';
+import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
+import { getStatusColor } from './statusColors';
+
+export interface AutomationNodeCardData {
+  label: string;
+  description: string;
+  status?: string;
+  lastRun?: string;
+  formData?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface AutomationNodeCardProps {
+  data: AutomationNodeCardData;
+  selected?: boolean;
+  icon: React.ReactNode;
+  headerText?: string;
+  aiAssistantTitle?: string;
+  branchHandles?: boolean;
+  descriptionContent?: React.ReactNode;
+}
+
+const handleSourceStyle = (selected?: boolean) => ({
+  background: selected ? '#10B981' : '#1a1a2e',
+  width: '14px',
+  height: '14px',
+  border: '3px solid #10B981',
+  opacity: selected ? 1 : 0,
+  transition: 'all 0.2s ease-in-out',
+  cursor: 'crosshair',
+  zIndex: 10,
+});
+
+const handleTargetStyle = (position: 'top' | 'bottom' | 'left' | 'right', selected?: boolean) => ({
+  background: 'transparent',
+  width: '14px',
+  height: '14px',
+  border: 'none',
+  opacity: 0,
+  pointerEvents: selected ? 'all' : 'none',
+  ...(position === 'top' && { top: '-8px' }),
+  ...(position === 'bottom' && { bottom: '-8px' }),
+  ...(position === 'left' && { left: '-8px' }),
+  ...(position === 'right' && { right: '-8px' }),
+});
+
+export const AutomationNodeCard: React.FC<AutomationNodeCardProps> = ({
+  data,
+  selected,
+  icon,
+  headerText,
+  aiAssistantTitle,
+  branchHandles = false,
+  descriptionContent,
+}) => {
+  const { t } = useTranslation();
+  const { highlightText } = useSearch();
+  const [isJsonOpen, setIsJsonOpen] = useState(false);
+  const rootRef = useRef<ReturnType<typeof createRoot> | null>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+  const nodeRef = useRef<HTMLDivElement | null>(null);
+  const nodeId = useNodeId();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+  const onNodesChange = useDiagram((state) => state.onNodesChange);
+  const nodes = useDiagram((state) => state.nodes);
+  const setNodes = useDiagram((state) => state.setNodes);
+
+  const status = data.status || 'Ready';
+  const statusColors = getStatusColor(status);
+
+  const handleJsonClick = () => {
+    if (nodeId) setSelectedNode(nodeId);
+    if (!enableJson) return;
+    setIsJsonOpen(!isJsonOpen);
+  };
+
+  const handleClose = () => {
+    setIsJsonOpen(false);
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (portalRef.current?.parentNode) {
+      document.body.removeChild(portalRef.current);
+      portalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
+        handleClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isJsonOpen]);
+
+  useEffect(() => {
+    if (!isJsonOpen) {
+      if (rootRef.current) {
+        rootRef.current.unmount();
+        rootRef.current = null;
+      }
+      if (portalRef.current?.parentNode) {
+        document.body.removeChild(portalRef.current);
+        portalRef.current = null;
+      }
+      return;
+    }
+
+    const portalRoot = document.createElement('div');
+    document.body.appendChild(portalRoot);
+    portalRef.current = portalRoot;
+
+    const root = createRoot(portalRoot);
+    rootRef.current = root;
+
+    root.render(
+      <Card
+        id="automation-json-popover"
+        sx={{
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          zIndex: 9999,
+          width: '400px',
+          height: '100vh',
+          overflow: 'auto',
+          bgcolor: '#242424',
+          color: '#fff',
+          border: '1px solid #333',
+          '&::-webkit-scrollbar': { width: '6px' },
+          '&::-webkit-scrollbar-track': { background: 'transparent' },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#444',
+            borderRadius: '3px',
+            '&:hover': { background: '#666' },
+          },
+        }}
+      >
+        <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            sx={{
+              color: '#999',
+              '&:hover': { color: '#fff', bgcolor: 'rgba(255, 255, 255, 0.1)' },
+            }}
+          >
+            <RiCloseLine />
+          </IconButton>
+          <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+            {t('automation.common.fullNodeData')}
+          </Typography>
+          <ReactJson theme="monokai" src={data.formData || data} collapsed={false} />
+        </CardContent>
+      </Card>,
+    );
+
+    return () => {
+      if (rootRef.current) {
+        rootRef.current.unmount();
+        rootRef.current = null;
+      }
+      if (portalRef.current?.parentNode) {
+        document.body.removeChild(portalRef.current);
+        portalRef.current = null;
+      }
+    };
+  }, [isJsonOpen, data, t]);
+
+  const renderHandles = () => (
+    <>
+      <Handle
+        type="source"
+        position={Position.Top}
+        id="top-source"
+        className="connection-handle"
+        style={{ ...handleSourceStyle(selected), top: '-8px' }}
+      />
+      <Handle
+        type="target"
+        position={Position.Top}
+        id="top-target"
+        style={handleTargetStyle('top', selected)}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="bottom-source"
+        className="connection-handle"
+        style={{ ...handleSourceStyle(selected), bottom: '-8px' }}
+      />
+      <Handle
+        type="target"
+        position={Position.Bottom}
+        id="bottom-target"
+        style={handleTargetStyle('bottom', selected)}
+      />
+      <Handle
+        type="source"
+        position={Position.Left}
+        id="left-source"
+        className="connection-handle"
+        style={{ ...handleSourceStyle(selected), left: '-8px' }}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="left-target"
+        style={handleTargetStyle('left', selected)}
+      />
+      {branchHandles ? (
+        <>
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="true"
+            className="connection-handle"
+            style={{ ...handleSourceStyle(selected), right: '-8px', top: '35%' }}
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="false"
+            className="connection-handle"
+            style={{ ...handleSourceStyle(selected), right: '-8px', top: '65%' }}
+          />
+          <Handle
+            type="target"
+            position={Position.Right}
+            id="right-target"
+            style={handleTargetStyle('right', selected)}
+          />
+        </>
+      ) : (
+        <>
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="right-source"
+            className="connection-handle"
+            style={{ ...handleSourceStyle(selected), right: '-8px' }}
+          />
+          <Handle
+            type="target"
+            position={Position.Right}
+            id="right-target"
+            style={handleTargetStyle('right', selected)}
+          />
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <Box sx={{ position: 'relative', width: '336px', overflow: 'visible' }}>
+      <Box
+        ref={nodeRef}
+        sx={{
+          width: '336px',
+          minHeight: '150px',
+          backgroundColor: '#181C25',
+          border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
+          borderRadius: '12px',
+          color: '#ffffff',
+          position: 'relative',
+          boxShadow: selected
+            ? '0 0 0 2px rgba(59, 130, 246, 0.5)'
+            : '0 4px 8px rgba(0, 0, 0, 0.3)',
+          transition: 'all 0.2s ease',
+          cursor: 'pointer',
+          overflow: 'hidden',
+          ...(status === 'Running' && {
+            animation: 'pulse-glow 2s ease-in-out infinite',
+            '@keyframes pulse-glow': {
+              '0%, 100%': {
+                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                borderColor: 'rgba(59, 130, 246, 0.6)',
+              },
+              '50%': {
+                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                borderColor: 'rgba(59, 130, 246, 0.9)',
+              },
+            },
+          }),
+        }}
+        onClick={handleJsonClick}
+      >
+        <Box
+          sx={{
+            backgroundColor: 'rgba(67, 93, 132, 0.1)',
+            padding: '8px 16px',
+            borderRadius: '12px 12px 0 0',
+          }}
+        >
+          <Typography variant="body2" sx={{ color: '#ffffff', fontSize: '12px', fontWeight: 500 }}>
+            {highlightText(headerText || data.description)}
+          </Typography>
+        </Box>
+
+        <Box sx={{ padding: '16px' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+              {icon}
+              <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                {highlightText(data.label)}
+              </Typography>
+            </Box>
+            <Chip
+              label={status}
+              size="small"
+              sx={{
+                backgroundColor: statusColors.bgColor,
+                color: statusColors.color,
+                fontWeight: 500,
+                fontSize: '12px',
+                height: '24px',
+                borderRadius: '12px',
+              }}
+            />
+          </Box>
+
+          <Box
+            sx={{
+              backgroundColor: '#1F2937',
+              borderRadius: '8px',
+              padding: '12px',
+              mb: 2,
+              border: '1px solid #374151',
+            }}
+          >
+            <Box
+              sx={{
+                backgroundColor: 'transparent',
+                borderRadius: '4px',
+                padding: '8px',
+                border: '1px solid #4B5563',
+                minHeight: '40px',
+                display: 'flex',
+                alignItems: descriptionContent ? 'flex-start' : 'center',
+                flexDirection: 'column',
+              }}
+            >
+              {descriptionContent ?? (
+                <Typography
+                  variant="body2"
+                  sx={{ color: '#9CA3AF', fontSize: '12px', lineHeight: 1.4, margin: 0 }}
+                >
+                  {data.description}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+
+          {data.lastRun && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
+              <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
+              <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                {t('automation.common.lastRan')}: {data.lastRun}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+
+        {renderHandles()}
+      </Box>
+
+      <NodeActionButtons
+        selected={selected}
+        onOpenAIAssistant={(buttonElement) => {
+          if (nodeId && aiAssistantTitle) {
+            showNodeAIAssistantPopup(nodeId, aiAssistantTitle, buttonElement);
+          }
+        }}
+        onDelete={() => {
+          if (nodeId && onNodesChange) {
+            onNodesChange([{ id: nodeId, type: 'remove' }]);
+          }
+        }}
+        onDuplicate={() => {
+          if (!nodeId) return;
+          const currentNode = nodes.find((n) => n.id === nodeId);
+          if (!currentNode) return;
+          setNodes([
+            ...nodes,
+            {
+              ...currentNode,
+              id: `${currentNode.id}-copy-${Date.now()}`,
+              position: {
+                x: currentNode.position.x + 50,
+                y: currentNode.position.y + 50,
+              },
+              selected: false,
+            },
+          ]);
+        }}
+      />
+    </Box>
+  );
+};