@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -2,9 +2,9 @@ import {
   applyNodeChanges,
   Background,
   ConnectionMode,
-  Controls,
+  ConnectionLineType,
   MarkerType,
-  MiniMap,
+  Panel,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
@@ -14,39 +14,43 @@ import {
   type Node,
   type NodeChange,
 } from '@xyflow/react';
+import { RedoOutlined, UndoOutlined } from '@ant-design/icons';
+import { Alert, Button, Spin, Tooltip } from 'antd';
 import '@xyflow/react/dist/style.css';
 import React, {
   useCallback,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import type {
-  WorkflowDSL,
-  WorkflowNodeInstance,
-  WorkflowNodeType,
-} from '../types';
+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 { InstanceRequiredDialog } from './InstanceRequiredDialog';
-import { LookupConnectionDialog } from './LookupConnectionDialog';
+import type { ReferencedConfigStatus } from '../hooks/useReferencedNodeInstanceConfigs';
 
 const nodeTypes = { custom: CustomNode };
 const edgeTypes = { deletable: DeletableEdge };
@@ -59,8 +63,18 @@ interface Props {
   >;
   selectedNodeId?: string | null;
   readonly?: boolean;
+  fitViewOnLoad?: boolean;
   onNodeClick?: (nodeId: string) => void;
   onDslChange?: (dsl: WorkflowDSL) => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onNodeDragStart?: () => void;
+  onNodeDragStop?: () => void;
+  referencedConfigs?: Record<string, Record<string, any>>;
+  referencedConfigStatus?: ReferencedConfigStatus;
+  onRetryReferencedConfigs?: () => void;
 }
 
 function FlowCanvas({
@@ -68,8 +82,18 @@ function FlowCanvas({
   nodeTypeMap,
   selectedNodeId,
   readonly,
+  fitViewOnLoad,
   onNodeClick,
   onDslChange,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onNodeDragStart,
+  onNodeDragStop,
+  referencedConfigs = {},
+  referencedConfigStatus = 'ready',
+  onRetryReferencedConfigs,
 }: Props) {
   const { t } = useTranslation('workflow');
   const reactFlowInstance = useReactFlow();
@@ -77,39 +101,44 @@ function FlowCanvas({
   dslRef.current = dsl;
   const containerRef = useRef<HTMLDivElement>(null);
   const hasSetViewport = useRef(false);
-  const [pendingDrop, setPendingDrop] = useState<{
-    nodeType: WorkflowNodeType;
-    position: { x: number; y: number };
-  }>();
-  const [pendingLookup, setPendingLookup] = useState<ResolvedLookupCall>();
+  const fitViewFrame = useRef<number>();
   const [selectedEdgeId, setSelectedEdgeId] = useState<string>();
+  const hasDynamicTemplatePorts = Boolean(
+    dsl?.nodes.some(
+      (node) =>
+        node.type === 'switch' &&
+        node.instanceRef &&
+        node.configOverride == null,
+    ),
+  );
 
   const deleteEdges = useCallback(
     (edgeId: string) => {
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange || readonly) return;
-      onDslChange({
-        ...currentDsl,
-        edges: removeWorkflowEdges(currentDsl.edges, [edgeId]),
-      });
+      onDslChange(removeWorkflowConnections(currentDsl, [edgeId]));
       setSelectedEdgeId(undefined);
     },
     [onDslChange, readonly],
   );
 
+  const deleteNode = useCallback(
+    (nodeId: string) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange || readonly) return;
+      onDslChange(removeWorkflowNodes(currentDsl, [nodeId]));
+      onNodeClick?.('');
+    },
+    [onDslChange, onNodeClick, readonly],
+  );
+
   const addDroppedNode = useCallback(
-    (
-      nodeType: WorkflowNodeType,
-      position: { x: number; y: number },
-      instance?: WorkflowNodeInstance,
-    ) => {
+    (nodeType: WorkflowNodeType, position: { x: number; y: number }) => {
       const currentDsl = dslRef.current;
       if (!onDslChange) return;
-      const initialConfig: Record<string, any> = instance
-        ? { ...instance.config }
-        : {};
+      const initialConfig: Record<string, any> = {};
       const schema = nodeType.configSchema as any;
-      if (!instance && schema?.properties) {
+      if (schema?.properties) {
         for (const [key, prop] of Object.entries<any>(schema.properties)) {
           if (prop.default !== undefined) initialConfig[key] = prop.default;
           else if (prop.type === 'string') initialConfig[key] = '';
@@ -123,25 +152,20 @@ function FlowCanvas({
       const newNode = {
         id: crypto.randomUUID(),
         type: nodeType.type,
-        label: instance?.name ?? nodeType.label,
-        position,
-        config: instance
-          ? initialConfig
-          : withNewNodeDefaults(nodeType.type, initialConfig),
-        ...(instance && {
-          instanceRef: {
-            instanceId: instance.id,
-            instanceCode: instance.code,
-          },
+        label: t(`nodeTypes.${nodeType.type}`, {
+          defaultValue: nodeType.label,
         }),
+        position,
+        config: withNewNodeDefaults(nodeType.type, initialConfig),
       };
       onDslChange(
         currentDsl
           ? { ...currentDsl, nodes: [...currentDsl.nodes, newNode] }
           : { nodes: [newNode], edges: [] },
       );
+      onNodeClick?.(newNode.id);
     },
-    [onDslChange],
+    [onDslChange, onNodeClick, t],
   );
 
   const { nodes, edges } = useMemo(() => {
@@ -149,7 +173,25 @@ function FlowCanvas({
 
     const rfNodes: Node[] = dsl.nodes.map((n) => {
       const category = nodeTypeMap?.[n.type]?.category || 'ACTION';
-      const lookupPorts = resolveLookupPorts(n);
+      const referencedConfig =
+        !readonly && n.instanceRef
+          ? referencedConfigs[n.instanceRef.instanceId]
+          : undefined;
+      const effectiveNodeConfig = n.instanceRef
+        ? (n.configOverride ?? referencedConfig ?? n.config)
+        : n.config;
+      const effectiveNode =
+        effectiveNodeConfig === n.config
+          ? n
+          : { ...n, config: effectiveNodeConfig };
+      const configUnavailable = Boolean(
+        !readonly &&
+        (n.type === 'switch' || n.type === 'parallel') &&
+        n.instanceRef &&
+        n.configOverride == null &&
+        referencedConfigStatus !== 'ready',
+      );
+      const lookupPorts = resolveLookupPorts(effectiveNode);
       // 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
@@ -158,6 +200,7 @@ function FlowCanvas({
         id: n.id,
         type: 'custom',
         position,
+        connectable: !configUnavailable,
         selected: n.id === selectedNodeId,
         data: {
           label:
@@ -166,64 +209,123 @@ function FlowCanvas({
               : n.label,
           category,
           type: n.type,
-          outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
-          outputLabels: resolveOutputLabels(n),
+          outputs: resolveOutputs(n, nodeTypeMap?.[n.type], referencedConfig),
+          outputLabels: resolveOutputLabels(n, t, referencedConfig),
           lookupPorts,
-          runtimePorts: resolveRuntimePorts(n),
+          runtimePorts: resolveRuntimePorts(effectiveNode),
+          configUnavailable,
+          configStatus: configUnavailable ? referencedConfigStatus : undefined,
           isSelected: n.id === selectedNodeId,
           readonly: !!readonly,
+          onDelete: readonly ? undefined : deleteNode,
         },
       };
     });
 
-    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 ? undefined : deleteEdges },
-      markerEnd:
-        e.kind === 'CALL' || e.kind === 'RETURN'
-          ? {
-              type: MarkerType.ArrowClosed,
-              color: e.kind === 'CALL' ? '#fa8c16' : '#1677ff',
-            }
-          : undefined,
-      animated: 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 ? undefined : deleteEdges },
+        markerEnd: { type: MarkerType.ArrowClosed, color: stroke },
+        animated: selected,
+        style: { stroke, strokeWidth: selected ? 2.5 : 1.6 },
+      };
+    });
 
     return { nodes: rfNodes, edges: rfEdges };
   }, [
     dsl,
     nodeTypeMap,
+    referencedConfigs,
+    referencedConfigStatus,
     selectedNodeId,
     selectedEdgeId,
     readonly,
     deleteEdges,
+    deleteNode,
     t,
   ]);
 
-  // Set viewport once before first paint: horizontal center + vertical top padding
+  const layoutKey = useMemo(
+    () =>
+      nodes
+        .map(
+          (node) =>
+            `${node.id}:${node.position.x.toFixed(2)}:${node.position.y.toFixed(2)}`,
+        )
+        .join('|'),
+    [nodes],
+  );
+  const fitViewKey = `${layoutKey}:${selectedNodeId ? 'panel' : 'canvas'}`;
+
+  const scheduleFitView = useCallback(() => {
+    if (!fitViewOnLoad || nodes.length === 0) return;
+    if (fitViewFrame.current !== undefined) {
+      cancelAnimationFrame(fitViewFrame.current);
+    }
+    fitViewFrame.current = requestAnimationFrame(() => {
+      fitViewFrame.current = requestAnimationFrame(() => {
+        reactFlowInstance.fitView({
+          padding: 0.18,
+          minZoom: 0.2,
+          maxZoom: 1,
+        });
+        fitViewFrame.current = undefined;
+      });
+    });
+  }, [fitViewOnLoad, nodes.length, reactFlowInstance]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!fitViewOnLoad || !container) return;
+
+    let previousWidth = -1;
+    let previousHeight = -1;
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      if (width === previousWidth && height === previousHeight) return;
+      previousWidth = width;
+      previousHeight = height;
+      scheduleFitView();
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+      if (fitViewFrame.current !== undefined) {
+        cancelAnimationFrame(fitViewFrame.current);
+        fitViewFrame.current = undefined;
+      }
+    };
+  }, [fitViewOnLoad, scheduleFitView]);
+
+  // The read-only viewer fits every loaded layout. The editor keeps its existing
+  // top-aligned viewport so adding and moving nodes does not constantly reframe it.
   useLayoutEffect(() => {
+    if (fitViewOnLoad) {
+      scheduleFitView();
+      return;
+    }
     if (!hasSetViewport.current && containerRef.current && nodes.length > 0) {
       const containerWidth = containerRef.current.clientWidth;
       let minX = Infinity,
@@ -238,7 +340,7 @@ function FlowCanvas({
       reactFlowInstance.setViewport({ x, y: 0, zoom: 1 });
       hasSetViewport.current = true;
     }
-  }, [nodes, reactFlowInstance]);
+  }, [fitViewKey, fitViewOnLoad, nodes, reactFlowInstance, scheduleFitView]);
 
   const onNodesChange = useCallback(
     (changes: NodeChange[]) => {
@@ -255,14 +357,12 @@ function FlowCanvas({
       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),
+        onDslChange(
+          removeWorkflowNodes(
+            currentDsl,
+            removeChanges.map((change) => (change 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);
@@ -291,11 +391,12 @@ function FlowCanvas({
 
       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],
@@ -305,27 +406,40 @@ function FlowCanvas({
     (connection: Connection) => {
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange) return;
-      const lookup = resolveLookupCall(currentDsl, connection);
-      if (lookup) {
-        setPendingLookup(lookup);
+      connection = normalizeCanvasMainHandles(connection);
+      if (
+        referencedConfigStatus !== 'ready' &&
+        connectionTouchesDynamicTemplate(currentDsl, connection)
+      )
         return;
-      }
-      const pipelineEdge = resolveLookupPipelineConnection(
+      const connectionDsl = withReferencedConfigs(
         currentDsl,
-        connection,
+        referencedConfigs,
       );
-      if (pipelineEdge) {
+      const forEachCall = resolveForEachCall(connectionDsl, connection);
+      if (forEachCall) {
         onDslChange({
           ...currentDsl,
-          edges: appendLookupPipelineEdge(currentDsl.edges, pipelineEdge),
+          edges: [...currentDsl.edges, createForEachCall(forEachCall)],
         });
         return;
       }
-      if (
-        connection.sourceHandle?.startsWith('lookup:') ||
-        connection.targetHandle?.startsWith('approver:')
-      )
+      const forEachPipelineEdge = resolveForEachPipelineConnection(
+        connectionDsl,
+        connection,
+      );
+      if (forEachPipelineEdge) {
+        onDslChange({
+          ...currentDsl,
+          edges: appendForEachPipelineEdge(
+            currentDsl.edges,
+            forEachPipelineEdge,
+          ),
+        });
         return;
+      }
+      if (isForEachReservedConnection(connectionDsl, connection)) return;
+      if (!isValidMainFlowConnection(connectionDsl, connection)) return;
       const newEdge = {
         id: `e-${connection.source}-${connection.target}-${Date.now()}`,
         source: connection.source!,
@@ -339,22 +453,38 @@ function FlowCanvas({
         edges: [...currentDsl.edges, newEdge],
       });
     },
-    [onDslChange],
+    [onDslChange, referencedConfigs, referencedConfigStatus],
   );
 
-  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))
-      return true;
-    const sourceHandle = connection.sourceHandle ?? '';
-    const targetHandle = connection.targetHandle ?? '';
-    return (
-      !sourceHandle.startsWith('lookup:') &&
-      !targetHandle.startsWith('approver:')
-    );
-  }, []);
+  const isValidConnection = useCallback(
+    (connection: Edge | Connection) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl) return false;
+      connection = normalizeCanvasMainHandles(connection);
+      if (
+        referencedConfigStatus !== 'ready' &&
+        connectionTouchesDynamicTemplate(currentDsl, connection)
+      )
+        return false;
+      const connectionDsl = withReferencedConfigs(
+        currentDsl,
+        referencedConfigs,
+      );
+      if (resolveForEachCall(connectionDsl, connection as Connection))
+        return true;
+      if (
+        resolveForEachPipelineConnection(
+          connectionDsl,
+          connection as Connection,
+        )
+      )
+        return true;
+      if (isForEachReservedConnection(connectionDsl, connection as Connection))
+        return false;
+      return isValidMainFlowConnection(connectionDsl, connection);
+    },
+    [referencedConfigs, referencedConfigStatus],
+  );
 
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
@@ -364,7 +494,7 @@ function FlowCanvas({
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();
-      if (!onDslChange) return;
+      if (!onDslChange || readonly) return;
 
       const data = event.dataTransfer.getData('application/workflow-node-type');
       if (!data) return;
@@ -386,36 +516,41 @@ function FlowCanvas({
         y: flowPosition.x / 1.5,
       };
 
-      if (
-        nodeType.instancePolicy === 'REQUIRED' ||
-        nodeType.instancePolicy === 'OPTIONAL'
-      ) {
-        setPendingDrop({ nodeType, position });
-        return;
-      }
       addDroppedNode(nodeType, position);
     },
-    [reactFlowInstance, onDslChange, addDroppedNode],
+    [reactFlowInstance, onDslChange, addDroppedNode, readonly],
   );
 
   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}
+        fitView={fitViewOnLoad}
+        fitViewOptions={{ padding: 0.18, minZoom: 0.2, maxZoom: 1 }}
+        minZoom={0.2}
+        maxZoom={2}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
+        onNodesChange={readonly ? undefined : onNodesChange}
+        onEdgesChange={readonly ? undefined : onEdgesChange}
+        onConnect={readonly ? undefined : onConnect}
         isValidConnection={isValidConnection}
-        onDragOver={onDragOver}
-        onDrop={onDrop}
-        nodesDraggable={true}
-        nodesConnectable={true}
+        onDragOver={readonly ? undefined : onDragOver}
+        onDrop={readonly ? undefined : onDrop}
+        onNodeDragStart={readonly ? undefined : onNodeDragStart}
+        onNodeDragStop={readonly ? undefined : onNodeDragStop}
+        nodesDraggable={!readonly}
+        nodesConnectable={!readonly}
         elementsSelectable={true}
-        connectionMode={ConnectionMode.Loose}
-        deleteKeyCode={['Backspace', 'Delete']}
+        connectionMode={ConnectionMode.Strict}
+        connectionLineType={ConnectionLineType.Bezier}
+        connectionLineStyle={{ stroke: '#1677ff', strokeWidth: 2 }}
+        deleteKeyCode={readonly ? null : ['Backspace', 'Delete']}
         panOnScroll={true}
         zoomOnScroll={false}
         zoomOnPinch={false}
@@ -433,68 +568,69 @@ function FlowCanvas({
           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
+        {hasDynamicTemplatePorts && referencedConfigStatus === 'loading' && (
+          <Panel
+            position="top-right"
+            className="workflow-canvas__config-state nodrag nopan"
+          >
+            <Spin size="small" />
+            <span>{t('editor.templateConfigLoading')}</span>
+          </Panel>
+        )}
+        {hasDynamicTemplatePorts && referencedConfigStatus === 'error' && (
+          <Panel
+            position="top-right"
+            className="workflow-canvas__config-alert nodrag nopan"
+          >
+            <Alert
+              type="error"
+              showIcon
+              message={t('editor.templateConfigLoadFailed')}
+              description={t('editor.templateConfigLoadFailedHint')}
+              action={
+                onRetryReferencedConfigs ? (
+                  <Button size="small" onClick={onRetryReferencedConfigs}>
+                    {t('common.retry')}
+                  </Button>
+                ) : undefined
+              }
+            />
+          </Panel>
+        )}
+        {!readonly && (
+          <Panel
+            position="top-left"
+            className="workflow-canvas__history-controls nodrag nopan"
+          >
+            <Tooltip title={t('editor.undo')}>
+              <Button
+                type="text"
+                size="small"
+                icon={<UndoOutlined />}
+                disabled={!canUndo}
+                onClick={onUndo}
+                aria-label={t('editor.undo')}
+              />
+            </Tooltip>
+            <Tooltip title={t('editor.redo')}>
+              <Button
+                type="text"
+                size="small"
+                icon={<RedoOutlined />}
+                disabled={!canRedo}
+                onClick={onRedo}
+                aria-label={t('editor.redo')}
+              />
+            </Tooltip>
+          </Panel>
+        )}
+        <Background
+          gap={22}
+          size={1}
+          color="var(--ant-color-border-secondary)"
         />
+        <CanvasZoomControls />
       </ReactFlow>
-      <InstanceRequiredDialog
-        open={Boolean(pendingDrop)}
-        nodeType={pendingDrop?.nodeType}
-        allowInline={pendingDrop?.nodeType.instancePolicy === 'OPTIONAL'}
-        onCancel={() => setPendingDrop(undefined)}
-        onInline={() => {
-          if (pendingDrop)
-            addDroppedNode(pendingDrop.nodeType, pendingDrop.position);
-          setPendingDrop(undefined);
-        }}
-        onSelect={(instance) => {
-          if (pendingDrop)
-            addDroppedNode(
-              pendingDrop.nodeType,
-              pendingDrop.position,
-              instance,
-            );
-          setPendingDrop(undefined);
-        }}
-      />
-      <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>
   );
 }
@@ -506,3 +642,31 @@ export function FlowRenderer(props: Props) {
     </ReactFlowProvider>
   );
 }
+
+function connectionTouchesDynamicTemplate(
+  dsl: WorkflowDSL,
+  connection: Edge | Connection,
+): boolean {
+  return [connection.source, connection.target].some((nodeId) => {
+    const node = dsl.nodes.find((item) => item.id === nodeId);
+    return Boolean(
+      (node?.type === 'switch' || node?.type === 'parallel') &&
+      node.instanceRef &&
+      node.configOverride == null,
+    );
+  });
+}
+
+function withReferencedConfigs(
+  dsl: WorkflowDSL,
+  referencedConfigs: Record<string, Record<string, any>>,
+): WorkflowDSL {
+  return {
+    ...dsl,
+    nodes: dsl.nodes.map((node) => {
+      if (!node.instanceRef || node.configOverride != null) return node;
+      const config = referencedConfigs[node.instanceRef.instanceId];
+      return config ? { ...node, config } : node;
+    }),
+  };
+}