android-midscene-automation 0.1.26 → 0.1.28

package/src/appium-recorder/components/StageLogSettings.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { DEFAULT_LOG_PREFIX } from '../stage-log';
+import type { AppiumRecordedStep } from '../types';
+defineProps<{ step: AppiumRecordedStep; disabled?: boolean }>();
+defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
+</script>
+
+<template>
+  <el-form-item label="日志关键字">
+    <el-input :model-value="step.logPrefix ?? DEFAULT_LOG_PREFIX" :disabled="disabled" maxlength="100"
+      @update:model-value="$emit('update', { logPrefix: String($event) })" />
+  </el-form-item>
+  <el-form-item label="日志内容">
+    <el-input :model-value="step.value || ''" :disabled="disabled" type="textarea" :rows="3" maxlength="4000"
+      @update:model-value="$emit('update', { value: String($event) })" />
+  </el-form-item>
+</template>

package/src/appium-recorder/components/TextClickSettings.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AppiumRecordedStep } from '../types';
+const props = defineProps<{ step: AppiumRecordedStep; disabled?: boolean }>();
+const emit = defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
+</script>
+
+<template>
+  <el-form-item label="点击文字" required>
+    <el-input :model-value="step.value || ''" :disabled="disabled" maxlength="1000" aria-label="点击文字"
+      @update:model-value="emit('update', { value: String($event) })" />
+  </el-form-item>
+  <el-form-item label="文本匹配方式">
+    <el-select :model-value="step.flow?.textMatch || 'contains'" :disabled="disabled"
+      @update:model-value="emit('update', { flow: { ...props.step.flow, textMatch: $event } })">
+      <el-option label="精准匹配（完全一致）" value="exact" />
+      <el-option label="模糊匹配（包含）" value="contains" />
+    </el-select>
+  </el-form-item>
+</template>

