@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/EnhancedFlowRenderer.tsx

@@ -2,9 +2,8 @@ import {
   applyNodeChanges,
   Background,
   ConnectionMode,
-  Controls,
+  ConnectionLineType,
   MarkerType,
-  MiniMap,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
@@ -25,24 +24,29 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import type { WorkflowDSL, WorkflowNodeType } from '../types';
 import {
-  appendLookupPipelineEdge,
-  createLookupCall,
-  replaceLookupCall,
-  resolveLookupCall,
-  resolveLookupPipelineConnection,
-  type ResolvedLookupCall,
-} from '../utils/lookupConnection';
+  appendForEachPipelineEdge,
+  createForEachCall,
+  isForEachReservedConnection,
+  resolveForEachCall,
+  resolveForEachPipelineConnection,
+} from '../utils/forEachConnection';
 import { withNewNodeDefaults } from '../utils/newNodeConfig';
-import { removeWorkflowEdges } from '../utils/removeWorkflowEdges';
+import { isValidMainFlowConnection } from '../utils/mainFlowConnection';
 import {
+  removeWorkflowConnections,
+  removeWorkflowNodes,
+} from '../utils/removeWorkflowEdges';
+import {
+  normalizeCanvasMainHandles,
+  resolveCanvasEdgeHandles,
   resolveLookupPorts,
   resolveRuntimePorts,
 } from '../utils/resolveLookupPorts';
 import { resolveOutputLabels, resolveOutputs } from '../utils/resolveOutputs';
 import { CustomNode } from './CustomNode';
+import { CanvasZoomControls } from './CanvasZoomControls';
 import { DeletableEdge } from './DeletableEdge';
 import { ExecutionStatusNode } from './ExecutionStatusNode';
