三面拆分⑭:纯编排第三轮 —— 活动卸岗位、卡点废除全真边、边号 E1–En 图上可选
活动契约不带负责人岗位(用户定): - schema:活动节点删 owner(审批点的 approver 是「卡到人的工位」的功能语义,保留) - 运行时:活动任务默认**全员轮值**(在岗候选并集、最闲者先、staffId 稳定排序, owner-resolved 事件岗位记「(全员轮值)」);运营分派机制落地后让位 —— 债已记 - closure:活动点不核岗位,missing-owner-position 只出自审批点 - 员工面链条:活动点报**实际承接人**(实例→任务→人),没起的如实报「轮值待派」; NodeInstance 公开 taskId/approvalId(店面读回,与端口型合流) - 画布/导出依赖文件/属性卡全线摘岗位;属性卡活动点明说「分派归运营」 卡点画法废除,顺序流一律真边(用户定): - 种子图重画:四条回跳/直达(E4 直接定价、E6 选型后定价、E10 不通过、E12 有异议) 全部画成折线真边,车道分层零交叉(顶 y30 / y190 / y230 / 缝隙对开 / 底 y380); 卡点节点删净,图=恰 10 语义节点 + 14 真边一一对应(测试守着) - graph-to-pkg 卡点认亲机制删除;pkg-to-graph 直接按 from→to 认亲 - 元素盘删卡点件;图例、属性卡卡点分支、kindLabel/kindTone 随删 边号 E1、E2…(用户定): - 语义边 id 即边号:种子 E1–E14;合并器铸号(旧边保号、新边取下一空号,回归测试守着) - 画布线标带号(`E3 直接寻源`,无注记的边也标 `E1`);拣选条以边号立牌, **条件不再上按钮** —— 条件/映射只住属性面 - 边在图上可选中:FlowDiagram 连线加宽透明命中垫(边可点时注解层提到形状层上), 点线即切属性卡到该边(实测 E4 命中) 测试:closure 28、advance-order 6、graph-to-pkg 5(新增铸号例)、seed 8、 端到端八例真库全绿(全员轮值下照跑);五闸退出码验过。 库:purge 后重种,唯一 unified-quote@v1 生效(双面判据齐)。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
@@ -68,14 +68,6 @@ function flowsOf(packages: readonly ProcessPackage[]) {
|
||||
|
||||
/* ── 边属性:传递契约(条件 + 映射)──────────────────────────────────── */
|
||||
|
||||
/** 卡点 id → 去向节点 id(边属性按语义对端认亲:A5→c_reject 即 A5→A4) */
|
||||
function calloutToOf(graph: FlowGraph | null): Map<string, string> | undefined {
|
||||
if (graph === null) return undefined;
|
||||
return new Map(
|
||||
graph.nodes.filter((n) => n.kind === 'callout' && n.to !== undefined).map((n) => [n.id, n.to!]),
|
||||
);
|
||||
}
|
||||
|
||||
/** 映射行的工作形状 —— 语义边 mapping 的元素;设计者只见三种来源,其余是系统隐性上下文 */
|
||||
type MapRow = { target: string; source: Record<string, unknown> & { from: string } };
|
||||
const SOURCE_KINDS = [
|
||||
@@ -84,21 +76,13 @@ const SOURCE_KINDS = [
|
||||
{ k: 'constant', label: '常量' },
|
||||
] as const;
|
||||
|
||||
function EdgeProps({
|
||||
edge,
|
||||
toSem,
|
||||
onPatch,
|
||||
}: {
|
||||
edge: FlowEdge;
|
||||
toSem: string;
|
||||
onPatch: (f: (e: FlowEdge) => FlowEdge) => void;
|
||||
}) {
|
||||
function EdgeProps({ edge, onPatch }: { edge: FlowEdge; onPatch: (f: (e: FlowEdge) => FlowEdge) => void }) {
|
||||
const rows = (edge.mapping ?? []) as MapRow[];
|
||||
const setRows = (next: MapRow[]) => onPatch((e) => ({ ...e, mapping: next }));
|
||||
const patchRow = (i: number, f: (r: MapRow) => MapRow) => setRows(rows.map((r, j) => (j === i ? f(r) : r)));
|
||||
return (
|
||||
<div className="g-props">
|
||||
<Prop ico="git-branch" title={`条件 · ${edge.from} → ${toSem}`} extra="多出边异或:命中即走;留空 = 默认兜底">
|
||||
<Prop ico="git-branch" title={`${edge.code ?? '边'} · ${edge.from} → ${edge.to}`} extra="多出边异或:命中即走;条件留空 = 默认兜底">
|
||||
<Field k="S-FEEL 条件" hint="如 needSourcing = true;可用 and / or 连接。留空即无条件(默认边,至多一条)">
|
||||
<input
|
||||
className="g-input mono"
|
||||
@@ -272,7 +256,7 @@ function minimalFlow(id: string, name: string): ProcessPackage {
|
||||
{ id: 'start', kind: 'start', label: '开始', layout: { row: 0, col: 0, x: 30, y: 70 } },
|
||||
{ id: 'end', kind: 'end', label: '结束', layout: { row: 0, col: 1, x: 150, y: 70 } },
|
||||
],
|
||||
edges: [{ id: 'e-start-end', from: 'start', to: 'end', mapping: [], reopen: false }],
|
||||
edges: [{ id: 'E1', from: 'start', to: 'end', mapping: [], reopen: false }],
|
||||
variables: [],
|
||||
});
|
||||
}
|
||||
@@ -532,17 +516,8 @@ function FlowLab({
|
||||
};
|
||||
|
||||
const kindLabel = (n: FlowNode) =>
|
||||
n.kind === 'activity'
|
||||
? n.flavor === 'approval'
|
||||
? '审批点'
|
||||
: '活动点'
|
||||
: n.kind === 'callout'
|
||||
? '卡点'
|
||||
: n.kind === 'start'
|
||||
? '调用接口'
|
||||
: '显式终点';
|
||||
const kindTone = (n: FlowNode) =>
|
||||
n.kind === 'activity' ? (n.flavor === 'approval' ? 'warn' : 'auto') : n.kind === 'callout' ? 'danger' : 'mute';
|
||||
n.kind === 'activity' ? (n.flavor === 'approval' ? '审批点' : '活动点') : n.kind === 'start' ? '调用接口' : '显式终点';
|
||||
const kindTone = (n: FlowNode) => (n.kind === 'activity' ? (n.flavor === 'approval' ? 'warn' : 'auto') : 'mute');
|
||||
|
||||
// 画布上的选中态:diagram-js 给每个形状挂了 data-element-id,外挂一个类,不改画布件
|
||||
useEffect(() => {
|
||||
@@ -680,7 +655,7 @@ function FlowLab({
|
||||
nodeId: n.id,
|
||||
label: n.label,
|
||||
activityId: n.activityId,
|
||||
owner: n.owner,
|
||||
// 契约不带负责人岗位 —— 分派归运营,依赖文件只描述干什么
|
||||
// 编排上手写的注记(给人读)
|
||||
declaredIn: n.in ?? [],
|
||||
declaredOut: n.out ?? [],
|
||||
@@ -825,7 +800,7 @@ function FlowLab({
|
||||
<FlowFigureBlock
|
||||
key={`${pkg.id}@${pkg.version}`}
|
||||
title={`${pkg.name} v${pkg.version}`}
|
||||
oneLiner={`蓝 = 活动点 · 琥珀 = 审批点 · 红 = 卡点`}
|
||||
oneLiner={`蓝 = 活动点 · 琥珀 = 审批点 · 线标 = 边号`}
|
||||
graph={graph}
|
||||
drilledIds={nodes.filter((n) => n.kind === 'activity').map((n) => n.id)}
|
||||
/*
|
||||
@@ -835,6 +810,12 @@ function FlowLab({
|
||||
*/
|
||||
canEdit
|
||||
onNodeClick={(nid) => { setSel(nid); setSelEdge(null); }}
|
||||
onEdgeClick={(edge) => {
|
||||
const i = (graph?.edges ?? []).findIndex(
|
||||
(x) => x.from === edge.from && x.to === edge.to && x.code === edge.code,
|
||||
);
|
||||
if (i >= 0) { setSelEdge(i); setSel(null); }
|
||||
}}
|
||||
onEditNodeText={async (nid, p2) => {
|
||||
setGraph((g) =>
|
||||
g === null
|
||||
@@ -949,22 +930,18 @@ function FlowLab({
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* 边拣选条:边属性 = 传递契约(条件 + 映射)—— 图只定顺序,契约在这儿填 */}
|
||||
{/* 边拣选条:边号立牌(E1、E2…),条件住属性面不上按钮 —— 图只定顺序,契约在属性里填 */}
|
||||
<div className="g-picker">
|
||||
{(graph?.edges ?? []).map((e, i) => {
|
||||
const toSem = calloutToOf(graph)?.get(e.to) ?? e.to;
|
||||
const brief = e.condition !== undefined && e.condition !== '' ? ` [${e.condition}]` : '';
|
||||
return (
|
||||
<button
|
||||
key={`${e.from}→${e.to}-${i}`}
|
||||
className={'g-pick t-mute' + (selEdge === i ? ' on' : '')}
|
||||
onClick={() => { setSelEdge(selEdge === i ? null : i); setSel(null); }}
|
||||
>
|
||||
<b className="g-mono">{e.from}→{toSem}</b>
|
||||
{(e.label ?? '') + brief}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{(graph?.edges ?? []).map((e, i) => (
|
||||
<button
|
||||
key={`${e.from}→${e.to}-${i}`}
|
||||
className={'g-pick t-mute' + (selEdge === i ? ' on' : '')}
|
||||
onClick={() => { setSelEdge(selEdge === i ? null : i); setSel(null); }}
|
||||
>
|
||||
<b className="g-mono">{e.code ?? `边${i + 1}`}</b>
|
||||
{e.from}→{e.to}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{node === null && selEdge === null ? (
|
||||
<Note>
|
||||
@@ -974,7 +951,6 @@ function FlowLab({
|
||||
) : node === null && selEdge !== null && graph !== null ? (
|
||||
<EdgeProps
|
||||
edge={graph.edges[selEdge]!}
|
||||
toSem={calloutToOf(graph)?.get(graph.edges[selEdge]!.to) ?? graph.edges[selEdge]!.to}
|
||||
onPatch={(f) => {
|
||||
setGraph((g) =>
|
||||
g === null ? g : { ...g, edges: g.edges.map((e, i) => (i === selEdge ? f(e) : e)) },
|
||||
@@ -1036,25 +1012,29 @@ function FlowLab({
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
<Field
|
||||
k={node.flavor === 'approval' ? '审批岗位' : '责任岗位'}
|
||||
hint={node.flavor === 'approval' ? '审批单派给它' : '任务的负责人由它解析而来'}
|
||||
>
|
||||
<select
|
||||
className="g-select"
|
||||
value={node.owner ?? ''}
|
||||
onChange={(e) =>
|
||||
patch((n) => ({ ...n, owner: e.target.value === '' ? undefined : e.target.value }))
|
||||
}
|
||||
>
|
||||
<option value="">未指定 —— 保存前选一个岗位</option>
|
||||
{positions.map((q2) => (
|
||||
<option key={q2.id} value={q2.abbr}>
|
||||
{q2.abbr} · {q2.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
{node.flavor === 'approval' && (
|
||||
<Field k="审批岗位" hint="「卡到人的工位」是审批点的功能语义,审批单派给它">
|
||||
<select
|
||||
className="g-select"
|
||||
value={node.owner ?? ''}
|
||||
onChange={(e) =>
|
||||
patch((n) => ({ ...n, owner: e.target.value === '' ? undefined : e.target.value }))
|
||||
}
|
||||
>
|
||||
<option value="">未指定 —— 激活前选一个岗位</option>
|
||||
{positions.map((q2) => (
|
||||
<option key={q2.id} value={q2.abbr}>
|
||||
{q2.abbr} · {q2.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
)}
|
||||
{node.flavor !== 'approval' && (
|
||||
<Note>
|
||||
活动点<b>不带岗位</b> —— 谁来干是运营的事(分派机制未建前,运行时全员轮值、最闲者先)。
|
||||
</Note>
|
||||
)}
|
||||
{node.kind === 'activity' && node.flavor === 'approval' && (
|
||||
<Note>
|
||||
<b>审批点是系统内置要素</b>,不是活动 —— 声明即用、零开发、不进活动库(一个流程包里需要开发的
|
||||
@@ -1062,11 +1042,8 @@ function FlowLab({
|
||||
(声明式:回指定节点重开新实例 / 终止)· 催办阶梯。运行时它产出<b>审批单</b>而非任务。
|
||||
</Note>
|
||||
)}
|
||||
{node.owner === undefined && (
|
||||
<Note tone="warn">
|
||||
这个节点还没指定岗位 —— 不指定,起单时就不知道
|
||||
{node.flavor === 'approval' ? '审批单' : '任务'}该派给谁。
|
||||
</Note>
|
||||
{node.flavor === 'approval' && node.owner === undefined && (
|
||||
<Note tone="warn">这个审批点还没指定岗位 —— 不指定,起单时就不知道审批单该派给谁。</Note>
|
||||
)}
|
||||
</Prop>
|
||||
|
||||
@@ -1088,28 +1065,6 @@ function FlowLab({
|
||||
/>
|
||||
</Prop>
|
||||
)}
|
||||
{node.kind === 'callout' && (
|
||||
<Prop ico="rotate-ccw" title="去向" extra="失败走向 / 驳回去向">
|
||||
<Field k="回到节点">
|
||||
<select
|
||||
className="g-select"
|
||||
value={node.to ?? ''}
|
||||
onChange={(e) =>
|
||||
patch((n) => ({ ...n, to: e.target.value === '' ? undefined : e.target.value }))
|
||||
}
|
||||
>
|
||||
<option value="">未指定</option>
|
||||
{nodes
|
||||
.filter((n) => n.kind === 'activity')
|
||||
.map((n) => (
|
||||
<option key={n.id} value={n.id}>
|
||||
{n.id} · {n.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</Prop>
|
||||
)}
|
||||
{node.kind === 'activity' && node.flavor !== 'approval' && (
|
||||
<Prop ico="boxes" title="链接活动实现" extra="装载面:编排不含实现,链接决定可运行">
|
||||
<Field k="实现" hint="活动住库;链好了这节点才算装载(激活判据之二)">
|
||||
|
||||
@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
layoutFlow,
|
||||
type ConnectionLayout,
|
||||
type FlowEdge,
|
||||
type FlowGraph,
|
||||
type FlowLayoutResult,
|
||||
type FlowNode,
|
||||
@@ -68,13 +69,25 @@ const rendererModule = {
|
||||
};
|
||||
|
||||
/** 连线 + 箭头 + 线上标签,画进注解图层(几何全部来自布局引擎)。 */
|
||||
function drawConnection(layer: SVGElement, connection: ConnectionLayout, variant: FlowVariant): void {
|
||||
function drawConnection(
|
||||
layer: SVGElement,
|
||||
connection: ConnectionLayout,
|
||||
variant: FlowVariant,
|
||||
onEdgeClick?: (edge: FlowEdge) => void,
|
||||
): void {
|
||||
const color = TONE_COLOR[connection.tone];
|
||||
const [first, ...rest] = connection.waypoints;
|
||||
if (first === undefined) return;
|
||||
const d = `M${first.x},${first.y} ${rest.map((p) => `L${p.x},${p.y}`).join(" ")}`;
|
||||
layer.append(svg("path", { d, fill: "none", stroke: color, "stroke-width": 1.4 }));
|
||||
layer.append(svg("polygon", { points: arrowHeadPoints(connection.waypoints), fill: color }));
|
||||
if (onEdgeClick !== undefined) {
|
||||
// 加宽透明命中垫:线太细点不着 —— 边在图上可选中,属性(条件/映射)去属性卡改
|
||||
const hit = svg("path", { d, fill: "none", stroke: "transparent", "stroke-width": 12, cursor: "pointer" });
|
||||
(hit as SVGElement & { style: CSSStyleDeclaration }).style.pointerEvents = "stroke";
|
||||
hit.addEventListener("click", () => onEdgeClick(connection.edge));
|
||||
layer.append(hit);
|
||||
}
|
||||
layer.append(svg("path", { d, fill: "none", stroke: color, "stroke-width": 1.4, "pointer-events": "none" }));
|
||||
layer.append(svg("polygon", { points: arrowHeadPoints(connection.waypoints), fill: color, "pointer-events": "none" }));
|
||||
|
||||
if (connection.label) {
|
||||
layer.append(
|
||||
@@ -94,8 +107,13 @@ function drawConnection(layer: SVGElement, connection: ConnectionLayout, variant
|
||||
}
|
||||
}
|
||||
|
||||
function drawAnnotations(layer: SVGElement, layout: FlowLayoutResult, variant: FlowVariant): void {
|
||||
for (const connection of layout.connections) drawConnection(layer, connection, variant);
|
||||
function drawAnnotations(
|
||||
layer: SVGElement,
|
||||
layout: FlowLayoutResult,
|
||||
variant: FlowVariant,
|
||||
onEdgeClick?: (edge: FlowEdge) => void,
|
||||
): void {
|
||||
for (const connection of layout.connections) drawConnection(layer, connection, variant, onEdgeClick);
|
||||
for (const caption of layout.captions) {
|
||||
const style = CAPTION_STYLE[caption.role];
|
||||
// 严格索引:未知 role 不画注记,而不是画一个半成品
|
||||
@@ -124,6 +142,8 @@ export interface FlowDiagramProps {
|
||||
variant: FlowVariant;
|
||||
/** 点击活动节点(下钻);不传则节点不可点。 */
|
||||
onNodeClick?: (nodeId: string) => void;
|
||||
/** 点击连线(选中边,按边号/两端认);不传则边不可点。 */
|
||||
onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
|
||||
/** 双击活动节点就地改文字(标题/小字/主办);不传则不可改。 */
|
||||
onEditNode?: ((nodeId: string, patch: { label: string; owner?: string }) => Promise<void>) | undefined;
|
||||
/** 执行人候选(L1 业务能力)——传了则执行字段只能下拉选缩写,不开自由填。 */
|
||||
@@ -137,11 +157,13 @@ interface NodeEdit {
|
||||
top: number;
|
||||
}
|
||||
|
||||
export function FlowDiagram({ graph, variant, onNodeClick, onEditNode, ownerOptions, ariaLabel }: FlowDiagramProps) {
|
||||
export function FlowDiagram({ graph, variant, onNodeClick, onEdgeClick, onEditNode, ownerOptions, ariaLabel }: FlowDiagramProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const editRef = useRef<HTMLDivElement>(null);
|
||||
const clickRef = useRef(onNodeClick);
|
||||
clickRef.current = onNodeClick;
|
||||
const edgeClickRef = useRef(onEdgeClick);
|
||||
edgeClickRef.current = onEdgeClick;
|
||||
const editNodeRef = useRef(onEditNode);
|
||||
editNodeRef.current = onEditNode;
|
||||
// 单击下钻延时:等一拍看是否双击(双击=改文字,取消下钻)。
|
||||
@@ -189,9 +211,10 @@ export function FlowDiagram({ graph, variant, onNodeClick, onEditNode, ownerOpti
|
||||
);
|
||||
}
|
||||
|
||||
// 连线与标注画在形状之下的图层(层序号小于默认元素层)。
|
||||
const annotationLayer = canvas.getLayer("flow-annotations", -1);
|
||||
drawAnnotations(annotationLayer as SVGElement, layout, variant);
|
||||
// 连线与标注画在形状之下的图层(层序号小于默认元素层);
|
||||
// 边可点时提到形状层之上(层序 1),命中垫才接得到点击 —— 线避框走,不遮节点
|
||||
const annotationLayer = canvas.getLayer("flow-annotations", edgeClickRef.current === undefined ? -1 : 1);
|
||||
drawAnnotations(annotationLayer as SVGElement, layout, variant, (edge) => edgeClickRef.current?.(edge));
|
||||
if (layout.ghost) {
|
||||
(canvas.getContainer().querySelector(".djs-container svg, svg") as SVGElement | null)?.setAttribute(
|
||||
"opacity",
|
||||
|
||||
@@ -13,7 +13,7 @@ import type { ProcessPackage } from '@contracts';
|
||||
import { Ico } from '@ui';
|
||||
import { FlowDiagram } from './FlowDiagram.tsx';
|
||||
import { FlowEditor } from './FlowEditor.tsx';
|
||||
import type { FlowGraph } from './flow-layout.ts';
|
||||
import type { FlowEdge, FlowGraph } from './flow-layout.ts';
|
||||
import type { SpPosition } from './support.tsx';
|
||||
import { packageToGraph } from './pkg-to-graph.ts';
|
||||
import type { InstanceMark } from './pkg-to-graph.ts';
|
||||
@@ -27,6 +27,7 @@ export function FlowFigureBlock({
|
||||
positions,
|
||||
canEdit,
|
||||
onNodeClick,
|
||||
onEdgeClick,
|
||||
onEditNodeText,
|
||||
onSaveFlowGraph,
|
||||
}: {
|
||||
@@ -38,6 +39,8 @@ export function FlowFigureBlock({
|
||||
positions?: SpPosition[] | undefined;
|
||||
canEdit: boolean;
|
||||
onNodeClick: (nodeId: string) => void;
|
||||
/** 点击连线选中边(属性卡随之切到该边);不传则边不可点 */
|
||||
onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
|
||||
/** 双击流程图活动就地改文字(标题 / 主办) */
|
||||
onEditNodeText?: ((nodeId: string, patch: { label: string; owner?: string }) => Promise<void>) | undefined;
|
||||
/** 手工绘图:整图保存(idMap = 本次编辑会话 原id→现id,宿主用它重键下钻内容) */
|
||||
@@ -52,7 +55,7 @@ export function FlowFigureBlock({
|
||||
<button
|
||||
type="button"
|
||||
className="dc2-addbtn"
|
||||
title="手工绘图(珊格正交:活动/网关/起止/卡点,拖拽连线);画布内工具栏有 取消/保存绘图"
|
||||
title="手工绘图(珊格正交:活动点/审批点/起止,拖拽连线);画布内工具栏有 取消/保存绘图"
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
<Ico name="pen-line" s={11} /> 编辑
|
||||
@@ -87,6 +90,7 @@ export function FlowFigureBlock({
|
||||
graph={graph}
|
||||
variant="business"
|
||||
onNodeClick={onNodeClick}
|
||||
onEdgeClick={onEdgeClick}
|
||||
onEditNode={canEdit ? onEditNodeText : undefined}
|
||||
ownerOptions={positions}
|
||||
ariaLabel={`${title}业务流程图`}
|
||||
@@ -105,7 +109,6 @@ export function FlowFigureBlock({
|
||||
{/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */}
|
||||
<span><i className="lg-i fe-pi-sop" aria-hidden /> 活动点</span>
|
||||
<span><i className="lg-i fe-pi-approval" aria-hidden /> 审批点</span>
|
||||
<span><i className="lg-i fe-pi-callout" aria-hidden /> 卡点</span>
|
||||
<span><i className="lg-i lg-flow" aria-hidden /> 顺序流</span>
|
||||
<span className="sep">|</span>
|
||||
<span>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
* 画布图 → 流程包:**合并**,不是重建。
|
||||
*
|
||||
* 这里守三条容易丢东西的路:
|
||||
* ① 画布装不下的声明(驳回走向、负责人策略)保存后必须还在;
|
||||
* ② 回边以**卡点**呈现(MVP 的画法)—— 存盘要还原成语义边,不能连边一起丢;
|
||||
* ③ 属性卡的工作副本(节点的链接实现 act、边的条件/映射)保存时要合并为语义。
|
||||
* ① 画布装不下的声明(驳回走向、失败走向)保存后必须还在;
|
||||
* ② 属性卡的工作副本(节点的链接实现 act、边的条件/映射)保存时要合并为语义;
|
||||
* ③ 边号 E1、E2… 是语义边的编号身份 —— 旧边保号,新画的边铸下一个空号。
|
||||
*/
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { processPackageSchema } from '@contracts';
|
||||
@@ -20,93 +20,67 @@ const basePkg: ProcessPackage = processPackageSchema.parse({
|
||||
callInterface: { input: { type: 'object' }, output: { type: 'object' } },
|
||||
nodes: [
|
||||
{ id: 'S', kind: 'start', label: '起' },
|
||||
{
|
||||
id: 'A',
|
||||
kind: 'activity',
|
||||
label: '甲',
|
||||
activityId: 'act-a',
|
||||
owner: { position: 'BD', strategy: 'rotation' },
|
||||
failure: { kind: 'terminate' },
|
||||
},
|
||||
{
|
||||
id: 'B',
|
||||
kind: 'activity',
|
||||
label: '乙',
|
||||
activityId: 'act-b',
|
||||
owner: { position: 'PM', strategy: 'sole' },
|
||||
failure: { kind: 'terminate' },
|
||||
},
|
||||
{ id: 'A', kind: 'activity', label: '甲', activityId: 'act-a', failure: { kind: 'terminate' } },
|
||||
{ id: 'B', kind: 'activity', label: '乙', activityId: 'act-b', failure: { kind: 'terminate' } },
|
||||
{ id: 'E', kind: 'end', label: '终' },
|
||||
],
|
||||
edges: [
|
||||
{ id: 'e-s-a', from: 'S', to: 'A', mapping: [{ target: 'x', source: { from: 'initiation', path: 'x' } }] },
|
||||
{ id: 'e-a-b', from: 'A', to: 'B', mapping: [] },
|
||||
{ id: 'E1', from: 'S', to: 'A', mapping: [{ target: 'x', source: { from: 'initiation', path: 'x' } }] },
|
||||
{ id: 'E2', from: 'A', to: 'B', mapping: [] },
|
||||
// 乙的两条互斥出边:通过 → 终点;有异议 → 回甲重开(无网关:分支就在节点身上)
|
||||
{ id: 'e-b-e', from: 'B', to: 'E', condition: 'ok = true', mapping: [] },
|
||||
{ id: 'e-b-a', from: 'B', to: 'A', condition: 'ok = false', mapping: [], reopen: true },
|
||||
{ id: 'E3', from: 'B', to: 'E', condition: 'ok = true', mapping: [] },
|
||||
{ id: 'E4', from: 'B', to: 'A', condition: 'ok = false', mapping: [], reopen: true },
|
||||
],
|
||||
variables: [],
|
||||
});
|
||||
|
||||
/** 画布的样子:回边不画长线,画一枚卡点 */
|
||||
/** 画布的样子:顺序流全是真边(卡点画法已废),回边照画 */
|
||||
const graph: FlowGraph = {
|
||||
manual: true,
|
||||
rows: [],
|
||||
anchors: [],
|
||||
nodes: [
|
||||
{ id: 'S', kind: 'start', label: '起' },
|
||||
{ id: 'A', kind: 'activity', label: '甲', owner: 'BD' },
|
||||
{ id: 'B', kind: 'activity', label: '乙', owner: 'PM' },
|
||||
{ id: 'A', kind: 'activity', label: '甲' },
|
||||
{ id: 'B', kind: 'activity', label: '乙' },
|
||||
{ id: 'E', kind: 'end', label: '终' },
|
||||
{ id: 'c1', kind: 'callout', label: '返回调整', to: 'A' },
|
||||
],
|
||||
edges: [
|
||||
{ from: 'S', to: 'A' },
|
||||
{ from: 'A', to: 'B' },
|
||||
{ from: 'B', to: 'E', label: '通过', tone: 'ok' },
|
||||
{ from: 'B', to: 'c1', label: '有异议', tone: 'bad' },
|
||||
{ from: 'B', to: 'A', label: '有异议', tone: 'bad' },
|
||||
],
|
||||
};
|
||||
|
||||
describe('mergeGraphIntoPackage', () => {
|
||||
it('卡点还原成语义边 —— 回边不因「画成卡点」而消失', () => {
|
||||
it('回边按 from→to 认亲 —— 旧边的号、reopen 与条件都保留', () => {
|
||||
const merged = mergeGraphIntoPackage(basePkg, graph);
|
||||
const back = merged.edges.find((e) => e.from === 'B' && e.to === 'A');
|
||||
expect(back).toBeDefined();
|
||||
// 旧边的 id 与 reopen 标记跟着保留:合并按 from→to 认亲
|
||||
expect(back?.id).toBe('e-b-a');
|
||||
expect(back?.id).toBe('E4');
|
||||
expect(back?.reopen).toBe(true);
|
||||
expect(back?.condition).toBe('ok = false');
|
||||
});
|
||||
|
||||
it('卡点本身不入语义节点,但整张图存进 diagram', () => {
|
||||
const merged = mergeGraphIntoPackage(basePkg, graph);
|
||||
expect(merged.nodes.map((n) => n.id)).toEqual(['S', 'A', 'B', 'E']);
|
||||
const diagram = merged.diagram as { nodes: { id: string }[] };
|
||||
expect(diagram.nodes.map((n) => n.id)).toContain('c1');
|
||||
});
|
||||
|
||||
it('卡点只认亲、不新建 —— 审批点的驳回牌子不该被当成一条边', () => {
|
||||
// 「审批点 → 退回卡点(to: A)」在旧包里没有对应的边:它是 reject 声明的呈现
|
||||
const withReject: FlowGraph = {
|
||||
it('新画的边铸下一个空号 —— E5,不与旧号相撞', () => {
|
||||
const withNew: FlowGraph = {
|
||||
...graph,
|
||||
nodes: [...graph.nodes, { id: 'AP', kind: 'activity', label: '审批', flavor: 'approval' }],
|
||||
edges: [...graph.edges, { from: 'AP', to: 'c1', label: '不通过' }],
|
||||
nodes: [...graph.nodes, { id: 'C', kind: 'activity', label: '丙' }],
|
||||
edges: [...graph.edges, { from: 'A', to: 'C' }, { from: 'C', to: 'B' }],
|
||||
};
|
||||
const merged = mergeGraphIntoPackage(basePkg, withReject);
|
||||
expect(merged.edges.some((e) => e.from === 'AP' && e.to === 'A')).toBe(false);
|
||||
// 旧包里有的回边照旧认得出来
|
||||
expect(merged.edges.some((e) => e.from === 'B' && e.to === 'A')).toBe(true);
|
||||
const merged = mergeGraphIntoPackage(basePkg, withNew);
|
||||
const minted = merged.edges.filter((e) => e.from === 'C' || e.to === 'C').map((e) => e.id);
|
||||
expect(minted.sort()).toEqual(['E5', 'E6']);
|
||||
});
|
||||
|
||||
it('画布装不下的声明原样保留:边映射与负责人策略', () => {
|
||||
it('画布装不下的声明原样保留:边映射与失败走向', () => {
|
||||
const merged = mergeGraphIntoPackage(basePkg, graph);
|
||||
expect(merged.edges.find((e) => e.id === 'e-s-a')?.mapping).toHaveLength(1);
|
||||
expect(merged.edges.find((e) => e.id === 'E1')?.mapping).toHaveLength(1);
|
||||
const a = merged.nodes.find((n) => n.id === 'A');
|
||||
expect(a?.kind === 'activity' && a.owner.strategy).toBe('rotation');
|
||||
expect(a?.kind === 'activity' && a.failure.kind).toBe('terminate');
|
||||
});
|
||||
|
||||
/* ── 属性卡工作副本的合并(2026-07-28 第二轮:节点链接实现、边传递契约) ── */
|
||||
/* ── 属性卡工作副本的合并(节点链接实现、边传递契约) ── */
|
||||
|
||||
it('节点的 act(链接的活动实现)优先于旧声明成为 activityId', () => {
|
||||
const linked: FlowGraph = {
|
||||
@@ -127,18 +101,18 @@ describe('mergeGraphIntoPackage', () => {
|
||||
edges: graph.edges.map((e) =>
|
||||
e.from === 'B' && e.to === 'E'
|
||||
? { ...e, condition: 'ok = true and sum > 3', mapping: [{ target: 'y', source: { from: 'initiation', path: 'y' } }] }
|
||||
: e.from === 'B' && e.to === 'c1'
|
||||
: e.from === 'B' && e.to === 'A'
|
||||
? { ...e, condition: '' } // 设计者把条件清空:这条边成了默认兜底
|
||||
: e,
|
||||
),
|
||||
};
|
||||
const merged = mergeGraphIntoPackage(basePkg, edited);
|
||||
const pass = merged.edges.find((e) => e.id === 'e-b-e');
|
||||
const pass = merged.edges.find((e) => e.id === 'E3');
|
||||
expect(pass?.condition).toBe('ok = true and sum > 3');
|
||||
expect(pass?.mapping).toHaveLength(1);
|
||||
const back = merged.edges.find((e) => e.id === 'e-b-a');
|
||||
const back = merged.edges.find((e) => e.id === 'E4');
|
||||
expect(back?.condition).toBeUndefined();
|
||||
// 没动过的边沿用旧声明
|
||||
expect(merged.edges.find((e) => e.id === 'e-s-a')?.mapping).toHaveLength(1);
|
||||
expect(merged.edges.find((e) => e.id === 'E1')?.mapping).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -432,14 +432,13 @@ const modelingModule = {
|
||||
/*
|
||||
* 节点只分**活动点**与**审批点**(2026-07-28 第二轮):
|
||||
* 编排面不选实现方式(标准/案例是活动库的事,链接哪个实现在属性卡决定);
|
||||
* 网关不存在(分支 = 条件出边);起止与卡点是结构件与呈现件。
|
||||
* 网关与卡点都不存在(分支 = 条件出边,顺序流一律画成真边);起止是结构件。
|
||||
*/
|
||||
export const PALETTE_SPECS: Array<{ key: string; label: string; className: string; spec: NewNodeSpec }> = [
|
||||
{ key: "create.act", label: "活动点(蓝 · 链接活动实现后可运行)", className: "fe-pi fe-pi-sop", spec: { kind: "activity" } },
|
||||
{ key: "create.approval", label: "审批点(琥珀 · 人裁节点)", className: "fe-pi fe-pi-approval", spec: { kind: "activity", flavor: "approval" } },
|
||||
{ key: "create.start", label: "起始事件", className: "fe-pi fe-pi-start", spec: { kind: "start" } },
|
||||
{ key: "create.end", label: "结束事件", className: "fe-pi fe-pi-end", spec: { kind: "end" } },
|
||||
{ key: "create.callout", label: "卡点(红 · 标去向)", className: "fe-pi fe-pi-callout", spec: { kind: "callout" } },
|
||||
];
|
||||
|
||||
class FlowPalette {
|
||||
|
||||
@@ -72,6 +72,8 @@ export interface FlowAnchor {
|
||||
export interface FlowEdge {
|
||||
from: string;
|
||||
to: string;
|
||||
/** 边号(E1、E2…)—— 语义边的编号身份,画在线标前;拣选与选中按它认 */
|
||||
code?: string | undefined;
|
||||
label?: string;
|
||||
tone?: FlowTone;
|
||||
/** 边属性(传递契约)的工作副本:S-FEEL 条件。属性卡填写,保存时合并为语义边的 condition。 */
|
||||
@@ -309,10 +311,12 @@ export function manualEdgeLabel(
|
||||
edge: FlowEdge,
|
||||
points: Array<{ x: number; y: number }>,
|
||||
): ConnectionLayout["label"] {
|
||||
if (!edge.label) return undefined;
|
||||
// 边号进线标:`E3 需要选型`;没有注记的边也标出编号 —— 图上能认出这是哪条边
|
||||
const text = [edge.code, edge.label].filter((t) => t !== undefined && t !== '').join(' ');
|
||||
if (text === '') return undefined;
|
||||
// 手工摆放过的标签位(中心点)优先。
|
||||
if (edge.lx !== undefined && edge.ly !== undefined) {
|
||||
return { text: edge.label, x: edge.lx, y: edge.ly + 3.5, anchor: "middle" };
|
||||
return { text, x: edge.lx, y: edge.ly + 3.5, anchor: "middle" };
|
||||
}
|
||||
let best = 0;
|
||||
let bestLen = -1;
|
||||
@@ -327,9 +331,9 @@ export function manualEdgeLabel(
|
||||
const b = points[best];
|
||||
if (a === undefined || b === undefined) return undefined;
|
||||
if (a.y === b.y) {
|
||||
return { text: edge.label, x: (a.x + b.x) / 2, y: a.y - 5, anchor: "middle" };
|
||||
return { text, x: (a.x + b.x) / 2, y: a.y - 5, anchor: "middle" };
|
||||
}
|
||||
return { text: edge.label, x: a.x + 6, y: (a.y + b.y) / 2 + 3, anchor: "start" };
|
||||
return { text, x: a.x + 6, y: (a.y + b.y) / 2 + 3, anchor: "start" };
|
||||
}
|
||||
|
||||
/** 手绘图直排:节点按存储坐标放置,连线按存储折线画,起止/网关的名字作旁注。 */
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
* 负责人策略、调用接口 —— 一律**从旧包按 id 保留**;id 变过号的经 idMap 跟过去。
|
||||
* 所以保存永远不会把「画布上看不见的声明」抹掉。
|
||||
*
|
||||
* 卡点(callout)与行分组/锚定/折线点属于画布事实,语义 schema 不收:
|
||||
* 整张手绘图原样存进 `pkg.diagram`(手绘几何即呈现真相),流转判断不读它。
|
||||
* 顺序流一律画成**真边**(卡点画法已废除,2026-07-28 第三轮);行分组/锚定/折线点
|
||||
* 属于画布事实,整张手绘图原样存进 `pkg.diagram`(手绘几何即呈现真相),流转判断不读它。
|
||||
*/
|
||||
import type { Edge, ProcessNode, ProcessPackage } from '@contracts';
|
||||
import { activityIdSchema, nodeIdSchema } from '@contracts';
|
||||
@@ -32,7 +32,7 @@ export function mergeGraphIntoPackage(
|
||||
priorEdge.set(`${from}→${to}`, e);
|
||||
}
|
||||
|
||||
// 画布节点里只有活动点/审批点/起终点入语义;卡点(callout)留在 diagram
|
||||
// 画布节点里只有活动点/审批点/起终点入语义(卡点画法已废,滤除只为容错旧数据)
|
||||
const semantic = graph.nodes.filter((n) => n.kind !== 'callout');
|
||||
|
||||
const nodes: ProcessNode[] = semantic.map((n) => {
|
||||
@@ -82,11 +82,7 @@ export function mergeGraphIntoPackage(
|
||||
kind: 'activity' as const,
|
||||
// 链接优先级:属性卡刚选的(act)> 旧声明 > 占位软引用(闭合校验标「未装载」)
|
||||
activityId: n.act !== undefined && n.act !== '' ? activityIdSchema.parse(n.act) : (priorAct?.activityId ?? placeholderActivityId(n.label)),
|
||||
owner: {
|
||||
position: n.owner ?? priorAct?.owner.position ?? '未声明',
|
||||
strategy: priorAct?.owner.strategy ?? ('sole' as const),
|
||||
...(priorAct?.owner.staffId === undefined ? {} : { staffId: priorAct.owner.staffId }),
|
||||
},
|
||||
// 契约不带负责人岗位:分派归运营(运行时默认全员轮值;审批点的 approver 是功能语义,另算)
|
||||
failure: priorAct?.failure ?? { kind: 'terminate' as const },
|
||||
...(priorAct?.message === undefined ? {} : { message: priorAct.message }),
|
||||
...(n.in === undefined || n.in.length === 0 ? {} : { in: [...n.in] }),
|
||||
@@ -97,34 +93,23 @@ export function mergeGraphIntoPackage(
|
||||
const semanticIds = new Set(semantic.map((n) => n.id));
|
||||
|
||||
/*
|
||||
* 卡点是**回跳的呈现**:图上不画长线,画一枚「返回调整→A4」的小牌子。
|
||||
* 「X → 卡点(to: Y)」要还原成语义边 X→Y,否则一存盘回边就没了
|
||||
* (卡点不入语义,这条边有一端不在 semanticIds 里,会被滤掉)。
|
||||
*
|
||||
* 但还原只用于**认亲**,不用于**新建**:只有旧包里确有 X→Y 这条边才认。
|
||||
* 不设这道闸,审批点的「退回调整→A4」卡点(它是 `reject` 声明的呈现、不是边)
|
||||
* 会被当成 A5→A4 凭空造出一条边来 —— 实测就多出过一条 `e-A5-A4`。
|
||||
* 真要新连一条边,画一条线;卡点只是牌子。
|
||||
* 边号 E1、E2… —— 服务端语义边的**编号身份**:图上标它、拣选条按它认。
|
||||
* 旧边保号(按 from→to 认亲),新画的边铸下一个空号;非 E 系的历史号不续用。
|
||||
*/
|
||||
const calloutTarget = new Map(
|
||||
graph.nodes
|
||||
.filter((n) => n.kind === 'callout' && n.to !== undefined && semanticIds.has(n.to))
|
||||
.map((n) => [n.id, n.to!]),
|
||||
);
|
||||
const resolved = graph.edges.map((e) => {
|
||||
const via = calloutTarget.get(e.to);
|
||||
if (via === undefined) return e;
|
||||
return priorEdge.has(`${e.from}→${via}`) ? { ...e, to: via } : e;
|
||||
});
|
||||
let nextEdgeNo =
|
||||
pkg.edges.reduce((max, e) => {
|
||||
const m = /^E(\d+)$/.exec(e.id);
|
||||
return m === null ? max : Math.max(max, Number(m[1]));
|
||||
}, 0) + 1;
|
||||
|
||||
const edges: Edge[] = resolved
|
||||
const edges: Edge[] = graph.edges
|
||||
.filter((e) => semanticIds.has(e.from) && semanticIds.has(e.to))
|
||||
.map((e) => {
|
||||
const prior = priorEdge.get(`${e.from}→${e.to}`);
|
||||
// 边属性(传递契约)以属性卡的工作副本优先;没动过的沿用旧声明
|
||||
const condition = e.condition !== undefined ? (e.condition.trim() === '' ? undefined : e.condition) : prior?.condition;
|
||||
return {
|
||||
id: prior?.id ?? `e-${e.from}-${e.to}`,
|
||||
id: prior?.id ?? `E${nextEdgeNo++}`,
|
||||
from: nodeIdSchema.parse(e.from),
|
||||
to: nodeIdSchema.parse(e.to),
|
||||
mapping: (e.mapping as Edge['mapping'] | undefined) ?? prior?.mapping ?? [],
|
||||
@@ -139,7 +124,7 @@ export function mergeGraphIntoPackage(
|
||||
...pkg,
|
||||
nodes,
|
||||
edges,
|
||||
// 手绘图原样存证:卡点/行分组/锚定/折线点都在这里,呈现以它为真相
|
||||
// 手绘图原样存证:行分组/锚定/折线点都在这里,呈现以它为真相
|
||||
diagram: JSON.parse(JSON.stringify(graph)) as Record<string, unknown>,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
|
||||
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, owner: n.approver.position } : {}),
|
||||
...(n.kind === 'activity' ? { code: n.id, owner: n.owner.position, act: n.activityId } : {}),
|
||||
...(n.kind === 'activity' ? { code: n.id, act: n.activityId } : {}),
|
||||
x: 30 + (i % 6) * 160,
|
||||
y: bottom + Math.floor(i / 6) * 60,
|
||||
}));
|
||||
@@ -59,19 +59,17 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
|
||||
return state === undefined ? base : { ...base, note: state };
|
||||
});
|
||||
/*
|
||||
* 边属性(条件/映射)从语义边回填到画布边:属性卡编辑的是画布工作副本,
|
||||
* 边属性(编号/条件/映射)从语义边回填到画布边:属性卡编辑的是画布工作副本,
|
||||
* 保存时 graph-to-pkg 又以它为准 —— 回填缺席的话,打开即保存会把契约冲掉。
|
||||
* 经卡点的边按卡点 `to` 认亲(A5→c_reject 即 A5→A4)。
|
||||
* 顺序流全是真边(卡点画法已废),按 from→to 直接认亲;code 即边号 E1、E2…
|
||||
*/
|
||||
const calloutTo = new Map(
|
||||
stored.nodes.filter((n) => n.kind === 'callout' && n.to !== undefined).map((n) => [n.id, n.to!]),
|
||||
);
|
||||
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}→${calloutTo.get(e.to) ?? e.to}`);
|
||||
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 }),
|
||||
mapping: sem.mapping as unknown[],
|
||||
};
|
||||
@@ -99,7 +97,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
|
||||
}
|
||||
return {
|
||||
...base,
|
||||
owner: n.owner.position,
|
||||
// 契约不带负责人岗位 —— 角标不再标岗位,链接的实现(装载面)以 act 携带
|
||||
act: n.activityId,
|
||||
...(n.in === undefined ? {} : { in: [...n.in] }),
|
||||
...(n.out === undefined ? {} : { out: [...n.out] }),
|
||||
@@ -114,6 +112,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
|
||||
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 }),
|
||||
|
||||
Reference in New Issue
Block a user