package/src/appium-recorder/components/VisualChangeDialog.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Aim } from '@element-plus/icons-vue';
+import type { AppiumVisualChangeConfig } from '../types';
+import { normalizeVisualChangeConfig } from '../visual-change';
+
+const props = defineProps<{
+  modelValue: boolean;
+  config: AppiumVisualChangeConfig;
+  hasSelectedElement: boolean;
+  pickingRegion?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  'update:config': [value: AppiumVisualChangeConfig];
+  pickRegion: [];
+  confirm: [];
+}>();
+
+const normalizedConfig = computed(() => normalizeVisualChangeConfig(props.config));
+
+function patchConfig(patch: Partial<AppiumVisualChangeConfig>) {
+  emit('update:config', normalizeVisualChangeConfig({
+    ...normalizedConfig.value,
+    ...patch,
+  }));
+}
+
+function patchRegion(key: keyof AppiumVisualChangeConfig['region'], value: unknown) {
+  patchConfig({
+    region: {
+      ...normalizedConfig.value.region,
+      [key]: Number(value),
+    },
+  });
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="检测画面变化"
+    width="480px"
+    top="9vh"
+    class="appium-visual-change-dialog"
+    append-to-body
+    draggable
+    :modal="false"
+    modal-penetrable
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <el-form label-position="top" size="small" class="appium-visual-change-form">
+      <el-form-item label="检测目标">
+        <el-radio-group
+          :model-value="normalizedConfig.mode"
+          @update:model-value="patchConfig({ mode: $event as AppiumVisualChangeConfig['mode'] })"
+        >
+          <el-radio-button label="selectedElement" :disabled="!hasSelectedElement">
+            当前选中元素
+          </el-radio-button>
+          <el-radio-button label="region">手动框选区域</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-alert
+        v-if="normalizedConfig.mode === 'selectedElement' && !hasSelectedElement"
+        type="warning"
+        :closable="false"
+        show-icon
+        title="当前没有可用的选中元素，请先选择组件或改为手动框选区域"
+      />
+
+      <el-form-item v-if="normalizedConfig.mode === 'region'" label="框选区域">
+        <el-button :icon="Aim" :loading="pickingRegion" @click="emit('pickRegion')">
+          {{ pickingRegion ? '请在设备预览拖拽' : '框选/拖动区域' }}
+        </el-button>
+      </el-form-item>
+
+      <div class="appium-visual-change-form__grid">
+        <el-form-item label="X">
+          <el-input-number
+            :model-value="normalizedConfig.region.x"
+            :min="0"
+            :max="99999"
+            :precision="0"
+            controls-position="right"
+            @update:model-value="patchRegion('x', $event)"
+          />
+        </el-form-item>
+        <el-form-item label="Y">
+          <el-input-number
+            :model-value="normalizedConfig.region.y"
+            :min="0"
+            :max="99999"
+            :precision="0"
+            controls-position="right"
+            @update:model-value="patchRegion('y', $event)"
+          />
+        </el-form-item>
+        <el-form-item label="宽度">
+          <el-input-number
+            :model-value="normalizedConfig.region.width"
+            :min="1"
+            :max="99999"
+            :precision="0"
+            controls-position="right"
+            @update:model-value="patchRegion('width', $event)"
+          />
+        </el-form-item>
+        <el-form-item label="高度">
+          <el-input-number
+            :model-value="normalizedConfig.region.height"
+            :min="1"
+            :max="99999"
+            :precision="0"
+            controls-position="right"
+            @update:model-value="patchRegion('height', $event)"
+          />
+        </el-form-item>
+        <el-form-item label="变化阈值 %">
+          <el-input-number
+            :model-value="normalizedConfig.changeRatioThreshold"
+            :min="0.01"
+            :max="100"
+            :step="0.1"
+            controls-position="right"
+            @update:model-value="patchConfig({ changeRatioThreshold: Number($event) })"
+          />
+        </el-form-item>
+        <el-form-item label="像素容差">
+          <el-input-number
+            :model-value="normalizedConfig.pixelmatchThreshold"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            controls-position="right"
+            @update:model-value="patchConfig({ pixelmatchThreshold: Number($event) })"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" @click="emit('confirm')">添加开始节点</el-button>
+    </template>
+  </el-dialog>
+</template>

package/src/appium-recorder/flow-copy.ts

@@ -58,6 +58,33 @@ function wireContinuation(step: AppiumRecordedStep, targetId: string) {
   if (!step.flow.noTargetId) setFlowTarget(step, 'noTargetId', targetId);
 }
 
+function isVisualChangeStart(step: AppiumRecordedStep) {
+  return step.visualChange?.role === 'start';
+}
+
+function isVisualChangeEnd(step: AppiumRecordedStep) {
+  return step.visualChange?.role === 'end';
+}
+
+function visualChangePairKeys(step: AppiumRecordedStep) {
+  const config = step.visualChange;
+  if (!config) return [];
+  return [
+    config.pairId ? `pair:${config.pairId}` : '',
+    step.id ? `start:${step.id}` : '',
+    config.startStepId ? `start:${config.startStepId}` : '',
+    config.pairLabel ? `label:${config.pairLabel}` : '',
+  ].filter(Boolean);
+}
+
+function hasCopiedVisualChangeStartForEnd(copiedSteps: AppiumRecordedStep[], endStep: AppiumRecordedStep) {
+  const endKeys = new Set(visualChangePairKeys(endStep));
+  return copiedSteps.some((step) => (
+    isVisualChangeStart(step)
+      && visualChangePairKeys(step).some((key) => endKeys.has(key))
+  ));
+}
+
 function branchConditionForTarget(
   steps: AppiumRecordedStep[],
   target: PasteTarget,
@@ -65,10 +92,10 @@ function branchConditionForTarget(
   if (!target.branch) return undefined;
   const anchor = steps[target.afterIndex];
   if (!anchor) return undefined;
+  if (anchor.flow?.nodeKind === 'condition') return anchor;
   if (anchor.flow?.parentConditionId && anchor.flow.parentBranch === target.branch) {
     return steps.find((step) => step.id === anchor.flow?.parentConditionId);
   }
-  if (anchor.flow?.nodeKind === 'condition') return anchor;
   return undefined;
 }
 
@@ -123,6 +150,9 @@ export function createFlowClipboard(steps: AppiumRecordedStep[], indexes: number
   if (copiedSteps.some((step) => step.type === 'launchApp')) {
     throw new Error('启动 APP 节点不能复制');
   }
+  if (copiedSteps.some((step) => isVisualChangeEnd(step) && !hasCopiedVisualChangeStartForEnd(copiedSteps, step))) {
+    throw new Error('检测画面变化结束节点不能单独复制');
+  }
   return { steps: clone(copiedSteps), rootIds };
 }
 
@@ -141,6 +171,11 @@ export function pasteFlowClipboard(
     throw new Error('目标分支不存在');
   }
 
+  const pairMap = new Map<string, string>();
+  clipboard.steps.filter(isVisualChangeStart).forEach((step) => {
+    const pairId = createId();
+    visualChangePairKeys(step).forEach((key) => pairMap.set(key, pairId));
+  });
   const copies = clipboard.steps.map((source) => {
     const step = clone(source);
     step.id = idMap.get(source.id) || createId();
@@ -168,6 +203,17 @@ export function pasteFlowClipboard(
       }
     }
     step.flow = Object.keys(flow).length ? flow : undefined;
+    if (step.visualChange) {
+      const nextPairId = visualChangePairKeys(source)
+        .map((key) => pairMap.get(key))
+        .find(Boolean);
+      step.visualChange = {
+        ...step.visualChange,
+        pairId: nextPairId || step.visualChange.pairId,
+        startStepId: idMap.get(step.visualChange.startStepId || '') || step.visualChange.startStepId,
+        endStepId: idMap.get(step.visualChange.endStepId || '') || step.visualChange.endStepId,
+      };
+    }
     return step;
   });
 

package/src/appium-recorder/flow-graph.ts

@@ -1,6 +1,7 @@
 import { Position, type Edge, type Node } from '@vue-flow/core';
 import * as dagre from '@dagrejs/dagre';
 import type { AppiumRecordedStep } from './types';
+import { defaultFlowKind as defaultKind, flowBranchLabel, isBooleanCondition } from './flow-labels';
 
 type DagreApi = typeof dagre;
 const dagreApi = ((dagre as DagreApi & { default?: DagreApi }).layout
@@ -25,6 +26,10 @@ export type InsertAction =
   | 'launchApp'
   | 'clearAppData'
   | 'popupCondition'
+  | 'checkboxState'
+  | 'radioButtonState'
+  | 'aiRecognition'
+  | 'textClick'
   | 'tapIfExists'
   | 'inputIfExists'
   | 'clearIfExists'
@@ -34,7 +39,12 @@ export type InsertAction =
   | 'assertText'
   | 'waitDisappear'
   | 'waitActivity'
-  | 'runScript';
+  | 'runScript'
+  | 'noop'
+  | 'log'
+  | 'visualChangeStart'
+  | 'visualChangeEnd'
+  | 'visualChange';
 
 export const PASTE_COMMAND = '__paste_flow_nodes__';
 export const FLOW_STEP_NODE_WIDTH = 340;
@@ -50,6 +60,7 @@ const FLOW_STANDARD_LINE_GAP = 24;
 const FLOW_BRANCH_TRUNK_GAP = 96;
 const FLOW_BRANCH_LABEL_GAP = 58;
 const FLOW_BRANCH_MIN_SPREAD = 260;
+const FLOW_BRANCH_SUBTREE_GAP = 80;
 
 export type FlowActionGroup = {
   title: string;
@@ -82,12 +93,14 @@ export type FlowGraphNodeData =
       canCopy: boolean;
       canEditInput: boolean;
       canExecute: boolean;
+      missingAiModel?: boolean;
     }
   | {
       kind: 'insert';
       actionGroups: FlowActionGroup[];
       afterIndex: number;
       branch?: FlowBranch;
+      branchLabel?: string;
       conditionIndex?: number;
       clipboardCount?: number;
       canOpenInsertMenu: boolean;
@@ -96,6 +109,8 @@ export type FlowGraphNodeData =
   | {
       kind: 'branch';
       branch: FlowBranch;
+      label: string;
+      width: number;
       conditionIndex: number;
     }
   | {
@@ -111,6 +126,7 @@ type StepItem = {
 };
 
 type BuildFlowGraphOptions = {
+  aiRecognitionModelConfigured?: boolean;
   expandedStepIndex: number | null;
   selectedCopyIndexes: number[];
   copyMode: boolean;
@@ -137,11 +153,12 @@ type Link = {
   visual?: boolean;
 };
 
-function defaultKind(step: AppiumRecordedStep): FlowKind {
-  if (step.flow?.nodeKind) return step.flow.nodeKind;
-  if (step.type === 'assertExists' || step.type === 'assertText') return 'assertion';
-  return 'action';
-}
+type BranchLayout = {
+  yesWidth: number;
+  noWidth: number;
+  centerGap: number;
+  totalWidth: number;
+};
 
 function nodeIdForStep(step: AppiumRecordedStep) {
   return `step:${step.id}`;
@@ -232,6 +249,21 @@ function estimateStepNodeHeight(label: { title: string; meta: string; note?: str
   return Math.max(FLOW_STEP_NODE_HEIGHT, 34 + textHeight);
 }
 
+function withLaunchAppAction(groups: FlowActionGroup[]) {
+  if (groups.some((group) => group.actions.some((action) => action.type === 'launchApp'))) return groups;
+  const launchAction = { type: 'launchApp' as const, label: '启动 App' };
+  let added = false;
+  const nextGroups = groups.map((group) => {
+    if (group.title !== '设备操作') return group;
+    added = true;
+    return {
+      ...group,
+      actions: [...group.actions, launchAction],
+    };
+  });
+  return added ? nextGroups : [...nextGroups, { title: '设备操作', actions: [launchAction] }];
+}
+
 export function buildFlowGraph(
   steps: AppiumRecordedStep[],
   options: BuildFlowGraphOptions,
@@ -242,9 +274,63 @@ export function buildFlowGraph(
   const layoutLinks: Link[] = [];
   const seenLinks = new Set<string>();
   const allMainItems = mainItems(items);
+  const branchLayouts = new Map<string, BranchLayout>();
+  const measuringBranches = new Set<string>();
+
+  function conditionBranchLayout(condition: AppiumRecordedStep): BranchLayout {
+    const cached = branchLayouts.get(condition.id);
+    if (cached) return cached;
+    if (measuringBranches.has(condition.id)) {
+      return {
+        yesWidth: FLOW_STEP_NODE_WIDTH,
+        noWidth: FLOW_STEP_NODE_WIDTH,
+        centerGap: FLOW_BRANCH_MIN_SPREAD * 2,
+        totalWidth: FLOW_BRANCH_MIN_SPREAD * 2 + FLOW_STEP_NODE_WIDTH,
+      };
+    }
+
+    measuringBranches.add(condition.id);
+    const branchWidth = (branch: FlowBranch) => Math.max(
+      FLOW_STEP_NODE_WIDTH,
+      ...directBranchItems(items, condition.id, branch).map(({ step }) => (
+        defaultKind(step) === 'condition'
+          ? conditionBranchLayout(step).totalWidth
+          : FLOW_STEP_NODE_WIDTH
+      )),
+    );
+    const yesWidth = branchWidth('yes');
+    const noWidth = branchWidth('no');
+    const centerGap = Math.max(
+      FLOW_BRANCH_MIN_SPREAD * 2,
+      yesWidth / 2 + noWidth / 2 + FLOW_BRANCH_SUBTREE_GAP,
+    );
+    const sideExtent = Math.max(
+      centerGap / 2 + yesWidth / 2,
+      centerGap / 2 + noWidth / 2,
+    );
+    const layout = {
+      yesWidth,
+      noWidth,
+      centerGap,
+      totalWidth: Math.max(FLOW_STEP_NODE_WIDTH, sideExtent * 2),
+    };
+    measuringBranches.delete(condition.id);
+    branchLayouts.set(condition.id, layout);
+    return layout;
+  }
+
+  items
+    .filter(({ step }) => defaultKind(step) === 'condition')
+    .forEach(({ step }) => conditionBranchLayout(step));
 
   const addNode = (node: FlowGraphNode) => {
-    nodes.push(node);
+    nodes.push({
+      ...node,
+      dimensions: {
+        width: Number(node.width) || FLOW_STEP_NODE_WIDTH,
+        height: Number(node.height) || FLOW_STEP_NODE_HEIGHT,
+      },
+    } as FlowGraphNode);
   };
   const addVisibleLink = (source: string, target: string, branch?: FlowBranch) => {
     addUniqueLink(links, seenLinks, {
@@ -266,6 +352,11 @@ export function buildFlowGraph(
   ) => {
     const id = insertNodeId(afterIndex, branch, condition?.step.id);
     const isStartInsert = afterIndex < 0 && !branch;
+    const previousStep = afterIndex >= 0 ? steps[afterIndex] : undefined;
+    const canLaunchAfterClearAppData = !isStartInsert
+      && !branch
+      && previousStep?.type === 'clearAppData'
+      && !steps.some((step) => step.type === 'launchApp');
     addNode({
       id,
       type: 'flow-node',
@@ -279,9 +370,14 @@ export function buildFlowGraph(
       connectable: false,
       data: {
         kind: 'insert',
-        actionGroups: isStartInsert ? options.startActionGroups : options.mainActionGroups,
+        actionGroups: isStartInsert
+          ? options.startActionGroups
+          : canLaunchAfterClearAppData
+            ? withLaunchAppAction(options.mainActionGroups)
+            : options.mainActionGroups,
         afterIndex,
         branch,
+        branchLabel: branch && condition ? flowBranchLabel(condition.step, branch) : undefined,
         conditionIndex: condition?.index,
         clipboardCount: options.clipboardCount,
         canOpenInsertMenu: options.canOpenInsertMenu,
@@ -295,11 +391,13 @@ export function buildFlowGraph(
     const id = nodeIdForStep(item.step);
     const flowKind = defaultKind(item.step);
     const label = options.labelStep(item.step);
-    const cardMinHeight = estimateStepNodeHeight(label);
+    // 字数估算仅用于首次布局，不强制卡片高度；实际换行由浏览器决定。
+    const cardMinHeight = FLOW_STEP_NODE_HEIGHT;
+    const estimatedCardHeight = estimateStepNodeHeight(label);
     const estimatedNodeHeight = options.expandedStepIndex === item.index
-      ? cardMinHeight + FLOW_EXPANDED_NODE_HEIGHT
-      : cardMinHeight;
-    const nodeHeight = Math.max(estimatedNodeHeight, Math.ceil(options.measuredNodeHeights?.[id] || 0));
+      ? estimatedCardHeight + FLOW_EXPANDED_NODE_HEIGHT
+      : estimatedCardHeight;
+    const nodeHeight = Math.max(cardMinHeight, Math.ceil(options.measuredNodeHeights?.[id] || estimatedNodeHeight));
     addNode({
       id,
       type: 'flow-node',
@@ -325,30 +423,34 @@ export function buildFlowGraph(
         copyMode: options.copyMode,
         disabled: item.step.type === 'launchApp' || item.step.type === 'clearAppData'
           ? options.isAppExecutionDisabled(item.step.type)
-          : options.disabled,
+          : item.step.type === 'aiRecognition' ? options.isInsertActionDisabled('aiRecognition') : options.disabled,
         removeDisabled: options.removeDisabled,
         launching: options.launchingStepId === item.step.id,
-        canCopy: item.step.type !== 'launchApp' && item.step.type !== 'clearAppData',
+        canCopy: item.step.type !== 'launchApp'
+          && item.step.type !== 'clearAppData'
+          && item.step.visualChange?.role !== 'end',
         canEditInput: item.step.type === 'input' || item.step.type === 'inputIfExists',
-        canExecute: item.step.type === 'launchApp' || item.step.type === 'clearAppData',
+        canExecute: item.step.type === 'launchApp' || item.step.type === 'clearAppData' || item.step.type === 'aiRecognition',
+        missingAiModel: item.step.type === 'aiRecognition' && !options.aiRecognitionModelConfigured,
       },
     });
   };
 
   const addBranchNode = (condition: StepItem, branch: FlowBranch) => {
     const id = branchNodeId(condition.step, branch);
+    const width = condition.step.type === 'textClick' ? 116 : isBooleanCondition(condition.step) ? 56 : FLOW_BRANCH_NODE_WIDTH;
     addNode({
       id,
       type: 'flow-node',
       position: { x: 0, y: 0 },
       sourcePosition: Position.Bottom,
       targetPosition: Position.Top,
-      width: FLOW_BRANCH_NODE_WIDTH,
+      width,
       height: FLOW_BRANCH_NODE_HEIGHT,
       selectable: false,
       draggable: false,
       connectable: false,
-      data: { kind: 'branch', branch, conditionIndex: condition.index },
+      data: { kind: 'branch', branch, label: flowBranchLabel(condition.step, branch), width, conditionIndex: condition.index },
     });
     return id;
   };
@@ -519,19 +621,6 @@ export function buildFlowGraph(
   const setCenterX = (node: FlowGraphNode, x: number) => {
     node.position.x = Math.round(x - nodeWidth(node) / 2);
   };
-  const normalizeBranchPositions = () => {
-    positionedNodes
-      .filter((node) => node.data?.kind === 'split')
-      .forEach((splitNode) => {
-        const branchLinks = links.filter((link) => link.source === splitNode.id && link.branch);
-        const yesNode = nodeById.get(branchLinks.find((link) => link.branch === 'yes')?.target || '');
-        const noNode = nodeById.get(branchLinks.find((link) => link.branch === 'no')?.target || '');
-        const splitX = centerX(splitNode);
-        const spread = FLOW_BRANCH_MIN_SPREAD;
-        if (yesNode) setCenterX(yesNode, splitX - spread);
-        if (noNode) setCenterX(noNode, splitX + spread);
-      });
-  };
   const canAlignStepAfterFlowPoint = (sourceNode: FlowGraphNode, stepNode: FlowGraphNode) => {
     if (stepNode.data?.kind !== 'step') return false;
     return sourceNode.data?.kind === 'insert' || sourceNode.data?.kind === 'branch';
@@ -635,43 +724,37 @@ export function buildFlowGraph(
       if (!moved) break;
     }
   };
+  // 按依赖顺序传递坐标，避免固定轮数只对齐长分支的前半段。
+  // 旧脚本若含回边，保留 Dagre 的纵向顺序，避免拓扑排序抛错。
+  const orderedNodeIds = dagreApi.graphlib.alg.isAcyclic(dagreGraph)
+    ? dagreApi.graphlib.alg.topsort(dagreGraph)
+    : [...positionedNodes].sort((a, b) => a.position.y - b.position.y).map((node) => node.id);
+  const nodeOrder = new Map(orderedNodeIds.map((id, index) => [id, index]));
+  const orderedLinks = [...links].sort((a, b) => (
+    (nodeOrder.get(a.source) || 0) - (nodeOrder.get(b.source) || 0)
+  ));
   const alignVisibleChainGeometry = () => {
-    for (let pass = 0; pass < 4; pass += 1) {
-      links.forEach((link) => {
-        const source = nodeById.get(link.source);
-        const target = nodeById.get(link.target);
-        if (!source || !target?.data) return;
-        if (!['branch', 'split'].includes(target.data.kind)) return;
-
-        const lineGap = target.data.kind === 'split'
-          ? FLOW_BRANCH_TRUNK_GAP
-          : FLOW_BRANCH_LABEL_GAP;
-        target.position.y = Math.round(source.position.y + nodeHeight(source) + lineGap);
-        if (target.data.kind === 'split') {
-          setCenterX(target, centerX(source));
-        }
-      });
-      normalizeBranchPositions();
-
-      links.forEach((link) => {
-        const source = nodeById.get(link.source);
-        const target = nodeById.get(link.target);
-        if (!source || target?.data?.kind !== 'insert') return;
-        target.position.y = Math.round(source.position.y + nodeHeight(source) + FLOW_STANDARD_LINE_GAP);
-        setCenterX(target, centerX(source));
-      });
-      alignableLinks.forEach((link) => {
-        const source = nodeById.get(link.source);
-        const target = nodeById.get(link.target);
-        if (!source || !target || !canAlignStepAfterFlowPoint(source, target)) return;
-        target.position.y = Math.round(source.position.y + nodeHeight(source) + FLOW_STANDARD_LINE_GAP);
-        setCenterX(target, centerX(source));
-      });
-    }
+    orderedLinks.forEach((link) => {
+      const source = nodeById.get(link.source);
+      const target = nodeById.get(link.target);
+      if (!source || !target?.data) return;
+      const kind = target.data.kind;
+      if (!['branch', 'split', 'insert'].includes(kind) && !canAlignStepAfterFlowPoint(source, target)) return;
+
+      const lineGap = kind === 'split'
+        ? FLOW_BRANCH_TRUNK_GAP
+        : kind === 'branch' ? FLOW_BRANCH_LABEL_GAP : FLOW_STANDARD_LINE_GAP;
+      target.position.y = Math.round(source.position.y + nodeHeight(source) + lineGap);
+      let x = centerX(source);
+      if (target.data.kind === 'branch') {
+        const conditionId = steps[target.data.conditionIndex].id;
+        const spread = (branchLayouts.get(conditionId)?.centerGap || FLOW_BRANCH_MIN_SPREAD * 2) / 2;
+        x += target.data.branch === 'yes' ? -spread : spread;
+      }
+      setCenterX(target, x);
+    });
   };
 
-  const alignableLinks = [...links, ...layoutLinks];
-
   alignVisibleChainGeometry();
 
   resolveStepCollisions();