-import { LookupConnectionDialog } from './LookupConnectionDialog';
 
 interface NodeExecution {
   id: string;
@@ -72,6 +76,7 @@ interface EnhancedFlowRendererProps {
   onDslChange?: (dsl: WorkflowDSL) => void;
   // New props for execution status
   nodeExecutions?: NodeExecution[];
+  reusedNodeIds?: string[];
   showExecutionStatus?: boolean;
 }
 
@@ -98,6 +103,7 @@ function EnhancedFlowCanvas({
   onNodeClick,
   onDslChange,
   nodeExecutions,
+  reusedNodeIds,
   showExecutionStatus,
 }: EnhancedFlowRendererProps) {
   const { t } = useTranslation('workflow');
@@ -106,7 +112,6 @@ function EnhancedFlowCanvas({
   dslRef.current = dsl;
   const containerRef = useRef<HTMLDivElement>(null);
   const hasSetViewport = useRef(false);
-  const [pendingLookup, setPendingLookup] = useState<ResolvedLookupCall>();
   const [selectedEdgeId, setSelectedEdgeId] = useState<string>();
 
   const deleteEdges = useCallback(
@@ -114,10 +119,7 @@ function EnhancedFlowCanvas({
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange || readonly || showExecutionStatus)
         return;
-      onDslChange({
-        ...currentDsl,
-        edges: removeWorkflowEdges(currentDsl.edges, [edgeId]),
-      });
+      onDslChange(removeWorkflowConnections(currentDsl, [edgeId]));
       setSelectedEdgeId(undefined);
     },
     [onDslChange, readonly, showExecutionStatus],
@@ -132,6 +134,10 @@ function EnhancedFlowCanvas({
     });
     return map;
   }, [nodeExecutions]);
+  const reusedNodeSet = useMemo(
+    () => new Set(reusedNodeIds ?? []),
+    [reusedNodeIds],
+  );
 
   const { nodes, edges } = useMemo(() => {
     if (!dsl) return { nodes: [] as Node[], edges: [] as Edge[] };
@@ -156,7 +162,7 @@ function EnhancedFlowCanvas({
         category,
         type: n.type,
         outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
-        outputLabels: resolveOutputLabels(n),
+        outputLabels: resolveOutputLabels(n, t),
         lookupPorts,
         runtimePorts: resolveRuntimePorts(n),
         isSelected: n.id === selectedNodeId,
@@ -172,6 +178,9 @@ function EnhancedFlowCanvas({
             execution.finishedAt,
           );
           nodeData.error = execution.error;
+        } else if (reusedNodeSet.has(n.id)) {
+          nodeData.executionStatus = 'COMPLETED';
+          nodeData.executionStatusLabel = t('instanceDetail.reusedResult');
         } else {
           nodeData.executionStatus = 'NOT_EXECUTED';
         }
@@ -186,42 +195,37 @@ function EnhancedFlowCanvas({
       };
     });
 
-    const rfEdges: Edge[] = dsl.edges.map((e) => ({
-      id: e.id,
-      selected: e.id === selectedEdgeId,
-      source: e.source,
-      target: e.target,
-      sourceHandle: e.sourceHandle,
-      targetHandle: e.targetHandle,
-      label:
+    const rfEdges: Edge[] = dsl.edges.map((e) => {
+      const selected = e.id === selectedEdgeId;
+      const canvasHandles = resolveCanvasEdgeHandles(dsl, e);
+      const stroke =
         e.kind === 'CALL'
-          ? t('edge.call')
-          : e.kind === 'RETURN'
-            ? (e.label ?? t('edge.return'))
-            : e.kind === 'DATA'
-              ? `${e.sourcePath ?? 'data'} → ${e.targetHandle ?? 'input'}`
+          ? '#fa8c16'
+          : e.kind === 'RETURN' || selected
+            ? '#1677ff'
+            : '#8c8c8c';
+      return {
+        id: e.id,
+        selected,
+        source: e.source,
+        target: e.target,
+        sourceHandle: canvasHandles.sourceHandle,
+        targetHandle: canvasHandles.targetHandle,
+        label:
+          e.kind === 'CALL'
+            ? (e.label ?? t('edge.call'))
+            : e.kind === 'RETURN'
+              ? (e.label ?? t('edge.return'))
               : e.label,
-      type: 'deletable',
-      data: {
-        onDelete: readonly || showExecutionStatus ? undefined : deleteEdges,
-      },
-      markerEnd:
-        e.kind === 'CALL' || e.kind === 'RETURN'
-          ? {
-              type: MarkerType.ArrowClosed,
-              color: e.kind === 'CALL' ? '#fa8c16' : '#1677ff',
-            }
-          : undefined,
-      animated: showExecutionStatus ? false : e.kind !== 'DATA',
-      style:
-        e.kind === 'CALL'
-          ? { stroke: '#fa8c16', strokeWidth: 2 }
-          : e.kind === 'RETURN'
-            ? { stroke: '#1677ff', strokeWidth: 2 }
-            : e.kind === 'DATA'
-              ? { stroke: '#1677ff', strokeDasharray: '6 4' }
-              : undefined,
-    }));
+        type: 'deletable',
+        data: {
+          onDelete: readonly || showExecutionStatus ? undefined : deleteEdges,
+        },
+        markerEnd: { type: MarkerType.ArrowClosed, color: stroke },
+        animated: selected && !showExecutionStatus,
+        style: { stroke, strokeWidth: selected ? 2.5 : 1.6 },
+      };
+    });
 
     return { nodes: rfNodes, edges: rfEdges };
   }, [
@@ -230,6 +234,7 @@ function EnhancedFlowCanvas({
     selectedNodeId,
     selectedEdgeId,
     executionMap,
+    reusedNodeSet,
     showExecutionStatus,
     readonly,
     deleteEdges,
@@ -269,14 +274,12 @@ function EnhancedFlowCanvas({
       const removeChanges = changes.filter((c) => c.type === 'remove');
 
       if (removeChanges.length > 0) {
-        const removedIds = new Set(
-          removeChanges.map((c) => (c as any).id as string),
-        );
-        const newNodes = currentDsl.nodes.filter((n) => !removedIds.has(n.id));
-        const newEdges = currentDsl.edges.filter(
-          (e) => !removedIds.has(e.source) && !removedIds.has(e.target),
+        onDslChange(
+          removeWorkflowNodes(
+            currentDsl,
+            removeChanges.map((change) => (change as any).id as string),
+          ),
         );
-        onDslChange({ nodes: newNodes, edges: newEdges });
       } else if (positionChanged) {
         const newNodes = currentDsl.nodes.map((n) => {
           const rfNode = updatedRfNodes.find((rn) => rn.id === n.id);
@@ -305,11 +308,12 @@ function EnhancedFlowCanvas({
 
       const removeChanges = changes.filter((c) => c.type === 'remove');
       if (removeChanges.length > 0) {
-        const newEdges = removeWorkflowEdges(
-          currentDsl.edges,
-          removeChanges.map((change) => (change as any).id as string),
+        onDslChange(
+          removeWorkflowConnections(
+            currentDsl,
+            removeChanges.map((change) => (change as any).id as string),
+          ),
         );
-        onDslChange({ ...currentDsl, edges: newEdges });
       }
     },
     [onDslChange],
@@ -319,28 +323,32 @@ function EnhancedFlowCanvas({
     (connection: Connection) => {
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange) return;
+      connection = normalizeCanvasMainHandles(connection);
 
-      const lookup = resolveLookupCall(currentDsl, connection);
-      if (lookup) {
-        setPendingLookup(lookup);
+      const forEachCall = resolveForEachCall(currentDsl, connection);
+      if (forEachCall) {
+        onDslChange({
+          ...currentDsl,
+          edges: [...currentDsl.edges, createForEachCall(forEachCall)],
+        });
         return;
       }
-      const pipelineEdge = resolveLookupPipelineConnection(
+      const forEachPipelineEdge = resolveForEachPipelineConnection(
         currentDsl,
         connection,
       );
-      if (pipelineEdge) {
+      if (forEachPipelineEdge) {
         onDslChange({
           ...currentDsl,
-          edges: appendLookupPipelineEdge(currentDsl.edges, pipelineEdge),
+          edges: appendForEachPipelineEdge(
+            currentDsl.edges,
+            forEachPipelineEdge,
+          ),
         });
         return;
       }
-      if (
-        connection.sourceHandle?.startsWith('lookup:') ||
-        connection.targetHandle?.startsWith('approver:')
-      )
-        return;
+      if (isForEachReservedConnection(currentDsl, connection)) return;
+      if (!isValidMainFlowConnection(currentDsl, connection)) return;
       const newEdge = {
         id: `e-${connection.source}-${connection.target}-${Date.now()}`,
         source: connection.source!,
@@ -360,15 +368,13 @@ function EnhancedFlowCanvas({
   const isValidConnection = useCallback((connection: Edge | Connection) => {
     const currentDsl = dslRef.current;
     if (!currentDsl) return false;
-    if (resolveLookupCall(currentDsl, connection as Connection)) return true;
-    if (resolveLookupPipelineConnection(currentDsl, connection as Connection))
+    connection = normalizeCanvasMainHandles(connection);
+    if (resolveForEachCall(currentDsl, connection as Connection)) return true;
+    if (resolveForEachPipelineConnection(currentDsl, connection as Connection))
       return true;
-    const sourceHandle = connection.sourceHandle ?? '';
-    const targetHandle = connection.targetHandle ?? '';
-    return (
-      !sourceHandle.startsWith('lookup:') &&
-      !targetHandle.startsWith('approver:')
-    );
+    if (isForEachReservedConnection(currentDsl, connection as Connection))
+      return false;
+    return isValidMainFlowConnection(currentDsl, connection);
   }, []);
 
   const onDragOver = useCallback((event: React.DragEvent) => {
@@ -380,7 +386,7 @@ function EnhancedFlowCanvas({
     (event: React.DragEvent) => {
       event.preventDefault();
       const currentDsl = dslRef.current;
-      if (!onDslChange) return;
+      if (!onDslChange || readonly || showExecutionStatus) return;
 
       const data = event.dataTransfer.getData('application/workflow-node-type');
       if (!data) return;
@@ -419,7 +425,9 @@ function EnhancedFlowCanvas({
       const newNode = {
         id: crypto.randomUUID(),
         type: nodeType.type,
-        label: nodeType.label,
+        label: t(`nodeTypes.${nodeType.type}`, {
+          defaultValue: nodeType.label,
+        }),
         position,
         config: withNewNodeDefaults(nodeType.type, initialConfig),
       };
@@ -429,16 +437,25 @@ function EnhancedFlowCanvas({
         : { nodes: [newNode], edges: [] };
 
       onDslChange(newDsl);
+      onNodeClick?.(newNode.id);
     },
-    [reactFlowInstance, onDslChange],
+    [
+      reactFlowInstance,
+      onDslChange,
+      onNodeClick,
+      readonly,
+      showExecutionStatus,
+      t,
+    ],
   );
 
   if (!dsl || dsl.nodes.length === 0) {
     return (
       <div
+        className="workflow-canvas"
         style={{ width: '100%', height: '100%' }}
-        onDragOver={onDragOver}
-        onDrop={onDrop}
+        onDragOver={readonly || showExecutionStatus ? undefined : onDragOver}
+        onDrop={readonly || showExecutionStatus ? undefined : onDrop}
       >
         <ReactFlow
           nodes={[]}
@@ -446,34 +463,54 @@ function EnhancedFlowCanvas({
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
           fitView
-          onDragOver={onDragOver}
-          onDrop={onDrop}
+          fitViewOptions={{ padding: 0.18, minZoom: 0.2, maxZoom: 1 }}
+          minZoom={0.2}
+          maxZoom={2}
+          onDragOver={readonly || showExecutionStatus ? undefined : onDragOver}
+          onDrop={readonly || showExecutionStatus ? undefined : onDrop}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          deleteKeyCode={null}
         >
-          <Background />
-          <Controls showInteractive={false} />
+          <Background
+            gap={22}
+            size={1}
+            color="var(--ant-color-border-secondary)"
+          />
+          <CanvasZoomControls />
         </ReactFlow>
       </div>
     );
   }
 
   return (
-    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+    <div
+      ref={containerRef}
+      className="workflow-canvas"
+      style={{ width: '100%', height: '100%' }}
+    >
       <ReactFlow
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
+        minZoom={0.2}
+        maxZoom={2}
+        onNodesChange={readonly ? undefined : onNodesChange}
+        onEdgesChange={readonly ? undefined : onEdgesChange}
+        onConnect={readonly ? undefined : onConnect}
         isValidConnection={isValidConnection}
-        onDragOver={onDragOver}
-        onDrop={onDrop}
-        nodesDraggable={!showExecutionStatus}
-        nodesConnectable={!showExecutionStatus}
+        onDragOver={readonly ? undefined : onDragOver}
+        onDrop={readonly ? undefined : onDrop}
+        nodesDraggable={!readonly && !showExecutionStatus}
+        nodesConnectable={!readonly && !showExecutionStatus}
         elementsSelectable={true}
-        connectionMode={ConnectionMode.Loose}
-        deleteKeyCode={['Backspace', 'Delete']}
+        connectionMode={ConnectionMode.Strict}
+        connectionLineType={ConnectionLineType.Bezier}
+        connectionLineStyle={{ stroke: '#1677ff', strokeWidth: 2 }}
+        deleteKeyCode={
+          readonly || showExecutionStatus ? null : ['Backspace', 'Delete']
+        }
         panOnScroll={true}
         zoomOnScroll={false}
         zoomOnPinch={false}
@@ -491,48 +528,13 @@ function EnhancedFlowCanvas({
           onNodeClick?.('');
         }}
       >
-        <Background />
-        <Controls showInteractive={false} />
-        <MiniMap
-          nodeColor={(node) => {
-            const category = (node.data as any)?.category || 'ACTION';
-            const colors: Record<string, string> = {
-              TRIGGER: '#91caff',
-              ACTION: '#b7eb8f',
-              CONDITION: '#ffd591',
-              FLOW_CONTROL: '#d3adf7',
-              APPROVAL: '#ffa39e',
-              SUB_WORKFLOW: '#adc6ff',
-            };
-            return colors[category] || '#b7eb8f';
-          }}
-          nodeStrokeWidth={3}
-          maskColor="rgba(240, 240, 240, 0.6)"
-          zoomable
-          pannable
+        <Background
+          gap={22}
+          size={1}
+          color="var(--ant-color-border-secondary)"
         />
+        <CanvasZoomControls />
       </ReactFlow>
-      <LookupConnectionDialog
-        open={Boolean(pendingLookup)}
-        apPortLabel={pendingLookup?.apPortLabel}
-        httpNodeLabel={pendingLookup?.httpNode.label}
-        onCancel={() => setPendingLookup(undefined)}
-        onConfirm={() => {
-          const currentDsl = dslRef.current;
-          if (pendingLookup && currentDsl && onDslChange) {
-            const call = createLookupCall(pendingLookup);
-            onDslChange({
-              ...currentDsl,
-              edges: replaceLookupCall(
-                currentDsl.edges,
-                pendingLookup,
-                call.edge,
-              ),
-            });
-          }
-          setPendingLookup(undefined);
-        }}
-      />
     </div>
   );
 }

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExecutionStatusNode.test.tsx

@@ -6,28 +6,52 @@ import '../../../i18n';
 import { ExecutionStatusNode } from './ExecutionStatusNode';
 
 describe('ExecutionStatusNode', () => {
-  it('renders the named handles used by lookup pipeline edges', () => {
+  it('does not render a hidden IN handle for trigger nodes', () => {
+    const { container } = render(
+      <ReactFlowProvider>
+        <ExecutionStatusNode
+          {...({
+            id: 'trigger-1',
+            data: {
+              label: '业务事件触发',
+              category: 'TRIGGER',
+              type: 'event_trigger',
+              isSelected: false,
+              readonly: true,
+            },
+          } as any)}
+        />
+      </ReactFlowProvider>,
+    );
+
+    expect(container.querySelector('.react-flow__handle.target')).toBeNull();
+    expect(
+      container.querySelector('.react-flow__handle.source'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the named handles used by the For Each pipeline', () => {
     const { container } = render(
       <ReactFlowProvider>
         <ExecutionStatusNode
           {...({
             id: 'node-1',
             data: {
-              label: '审批人查询',
-              category: 'ACTION',
-              type: 'code',
+              label: '循环处理',
+              category: 'FLOW_CONTROL',
+              type: 'for_each',
               isSelected: false,
               readonly: true,
               lookupPorts: [
                 {
-                  id: 'approver:dynamic_user_groups',
-                  label: 'User groups IN',
+                  id: 'end',
+                  label: '本项结果 IN',
                   direction: 'input',
                   kind: 'RETURN',
                 },
                 {
-                  id: 'lookup:dynamic_user_groups',
-                  label: 'Find user groups OUT',
+                  id: 'start',
+                  label: '每一项 OUT',
                   direction: 'output',
                   kind: 'CALL',
                 },
@@ -51,15 +75,36 @@ describe('ExecutionStatusNode', () => {
       container.querySelector('[data-handleid="response-out"].source'),
     ).toBeInTheDocument();
     expect(
-      container.querySelector(
-        '[data-handleid="approver:dynamic_user_groups"].target',
-      ),
+      container.querySelector('[data-handleid="end"].target'),
     ).toBeInTheDocument();
     expect(
-      container.querySelector(
-        '[data-handleid="lookup:dynamic_user_groups"].source',
-      ),
+      container.querySelector('[data-handleid="start"].source'),
+    ).toBeInTheDocument();
+    expect(container).toHaveTextContent('循环处理');
+  });
+
+  it('renders a cancelled node with a neutral terminal state', () => {
+    const { container } = render(
+      <ReactFlowProvider>
+        <ExecutionStatusNode
+          {...({
+            id: 'node-1',
+            data: {
+              label: '人工审批',
+              category: 'APPROVAL',
+              type: 'approval',
+              isSelected: false,
+              readonly: true,
+              executionStatus: 'CANCELLED',
+            },
+          } as any)}
+        />
+      </ReactFlowProvider>,
+    );
+
+    expect(
+      container.querySelector('.anticon-close-circle'),
     ).toBeInTheDocument();
-    expect(container).toHaveTextContent('代码处理节点');
+    expect(container.firstElementChild).toHaveStyle({ background: '#f5f5f5' });
   });
 });