Archived
`sub` 声称是「画布上的第二行小字」,但画笔里那支只在 `variant !== 'business'` (步骤图)才走,而全仓的调用点一律是 business:这个字段写了、存了、 一次也没显示过。属性面上那句提示是句假话。 整条清:属性面的一行 · `ProcessNode.sub`(契约) · `FlowNode.sub` · 图↔包两处映射 · 画笔里那支画不出来的分支(连同它带来的「两种画法」分叉, 现在节点框里就一行活动名) · 节点宽度算法里 `node.sub || node.ghost` 的宽框判据 (sub 没了,只剩 ghost 决定宽窄)。 存量数据不受影响:库里没有一条带 sub 的定义(查过),schema 非严格, 真有旧值也只是解析时被剥掉。 五闸绿;契约快照随本提交入库(去一个可选字段,加法的反面,无下游)。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
171 lines
7.4 KiB
TypeScript
171 lines
7.4 KiB
TypeScript
/**
|
|
* 流程包 → 画布图模型:**连线即映射**的可视一侧。
|
|
*
|
|
* 画布件(`flow-layout` / `flow-node-paint` / `FlowDiagram`)是框架无关的纯几何与画笔,
|
|
* 它认的是 `FlowGraph`;我们的权威模型是 `ProcessPackage`。这里做且只做一次形状转换,
|
|
* **不产生任何新语义** —— 节点仍是编排层五要素,审批点仍是系统内置人裁节点(共用方框几何而已)。
|
|
*/
|
|
import type { ProcessPackage } from '@contracts';
|
|
import type { FlowEdge, FlowGraph, FlowNode } from './flow-layout.ts';
|
|
|
|
/** 节点实例落位:running / waiting / terminal 决定描边高亮,不改几何 */
|
|
export type InstanceMark = {
|
|
readonly nodeId: string;
|
|
readonly running: boolean;
|
|
readonly waiting: boolean;
|
|
readonly activated: boolean;
|
|
readonly terminal?: string | undefined;
|
|
};
|
|
|
|
/** 每行最多几个方框 —— 蛇形折行的行宽;取原型 business 预设的观感 */
|
|
const ROW_WIDTH = 4;
|
|
|
|
export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark[] = []): FlowGraph {
|
|
const markOf = new Map(marks.map((m) => [m.nodeId, m]));
|
|
|
|
/*
|
|
* 手绘图存证优先:编辑器保存过,**手绘几何即呈现真相**。
|
|
* 运行标注仍要每次现算(它是运行态,不入存证),合到存证节点的 note 上。
|
|
*/
|
|
const stored = readStoredDiagram(pkg.diagram);
|
|
if (stored !== undefined) {
|
|
/*
|
|
* **语义里有、存证里没有的节点要补画出来** —— 不补,画布就看不见它:
|
|
* 异常看板指着一个图上不存在的节点,点了也定位不到(实测:API 直存的包
|
|
* 语义层加了新节点、diagram 还是旧的,picker 里根本没有那个节点)。
|
|
* 编辑器保存时两层同步,不会走到这;这是给「语义先行」的数据兜底。
|
|
* 补的节点没有几何,按 60px 一档排在图纸下缘 —— 位置丑没关系,看得见才能修。
|
|
*/
|
|
const drawn = new Set(stored.nodes.map((n) => n.id));
|
|
const missing = pkg.nodes.filter((n) => !drawn.has(n.id));
|
|
const bottom = stored.nodes.reduce((max, n) => Math.max(max, (n.y ?? 0)), 0) + 90;
|
|
const extras: FlowNode[] = missing.map((n, i) => ({
|
|
id: n.id,
|
|
kind: n.kind === 'start' ? ('start' as const) : n.kind === 'end' ? ('end' as const) : ('activity' as const),
|
|
label: n.label,
|
|
...(n.kind === 'approval' ? { flavor: 'approval' as const } : {}),
|
|
...(n.kind === 'activity' ? { code: n.id, act: n.activityId } : {}),
|
|
x: 30 + (i % 6) * 160,
|
|
y: bottom + Math.floor(i / 6) * 60,
|
|
}));
|
|
const semanticById = new Map(pkg.nodes.map((n) => [n.id as string, n]));
|
|
const withState = (list: readonly FlowNode[]) =>
|
|
list.map((n) => {
|
|
const state = stateOf(markOf.get(n.id));
|
|
const sem = semanticById.get(n.id);
|
|
// 链接的实现(装载面)以语义为准回填 —— 存证里的 act 只是画布工作痕迹
|
|
const linked = sem?.kind === 'activity' ? { act: sem.activityId as string } : {};
|
|
const base = { ...n, ...linked };
|
|
return state === undefined ? base : { ...base, note: state };
|
|
});
|
|
/*
|
|
* 边属性(编号/条件/映射)从语义边回填到画布边:属性卡编辑的是画布工作副本,
|
|
* 保存时 graph-to-pkg 又以它为准 —— 回填缺席的话,打开即保存会把契约冲掉。
|
|
* 顺序流全是真边(卡点画法已废),按 from→to 直接认亲;code 即边号 E1、E2…
|
|
*/
|
|
const semEdge = new Map(pkg.edges.map((e) => [`${e.from}→${e.to}`, e]));
|
|
const edges = stored.edges.map((e) => {
|
|
const sem = semEdge.get(`${e.from}→${e.to}`);
|
|
if (sem === undefined) return e;
|
|
return {
|
|
...e,
|
|
code: sem.id as string,
|
|
...(sem.condition === undefined ? {} : { condition: sem.condition }),
|
|
};
|
|
});
|
|
return { ...stored, edges, nodes: [...withState(stored.nodes), ...withState(extras)] };
|
|
}
|
|
|
|
const nodes: FlowNode[] = pkg.nodes.map((n) => {
|
|
const state = stateOf(markOf.get(n.id));
|
|
|
|
if (n.kind === 'start') return { id: n.id, kind: 'start', label: n.label };
|
|
if (n.kind === 'end') return { id: n.id, kind: 'end', label: n.label };
|
|
|
|
const base: FlowNode = {
|
|
id: n.id,
|
|
kind: 'activity',
|
|
label: n.label,
|
|
code: n.id,
|
|
...(state === undefined ? {} : { note: state }),
|
|
};
|
|
if (n.kind === 'approval') {
|
|
// approval **不是一种活动**:它挂在 kind:"activity" 下仅因共用同一套方框几何
|
|
return { ...base, flavor: 'approval' };
|
|
}
|
|
return {
|
|
...base,
|
|
// 契约不带负责人岗位 —— 角标不再标岗位,链接的实现(装载面)以 act 携带
|
|
act: n.activityId,
|
|
};
|
|
});
|
|
|
|
/** 蛇形折行:偶数行 L→R、奇数行 R→L —— 行的划分交给拓扑序 */
|
|
const order = topologicalOrder(pkg);
|
|
const rows: string[][] = [];
|
|
for (let i = 0; i < order.length; i += ROW_WIDTH) rows.push(order.slice(i, i + ROW_WIDTH));
|
|
|
|
const edges: FlowEdge[] = pkg.edges.map((e) => ({
|
|
from: e.from,
|
|
to: e.to,
|
|
code: e.id as string,
|
|
// 回边按声明走「回 A4 重开新实例」,视觉上标红以区分正向流转
|
|
...(e.tone !== undefined ? { tone: e.tone } : e.reopen ? { tone: 'bad' as const } : {}),
|
|
...(e.label === undefined ? (e.condition === undefined ? {} : { label: e.condition }) : { label: e.label }),
|
|
}));
|
|
|
|
return { nodes, rows, anchors: [], edges };
|
|
}
|
|
|
|
/**
|
|
* 手绘图存证的在场校验:`diagram` 由本仓 `graph-to-pkg` 序列化而来,结构即 FlowGraph;
|
|
* 这里只验骨架在不在(nodes/edges 数组、非空),不逐字段复检 —— 写入侧是唯一生产者。
|
|
*/
|
|
function readStoredDiagram(d: Record<string, unknown> | undefined): FlowGraph | undefined {
|
|
if (d === undefined) return undefined;
|
|
const nodes = d['nodes'];
|
|
const edges = d['edges'];
|
|
if (!Array.isArray(nodes) || nodes.length === 0 || !Array.isArray(edges)) return undefined;
|
|
return {
|
|
nodes,
|
|
edges,
|
|
rows: Array.isArray(d['rows']) ? d['rows'] : [],
|
|
anchors: Array.isArray(d['anchors']) ? d['anchors'] : [],
|
|
manual: d['manual'] === true,
|
|
} as FlowGraph;
|
|
}
|
|
|
|
/** 运行标注:节点实例态 → 画布角注文字;未激活不标 */
|
|
function stateOf(mark: InstanceMark | undefined): string | undefined {
|
|
if (mark === undefined || !mark.activated) return undefined;
|
|
if (mark.terminal !== undefined) return mark.terminal === 'released' ? '已放行' : '已终止';
|
|
return mark.running ? '运行中' : mark.waiting ? '等待中' : '已激活';
|
|
}
|
|
|
|
/** 拓扑序:回边不参与定序(否则成环),同层按声明顺序稳定排列 */
|
|
function topologicalOrder(pkg: ProcessPackage): string[] {
|
|
const ids = pkg.nodes.map((n) => n.id as string);
|
|
const forward = pkg.edges.filter((e) => !e.reopen);
|
|
const indegree = new Map<string, number>(ids.map((id) => [id, 0]));
|
|
for (const e of forward) indegree.set(e.to, (indegree.get(e.to) ?? 0) + 1);
|
|
|
|
const ready = ids.filter((id) => indegree.get(id) === 0);
|
|
const out: string[] = [];
|
|
const seen = new Set<string>();
|
|
|
|
while (ready.length > 0) {
|
|
const id = ready.shift()!;
|
|
if (seen.has(id)) continue;
|
|
seen.add(id);
|
|
out.push(id);
|
|
for (const e of forward.filter((x) => x.from === id)) {
|
|
const left = (indegree.get(e.to) ?? 0) - 1;
|
|
indegree.set(e.to, left);
|
|
if (left === 0) ready.push(e.to);
|
|
}
|
|
}
|
|
// 环(理论上闭合校验已挡住)或孤点:兜底补齐,画布不因数据异常而空白
|
|
for (const id of ids) if (!seen.has(id)) out.push(id);
|
|
return out;
|
|
}
|