@gadmin2n/schematics 0.0.78 → 0.0.80

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

@@ -0,0 +1,388 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  ConnectionMode,
+  useReactFlow,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeChange,
+  type EdgeChange,
+  applyNodeChanges,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { CustomNode } from './CustomNode';
+import { ExecutionStatusNode } from './ExecutionStatusNode';
+import type { WorkflowDSL, WorkflowNodeType } from '../types';
+
+interface NodeExecution {
+  id: string;
+  nodeId: string;
+  nodeType: string;
+  nodeLabel: string | null;
+  status: string;
+  input: any;
+  output: any;
+  error: any;
+  startedAt: string | null;
+  finishedAt: string | null;
+}
+
+const nodeTypes = { custom: CustomNode, executionStatus: ExecutionStatusNode };
+
+interface EnhancedFlowRendererProps {
+  dsl: WorkflowDSL | null;
+  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  selectedNodeId?: string | null;
+  readonly?: boolean;
+  onNodeClick?: (nodeId: string) => void;
+  onDslChange?: (dsl: WorkflowDSL) => void;
+  // New props for execution status
+  nodeExecutions?: NodeExecution[];
+  showExecutionStatus?: boolean;
+}
+
+function formatDuration(
+  startedAt: string | null,
+  finishedAt: string | null,
+): string {
+  if (!startedAt) return '';
+  const endTime = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+  const ms = endTime - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem.toFixed(0)}s` : `${m}m`;
+}
+
+function EnhancedFlowCanvas({
+  dsl,
+  nodeTypeMap,
+  selectedNodeId,
+  readonly,
+  onNodeClick,
+  onDslChange,
+  nodeExecutions,
+  showExecutionStatus,
+}: EnhancedFlowRendererProps) {
+  const reactFlowInstance = useReactFlow();
+  const dslRef = useRef(dsl);
+  dslRef.current = dsl;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasSetViewport = useRef(false);
+
+  // Build execution map: nodeId -> execution record
+  const executionMap = useMemo(() => {
+    if (!nodeExecutions) return {};
+    const map: Record<string, NodeExecution> = {};
+    nodeExecutions.forEach((exec) => {
+      map[exec.nodeId] = exec;
+    });
+    return map;
+  }, [nodeExecutions]);
+
+  const { nodes, edges } = useMemo(() => {
+    if (!dsl) return { nodes: [] as Node[], edges: [] as Edge[] };
+
+    const rfNodes: Node[] = dsl.nodes.map((n) => {
+      const category = nodeTypeMap?.[n.type]?.category || 'ACTION';
+      // Transpose x/y for vertical (top-to-bottom) layout
+      // Scale y down to compress vertical spacing (original x-step=250 → 120)
+      // Add y offset so top node isn't clipped
+      const position = { x: n.position.y * 1.5, y: n.position.x * 0.5 + 20 };
+
+      // Get execution status for this node
+      const execution = executionMap[n.id];
+      const nodeType = showExecutionStatus ? 'executionStatus' : 'custom';
+
+      const nodeData: any = {
+        label: n.label,
+        category,
+        isSelected: n.id === selectedNodeId,
+        readonly: !!readonly,
+      };
+
+      // Add execution status data — show NOT_EXECUTED for nodes without records
+      if (showExecutionStatus) {
+        if (execution) {
+          nodeData.executionStatus = execution.status;
+          nodeData.duration = formatDuration(
+            execution.startedAt,
+            execution.finishedAt,
+          );
+          nodeData.error = execution.error;
+        } else {
+          nodeData.executionStatus = 'NOT_EXECUTED';
+        }
+      }
+
+      return {
+        id: n.id,
+        type: nodeType,
+        position,
+        measured: { width: 140, height: 40 },
+        selected: n.id === selectedNodeId,
+        data: nodeData,
+      };
+    });
+
+    const rfEdges: Edge[] = dsl.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle,
+      label: e.label,
+      type: 'smoothstep',
+      animated: showExecutionStatus ? false : true, // Disable animation when showing execution
+    }));
+
+    return { nodes: rfNodes, edges: rfEdges };
+  }, [dsl, nodeTypeMap, selectedNodeId, executionMap, showExecutionStatus]);
+
+  // Set viewport once before first paint: horizontal center + vertical top padding
+  useLayoutEffect(() => {
+    if (!hasSetViewport.current && containerRef.current && nodes.length > 0) {
+      const containerWidth = containerRef.current.clientWidth;
+      let minX = Infinity,
+        maxX = -Infinity;
+      nodes.forEach((n) => {
+        const w = n.measured?.width || 140;
+        minX = Math.min(minX, n.position.x);
+        maxX = Math.max(maxX, n.position.x + w);
+      });
+      const contentWidth = maxX - minX;
+      const x = (containerWidth - contentWidth) / 2 - minX;
+      reactFlowInstance.setViewport({ x, y: 0, zoom: 1 });
+      hasSetViewport.current = true;
+    }
+  }, [nodes, reactFlowInstance]);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      // Apply changes to get new node positions
+      const updatedRfNodes = applyNodeChanges(changes, nodes);
+
+      // Check if any position actually changed
+      const positionChanged = changes.some(
+        (c) => c.type === 'position' && c.position,
+      );
+      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({ nodes: newNodes, edges: newEdges });
+      } else if (positionChanged) {
+        const newNodes = currentDsl.nodes.map((n) => {
+          const rfNode = updatedRfNodes.find((rn) => rn.id === n.id);
+          if (rfNode && rfNode.position) {
+            // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+            return {
+              ...n,
+              position: {
+                x: (rfNode.position.y - 20) / 0.5,
+                y: rfNode.position.x / 1.5,
+              },
+            };
+          }
+          return n;
+        });
+        onDslChange({ ...currentDsl, nodes: newNodes });
+      }
+    },
+    [nodes, onDslChange],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      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 newEdges = currentDsl.edges.filter((e) => !removedIds.has(e.id));
+        onDslChange({ ...currentDsl, edges: newEdges });
+      }
+    },
+    [onDslChange],
+  );
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      const newEdge = {
+        id: `e-${connection.source}-${connection.target}-${Date.now()}`,
+        source: connection.source!,
+        target: connection.target!,
+        sourceHandle: connection.sourceHandle || undefined,
+        label: undefined,
+      };
+      onDslChange({
+        ...currentDsl,
+        edges: [...currentDsl.edges, newEdge],
+      });
+    },
+    [onDslChange],
+  );
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      const currentDsl = dslRef.current;
+      if (!onDslChange) return;
+
+      const data = event.dataTransfer.getData('application/workflow-node-type');
+      if (!data) return;
+
+      let nodeType: WorkflowNodeType;
+      try {
+        nodeType = JSON.parse(data);
+      } catch {
+        return;
+      }
+
+      const flowPosition = reactFlowInstance.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+      const position = {
+        x: (flowPosition.y - 20) / 0.5,
+        y: flowPosition.x / 1.5,
+      };
+
+      // Initialize config with default values from configSchema
+      const initialConfig: Record<string, any> = {};
+      const schema = nodeType.configSchema as any;
+      if (schema?.properties) {
+        for (const [key, prop] of Object.entries<any>(schema.properties)) {
+          if (prop.type === 'string') initialConfig[key] = '';
+          else if (prop.type === 'number') initialConfig[key] = undefined;
+          else if (prop.type === 'boolean') initialConfig[key] = false;
+          else if (prop.type === 'array') initialConfig[key] = [];
+          else if (prop.type === 'object') initialConfig[key] = {};
+        }
+      }
+
+      const newNode = {
+        id: crypto.randomUUID(),
+        type: nodeType.type,
+        label: nodeType.label,
+        position,
+        config: initialConfig,
+      };
+
+      const newDsl: WorkflowDSL = currentDsl
+        ? { ...currentDsl, nodes: [...currentDsl.nodes, newNode] }
+        : { nodes: [newNode], edges: [] };
+
+      onDslChange(newDsl);
+    },
+    [reactFlowInstance, onDslChange],
+  );
+
+  if (!dsl || dsl.nodes.length === 0) {
+    return (
+      <div
+        style={{ width: '100%', height: '100%' }}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        <ReactFlow
+          nodes={[]}
+          edges={[]}
+          nodeTypes={nodeTypes}
+          fitView
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
+          <Background />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        nodesDraggable={!showExecutionStatus}
+        nodesConnectable={!showExecutionStatus}
+        elementsSelectable={true}
+        connectionMode={ConnectionMode.Loose}
+        deleteKeyCode={['Backspace', 'Delete']}
+        panOnScroll={true}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        onNodeClick={(_event, node) => {
+          onNodeClick?.(node.id);
+        }}
+        onPaneClick={() => {
+          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',
+              LOOP: '#d3adf7',
+              APPROVAL: '#ffa39e',
+              SUB_WORKFLOW: '#adc6ff',
+            };
+            return colors[category] || '#b7eb8f';
+          }}
+          nodeStrokeWidth={3}
+          maskColor="rgba(240, 240, 240, 0.6)"
+          zoomable
+          pannable
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function EnhancedFlowRenderer(props: EnhancedFlowRendererProps) {
+  return (
+    <ReactFlowProvider>
+      <EnhancedFlowCanvas {...props} />
+    </ReactFlowProvider>
+  );
+}

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

@@ -0,0 +1,229 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+
+const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
+  TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
+  ACTION: { bg: '#f6ffed', border: '#b7eb8f' },
+  CONDITION: { bg: '#fff7e6', border: '#ffd591' },
+  LOOP: { bg: '#f9f0ff', border: '#d3adf7' },
+  APPROVAL: { bg: '#fff1f0', border: '#ffa39e' },
+  SUB_WORKFLOW: { bg: '#f0f5ff', border: '#adc6ff' },
+};
+
+// Status-specific background colors (overlay on top of category colors)
+const STATUS_COLORS: Record<string, string> = {
+  COMPLETED: '#f6ffed', // light green
+  RUNNING: '#e6f7ff', // light blue
+  FAILED: '#fff1f0', // light red
+  PENDING: '#fffbe6', // light yellow
+  NOT_EXECUTED: '#fafafa', // gray
+};
+
+export interface ExecutionStatusNodeData {
+  label: string;
+  category: string;
+  isSelected: boolean;
+  readonly?: boolean;
+  executionStatus?:
+    | 'PENDING'
+    | 'RUNNING'
+    | 'COMPLETED'
+    | 'FAILED'
+    | 'NOT_EXECUTED';
+  duration?: string; // e.g., "2.5s"
+  error?: string;
+  [key: string]: unknown;
+}
+
+function formatDuration(
+  startedAt: string | null,
+  finishedAt: string | null,
+): string {
+  if (!startedAt) return '';
+  const endTime = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+  const ms = endTime - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem.toFixed(0)}s` : `${m}m`;
+}
+
+function getStatusIcon(status?: string) {
+  switch (status) {
+    case 'COMPLETED':
+      return <CheckCircleOutlined style={{ color: '#52c41a', fontSize: 16 }} />;
+    case 'RUNNING':
+      return <LoadingOutlined style={{ color: '#1677ff', fontSize: 16 }} />;
+    case 'FAILED':
+      return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: 16 }} />;
+    case 'NOT_EXECUTED':
+      return <ClockCircleOutlined style={{ color: '#bfbfbf', fontSize: 16 }} />;
+    case 'PENDING':
+    default:
+      return <ClockCircleOutlined style={{ color: '#faad14', fontSize: 16 }} />;
+  }
+}
+
+export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
+  const nodeData = data as ExecutionStatusNodeData;
+  const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
+  const isNotExecuted = nodeData.executionStatus === 'NOT_EXECUTED';
+
+  // If there's execution status, use status color as background; otherwise use category color
+  const bgColor = nodeData.executionStatus
+    ? STATUS_COLORS[nodeData.executionStatus]
+    : colors.bg;
+
+  const borderColor = nodeData.isSelected
+    ? '#1677ff'
+    : isNotExecuted
+      ? '#d9d9d9'
+      : colors.border;
+  const borderStyle = nodeData.isSelected
+    ? '2px solid'
+    : isNotExecuted
+      ? '1.5px dashed'
+      : '1px solid';
+
+  return (
+    <div
+      style={{
+        background: bgColor,
+        border: `${borderStyle} ${borderColor}`,
+        borderRadius: 8,
+        padding: '8px 12px',
+        fontSize: 13,
+        minWidth: 140,
+        textAlign: 'center',
+        opacity: isNotExecuted ? 0.6 : 1,
+        boxShadow: nodeData.isSelected
+          ? '0 0 0 2px rgba(22,119,255,0.2)'
+          : !isNotExecuted && nodeData.executionStatus
+            ? '0 2px 8px rgba(0,0,0,0.15)'
+            : undefined,
+        position: 'relative',
+        transition: 'all 0.2s ease',
+      }}
+    >
+      {!nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+
+      {/* Status icon in top-right corner */}
+      {nodeData.executionStatus && (
+        <div
+          style={{
+            position: 'absolute',
+            top: -8,
+            right: -8,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 24,
+            height: 24,
+            background: '#fff',
+            borderRadius: '50%',
+            border: '1px solid #ddd',
+          }}
+        >
+          {getStatusIcon(nodeData.executionStatus)}
+        </div>
+      )}
+
+      <div style={{ fontWeight: 500, marginBottom: nodeData.duration ? 4 : 0 }}>
+        {nodeData.label}
+      </div>
+
+      {/* Duration badge */}
+      {nodeData.duration && (
+        <div
+          style={{
+            fontSize: 11,
+            color: '#666',
+            fontFamily: 'monospace',
+            marginBottom: 4,
+          }}
+        >
+          {nodeData.duration}
+        </div>
+      )}
+
+      {/* Execution status text */}
+      {nodeData.executionStatus &&
+        nodeData.executionStatus !== 'NOT_EXECUTED' && (
+          <div
+            style={{
+              fontSize: 11,
+              color: nodeData.executionStatus === 'FAILED' ? '#ff4d4f' : '#666',
+              fontWeight: 500,
+            }}
+          >
+            {nodeData.executionStatus === 'COMPLETED' && 'Completed'}
+            {nodeData.executionStatus === 'RUNNING' && 'Running...'}
+            {nodeData.executionStatus === 'FAILED' && 'Failed'}
+            {nodeData.executionStatus === 'PENDING' && 'Pending'}
+          </div>
+        )}
+
+      {!nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+ExecutionStatusNode.displayName = 'ExecutionStatusNode';

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

@@ -278,6 +278,7 @@ function FlowCanvas({
         elementsSelectable={true}
         connectionMode={ConnectionMode.Loose}
         deleteKeyCode={['Backspace', 'Delete']}
+        panOnScroll={true}
         zoomOnScroll={false}
         zoomOnPinch={false}
         zoomOnDoubleClick={false}