在流程图可视化开发中，节点之间的连线往往需要采用正交路由，也就是横竖折线的走线方式。当画布上节点数量变多、布局变密时，如果所有连线的通道宽度都固定成一个常量，就很容易出现多根线叠在一起、完全分不清起止点的情况。为了让连线能根据当前视图的缩放比例、节点平均间距以及具体路由方向来实时改变所占通道的粗细与留白，我们需要在TypeScript里建立一套既能描述路由方向，又能表达动态宽度计算规则的类型体系。
正交路由与动态宽度的核心概念
正交路由指的是连线只能沿水平或垂直方向转折，常见于BPMN、工作流编辑器等场景。它的好处是走线规整、易于人眼追踪，但缺点是在复杂图里水平或垂直通道会成为稀缺资源。静态宽度一般写成const CHANNEL_WIDTH = 20，这在简单图里没问题，可一旦用户放大画布或批量移动节点，固定值就会导致通道过宽浪费空间或者过窄相互入侵。
动态通道宽度调整的本质，是把宽度从常量变成函数输出：输入当前视图信息，输出该路由段应占的像素宽。我们要用TypeScript把“视图信息”“路由方向”“宽度系数”三者关系固化下来。比如路由方向只能是水平或垂直，宽度系数必须落在合理区间，否则在编译阶段就报错，而不是等到运行时连线乱掉才排查。
下面先定义一个描述路由方向的基础联合类型，以及视图状态的接口。方向用字面量约束，视图状态包含缩放与节点密度，这些都是后续宽度计算类型的基石。
type OrthRouteDir = 'horizontal' | 'vertical';
interface ViewState {
scale: number;
nodeDensity: number;
}
interface ChannelConfig {
baseWidth: number;
gapFactor: number;
}
用泛型与条件类型建模动态宽度规则
如果只写function calcWidth(dir: string, view: ViewState): number，那方向传成'diag'也不会报错，这就失去了类型保护意义。我们可以引入泛型，让函数根据传入的方向自动推导出不同的宽度计算分支，并用条件类型限制系数范围。
具体做法是定义一个DynamicChannelType，它接收方向泛型与配置类型，通过条件类型判断：当方向为水平时，宽度由基准宽加密度修正；当为垂直时，再叠加缩放修正。这样在调用处，如果传了错误的方向或越界的gapFactor，编译器直接标红。下面代码展示了类型与实现的配合。
type ValidGap = number & { __brand: 'gap_in_0_1' };
function asValidGap(n: number): ValidGap {
if (n < 0 || n > 1) throw new Error('gapFactor must be between 0 and 1');
return n as ValidGap;
}
type DynamicChannelType<D extends OrthRouteDir> = D extends 'horizontal'
? (view: ViewState, cfg: ChannelConfig) => number
: (view: ViewState, cfg: ChannelConfig) => number;
const calcH: DynamicChannelType<'horizontal'> = (v, c) =>
c.baseWidth + v.nodeDensity * c.gapFactor * 10;
const calcV: DynamicChannelType<'vertical'> = (v, c) =>
c.baseWidth * v.scale + c.gapFactor * 5;
上面的ValidGap利用品牌类型防止非法系数混入，虽然运行时仍需断言，但调用链上其他模块若误写gapFactor: 2会在类型层被拦截。这种写法比纯number更贴合“动态可调但受限”的业务语义。
在流程图连线系统中的集成与校验
定义好类型后，要将其落到真实的连线渲染逻辑里。通常流程图库会有一个EdgeRouter类，负责给每条边算路径。我们可以在路由方法上标注使用动态通道类型，并在批量更新时统一重算。这样当用户拖拽节点触发onLayoutChange，系统就调对应方向的宽度函数，得到新通道值再刷新SVG或Canvas。
为了验证类型真的能拦错，我们写一个错误示例：把垂直方向路由错传水平配置，或把gapFactor设成超出区间的值。在开启了strict模式的tsconfig下，这些都会让tsc失败，说明类型体系生效。同时，由于宽度是函数而非定值，缩放画布时只需改ViewState.scale，所有连线自动按规则变宽变窄，不需要手工遍历改常量。
class EdgeRouter {
route(dir: OrthRouteDir, view: ViewState, cfg: ChannelConfig): number {
const fn = dir === 'horizontal' ? calcH : calcV;
return fn(view, cfg);
}
}
const router = new EdgeRouter();
const view: ViewState = { scale: 1.2, nodeDensity: 3 };
const cfg: ChannelConfig = { baseWidth: 16, gapFactor: asValidGap(0.4) };
// 正确调用
router.route('vertical', view, cfg);
// 若写 router.route('horizontal', view, { baseWidth: 16, gapFactor: 2 }) 则类型报错
从维护角度看，这种类型定义把“通道宽度怎么调”的决策收敛到少数的计算函数与受控配置里。新成员接手代码时，看DynamicChannelType就知道宽度不是随便写的，必须走方向分支与系数校验。长远来说，当流程图要支持正交路由的避障算法时，动态宽度类型还能扩展成接收障碍物列表的更高阶函数，而不必推翻原有结构。
TypeScript正交路由动态通道宽度修改时间：2026-08-17 18:16:36