@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -1,16 +1,16 @@
 import { Handle, Position, type NodeProps } from '@xyflow/react';
+import { DeleteOutlined } from '@ant-design/icons';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { LookupPort, RuntimePorts } from '../utils/resolveLookupPorts';
-import { NodeTypeBadge } from './NodeTypeBadge';
 
-const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
-  TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
-  ACTION: { bg: '#f6ffed', border: '#b7eb8f' },
-  CONDITION: { bg: '#fff7e6', border: '#ffd591' },
-  FLOW_CONTROL: { bg: '#f9f0ff', border: '#d3adf7' },
-  APPROVAL: { bg: '#fff1f0', border: '#ffa39e' },
-  SUB_WORKFLOW: { bg: '#f0f5ff', border: '#adc6ff' },
+const CATEGORY_COLORS: Record<string, { border: string }> = {
+  TRIGGER: { border: '#91caff' },
+  ACTION: { border: '#b7eb8f' },
+  CONDITION: { border: '#ffd591' },
+  FLOW_CONTROL: { border: '#d3adf7' },
+  APPROVAL: { border: '#ffa39e' },
+  SUB_WORKFLOW: { border: '#adc6ff' },
 };
 
 export interface CustomNodeData {
@@ -24,6 +24,9 @@ export interface CustomNodeData {
   runtimePorts?: RuntimePorts;
   isSelected: boolean;
   readonly?: boolean;
+  configUnavailable?: boolean;
+  configStatus?: 'loading' | 'error';
+  onDelete?: (nodeId: string) => void;
   [key: string]: unknown;
 }
 
@@ -61,13 +64,16 @@ const ENDPOINT_LABEL_STYLE: React.CSSProperties = {
   whiteSpace: 'nowrap',
 };
 
-export const CustomNode = memo(({ data }: NodeProps) => {
+export const CustomNode = memo(({ id, data }: NodeProps) => {
   const { t } = useTranslation('workflow');
   const nodeData = data as CustomNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
   const handleStyle = nodeData.readonly
     ? HIDDEN_HANDLE_STYLE
-    : VISIBLE_HANDLE_STYLE;
+    : nodeData.configUnavailable
+      ? { ...VISIBLE_HANDLE_STYLE, cursor: 'not-allowed', opacity: 0.35 }
+      : VISIBLE_HANDLE_STYLE;
+  const isConnectable = !nodeData.configUnavailable;
   const outputs = (nodeData.outputs ?? []) as string[];
   const dataInputs = nodeData.dataInputs ?? [];
   const lookupPorts = nodeData.lookupPorts ?? [];
@@ -77,10 +83,13 @@ export const CustomNode = memo(({ data }: NodeProps) => {
   );
   const lookupRowCount = Math.max(lookupInputs.length, lookupOutputs.length);
   const multiOut = outputs.length > 1;
+  const switchMinWidth =
+    nodeData.type === 'switch' ? Math.max(190, outputs.length * 88) : undefined;
   const runtimePorts = nodeData.runtimePorts ?? {
     inputLabel: 'IN',
     outputLabel: 'OUT',
   };
+  const acceptsInput = !nodeData.type?.endsWith('_trigger');
   const outputLabel = (id: string) => {
     if (nodeData.outputLabels?.[id]) return nodeData.outputLabels[id];
     if (nodeData.type === 'approval' || nodeData.type === 'human_approval') {
@@ -93,52 +102,80 @@ export const CustomNode = memo(({ data }: NodeProps) => {
   return (
     <div
       style={{
-        background: colors.bg,
-        border: nodeData.isSelected
-          ? '2px solid #1677ff'
-          : `1px solid ${colors.border}`,
-        borderRadius: 8,
-        padding: '8px 16px',
+        background: 'var(--ant-color-bg-container)',
+        borderWidth: nodeData.isSelected ? 2 : 1,
+        borderStyle: 'solid',
+        borderColor: nodeData.isSelected ? '#1677ff' : colors.border,
+        borderRadius: 9,
+        padding: '10px 16px 11px',
         fontSize: 14,
         minWidth: lookupPorts.length
           ? 280
-          : runtimePorts.emphasized
-            ? 190
-            : 140,
-        textAlign: 'center',
+          : switchMinWidth
+            ? switchMinWidth
+            : runtimePorts.emphasized
+              ? 190
+              : 140,
+        textAlign: 'left',
         boxShadow: nodeData.isSelected
-          ? '0 0 0 2px rgba(22,119,255,0.2)'
-          : undefined,
+          ? '0 0 0 3px rgba(22,119,255,0.14), 0 6px 18px rgba(15,23,42,0.10)'
+          : '0 2px 8px rgba(15,23,42,0.07)',
         position: 'relative',
       }}
     >
-      <Handle
-        id={runtimePorts.inputId}
-        type="target"
-        position={Position.Top}
-        style={{
-          ...handleStyle,
-          ...(runtimePorts.emphasized && {
-            background: '#fff7e6',
-            borderColor: '#fa8c16',
-          }),
-        }}
-      />
-      {!nodeData.readonly && (
-        <span
-          style={{
-            ...ENDPOINT_LABEL_STYLE,
-            top: -22,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            color: runtimePorts.emphasized ? '#d46b08' : '#8c8c8c',
+      {nodeData.isSelected && !nodeData.readonly && nodeData.onDelete && (
+        <button
+          type="button"
+          className="workflow-node__delete nodrag nopan"
+          aria-label={t('editor.deleteNode')}
+          title={t('editor.deleteNode')}
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            nodeData.onDelete?.(id);
           }}
         >
-          {runtimePorts.inputLabel}
-        </span>
+          <DeleteOutlined />
+        </button>
+      )}
+      {acceptsInput && (
+        <>
+          <Handle
+            id={runtimePorts.inputId}
+            type="target"
+            position={Position.Top}
+            isConnectable={isConnectable}
+            style={{
+              ...handleStyle,
+              ...(runtimePorts.emphasized && {
+                background: '#fff7e6',
+                borderColor: '#fa8c16',
+              }),
+            }}
+          />
+          {!nodeData.readonly && (
+            <span
+              style={{
+                ...ENDPOINT_LABEL_STYLE,
+                top: -22,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                color: runtimePorts.emphasized ? '#d46b08' : '#8c8c8c',
+              }}
+            >
+              {runtimePorts.inputLabel}
+            </span>
+          )}
+        </>
+      )}
+      <div style={{ fontWeight: 600, lineHeight: 1.35 }}>{nodeData.label}</div>
+      {nodeData.configUnavailable && (
+        <div className="workflow-node__config-state">
+          {nodeData.configStatus === 'error'
+            ? t('editor.templateConfigUnavailable')
+            : t('editor.templateConfigLoadingShort')}
+        </div>
       )}
-      <NodeTypeBadge type={nodeData.type} borderColor={colors.border} />
-      <div style={{ fontWeight: 500 }}>{nodeData.label}</div>
       {lookupRowCount > 0 && (
         <div
           style={{
@@ -175,6 +212,7 @@ export const CustomNode = memo(({ data }: NodeProps) => {
                     id={input.id}
                     type="target"
                     position={Position.Left}
+                    isConnectable={isConnectable}
                     style={{
                       ...handleStyle,
                       top,
@@ -189,6 +227,7 @@ export const CustomNode = memo(({ data }: NodeProps) => {
                     id={output.id}
                     type="source"
                     position={Position.Right}
+                    isConnectable={isConnectable}
                     style={{
                       ...handleStyle,
                       top,
@@ -228,6 +267,7 @@ export const CustomNode = memo(({ data }: NodeProps) => {
                 id={input.id}
                 type="target"
                 position={Position.Left}
+                isConnectable={isConnectable}
                 style={{
                   ...handleStyle,
                   top: '50%',
@@ -249,6 +289,7 @@ export const CustomNode = memo(({ data }: NodeProps) => {
               id={id}
               type="source"
               position={Position.Bottom}
+              isConnectable={isConnectable}
               style={{
                 ...handleStyle,
                 left: `${((idx + 1) / (outputs.length + 1)) * 100}%`,
@@ -273,9 +314,10 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         </>
       ) : (
         <Handle
-          id={runtimePorts.outputId}
+          id={outputs[0] ?? runtimePorts.outputId}
           type="source"
           position={Position.Bottom}
+          isConnectable={isConnectable}
           style={{
             ...handleStyle,
             ...(runtimePorts.emphasized && {
@@ -295,7 +337,7 @@ export const CustomNode = memo(({ data }: NodeProps) => {
             color: runtimePorts.emphasized ? '#1677ff' : '#8c8c8c',
           }}
         >
-          {runtimePorts.outputLabel}
+          {outputs[0] ? outputLabel(outputs[0]) : runtimePorts.outputLabel}
         </span>
       )}
     </div>

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

@@ -2,7 +2,7 @@ import { DeleteOutlined } from '@ant-design/icons';
 import {
   BaseEdge,
   EdgeToolbar,
-  getSmoothStepPath,
+  getBezierPath,
   type EdgeProps,
 } from '@xyflow/react';
 import { Button, Tooltip } from 'antd';
@@ -28,13 +28,14 @@ export function DeletableEdge({
   data,
 }: EdgeProps) {
   const { t } = useTranslation('workflow');
-  const [path, labelX, labelY] = getSmoothStepPath({
+  const [path, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
     targetX,
     targetY,
     sourcePosition,
     targetPosition,
+    curvature: 0.32,
   });
   const onDelete = (data as DeletableEdgeData | undefined)?.onDelete;
 

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

@@ -0,0 +1,259 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import { DslView, type DslViewHandle } from './DslView';
+
+vi.mock('./WorkflowCodeEditor', () => ({
+  WorkflowCodeEditor: ({ value, onChange }: any) => (
+    <textarea
+      aria-label="DSL"
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+}));
+
+describe('DslView', () => {
+  it('applies structurally valid draft DSL without publish-time validation', () => {
+    const ref = createRef<DslViewHandle>();
+    const initialDsl: WorkflowDSL = {
+      nodes: [node('trigger', 'manual_trigger')],
+      edges: [],
+    };
+    const pastedDsl: WorkflowDSL = {
+      nodes: [
+        node('trigger', 'manual_trigger'),
+        {
+          ...node('switch', 'switch'),
+          config: { cases: [{ id: 'old-case' }] },
+          instanceRef: { instanceId: '7', instanceCode: 'SWITCH_TEMPLATE' },
+        },
+        node('code', 'code'),
+      ],
+      edges: [
+        edge('trigger-switch', 'trigger', 'switch'),
+        {
+          ...edge('switch-code', 'switch', 'code'),
+          sourceHandle: 'old-case',
+          targetHandle: 'data-in',
+        },
+      ],
+    };
+    const onApply = vi.fn();
+    const { rerender } = render(
+      <DslView
+        ref={ref}
+        dsl={initialDsl}
+        nodeTypes={nodeTypes}
+        referencedConfigs={{}}
+        callableWorkflows={[]}
+        onApply={onApply}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('DSL'), {
+      target: { value: JSON.stringify(pastedDsl) },
+    });
+
+    rerender(
+      <DslView
+        ref={ref}
+        dsl={initialDsl}
+        nodeTypes={nodeTypes}
+        referencedConfigs={{
+          '7': { cases: [{ id: 'current-case' }] },
+        }}
+        callableWorkflows={[]}
+        onApply={onApply}
+      />,
+    );
+
+    let applied = true;
+    act(() => {
+      applied = ref.current!.apply();
+    });
+
+    expect(applied).toBe(true);
+    expect(onApply).toHaveBeenCalledWith(pastedDsl);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('allows unrelated DSL changes when the callable catalog is unavailable', () => {
+    const ref = createRef<DslViewHandle>();
+    const initialDsl: WorkflowDSL = {
+      nodes: [
+        node('trigger', 'manual_trigger'),
+        {
+          ...node('call', 'sub_workflow'),
+          config: {
+            workflowId: '42',
+            workflowVersionId: '100',
+            inputBindings: {},
+          },
+        },
+      ],
+      edges: [edge('trigger-call', 'trigger', 'call')],
+    };
+    const onApply = vi.fn();
+    render(
+      <DslView
+        ref={ref}
+        dsl={initialDsl}
+        nodeTypes={[...nodeTypes, nodeType('sub_workflow', [])]}
+        referencedConfigs={{}}
+        onApply={onApply}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('DSL'), {
+      target: {
+        value: JSON.stringify({
+          ...initialDsl,
+          nodes: initialDsl.nodes.map((item) =>
+            item.id === 'trigger' ? { ...item, label: '手动开始' } : item,
+          ),
+        }),
+      },
+    });
+
+    let applied = false;
+    act(() => {
+      applied = ref.current!.apply();
+    });
+
+    expect(applied).toBe(true);
+    expect(onApply).toHaveBeenCalledOnce();
+  });
+
+  it('reports unapplied DSL edits and clears the dirty state after applying', () => {
+    const ref = createRef<DslViewHandle>();
+    const onDirtyChange = vi.fn();
+    const initialDsl: WorkflowDSL = {
+      nodes: [node('trigger', 'manual_trigger')],
+      edges: [],
+    };
+    render(
+      <DslView
+        ref={ref}
+        dsl={initialDsl}
+        nodeTypes={nodeTypes}
+        referencedConfigs={{}}
+        callableWorkflows={[]}
+        onApply={vi.fn()}
+        onDirtyChange={onDirtyChange}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText('DSL'), {
+      target: {
+        value: JSON.stringify({
+          ...initialDsl,
+          nodes: [{ ...initialDsl.nodes[0], label: 'Edited trigger' }],
+        }),
+      },
+    });
+
+    expect(onDirtyChange).toHaveBeenLastCalledWith(true);
+    act(() => {
+      ref.current!.apply();
+    });
+    expect(onDirtyChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('applies the latest pasted DSL when save runs in the same render frame', () => {
+    const ref = createRef<DslViewHandle>();
+    const initialDsl: WorkflowDSL = {
+      nodes: [node('trigger', 'manual_trigger')],
+      edges: [],
+    };
+    const pastedDsl: WorkflowDSL = {
+      ...initialDsl,
+      nodes: [{ ...initialDsl.nodes[0], label: 'Latest pasted DSL' }],
+    };
+    const onApply = vi.fn();
+    render(
+      <DslView
+        ref={ref}
+        dsl={initialDsl}
+        nodeTypes={nodeTypes}
+        referencedConfigs={{}}
+        callableWorkflows={[]}
+        onApply={onApply}
+      />,
+    );
+
+    act(() => {
+      fireEvent.change(screen.getByLabelText('DSL'), {
+        target: { value: JSON.stringify(pastedDsl) },
+      });
+      ref.current!.apply();
+    });
+
+    expect(onApply).toHaveBeenCalledWith(pastedDsl);
+  });
+
+  it('automatically synchronizes a valid DSL edit to the Workflow state', async () => {
+    const initialDsl: WorkflowDSL = {
+      nodes: [node('trigger', 'manual_trigger')],
+      edges: [],
+    };
+    const editedDsl: WorkflowDSL = {
+      ...initialDsl,
+      nodes: [{ ...initialDsl.nodes[0], label: 'Edited trigger' }],
+    };
+    const onApply = vi.fn();
+    render(
+      <DslView
+        dsl={initialDsl}
+        nodeTypes={nodeTypes}
+        referencedConfigs={{}}
+        callableWorkflows={[]}
+        onApply={onApply}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText('DSL'), {
+      target: { value: JSON.stringify(editedDsl) },
+    });
+
+    await waitFor(() => expect(onApply).toHaveBeenCalledWith(editedDsl));
+  });
+});
+
+const nodeTypes = [
+  nodeType('manual_trigger', []),
+  nodeType('switch', []),
+  nodeType('code', []),
+];
+
+function node(id: string, type: string) {
+  return { id, type, label: id, position: { x: 0, y: 0 }, config: {} };
+}
+
+function edge(id: string, source: string, target: string) {
+  return { id, source, target, kind: 'FLOW' as const };
+}
+
+function nodeType(type: string, outputs: string[]): WorkflowNodeType {
+  return {
+    id: type,
+    type,
+    category: type.endsWith('_trigger') ? 'TRIGGER' : 'ACTION',
+    label: type,
+    icon: '',
+    description: null,
+    configSchema: {},
+    uiSchema: {},
+    inputSchema: {},
+    outputSchema: {},
+    outputs,
+    runtimeKey: type,
+    schemaVersion: 1,
+    instancePolicy: 'OPTIONAL',
+  };
+}