1179 lines
44 KiB
JavaScript
1179 lines
44 KiB
JavaScript
/**
|
||
* 文件说明：旧流程数据与 Vue Flow 状态、操作 API 之间的兼容适配层。
|
||
* 作用范围：仅服务于流程设计器模块。
|
||
*/
|
||
import { nextTick } from "vue";
|
||
import { v4 as uuid } from "uuid";
|
||
import { MarkerType } from "@vue-flow/core";
|
||
|
||
/**
|
||
* 克隆 clone 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} value 待处理的新值
|
||
*/
|
||
const clone = (value) => JSON.parse(JSON.stringify(value ?? {}));
|
||
|
||
const GROUP_TYPES = new Set(["loop", "selectArea"]);
|
||
const TARGET_ONLY_TYPES = new Set(["end", "stopLoop", "subEnd"]);
|
||
const SOURCE_ONLY_TYPES = new Set(["start", "subStart"]);
|
||
const LOOP_BODY_INSET = { left: 24, top: 112, right: 24, bottom: 24 };
|
||
const GROUP_BODY_INSET = { left: 24, top: 120, right: 24, bottom: 24 };
|
||
const LOOP_MIN_SIZE = { width: 520, height: 360 };
|
||
|
||
/**
|
||
* 处理 loopChildExtent 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const loopChildExtent = () => ({
|
||
range: "parent",
|
||
padding: [
|
||
LOOP_BODY_INSET.top,
|
||
LOOP_BODY_INSET.right,
|
||
LOOP_BODY_INSET.bottom,
|
||
LOOP_BODY_INSET.left,
|
||
],
|
||
});
|
||
|
||
/**
|
||
* 编组 groupChildExtent 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const groupChildExtent = () => ({
|
||
range: "parent",
|
||
padding: [
|
||
GROUP_BODY_INSET.top,
|
||
GROUP_BODY_INSET.right,
|
||
GROUP_BODY_INSET.bottom,
|
||
GROUP_BODY_INSET.left,
|
||
],
|
||
});
|
||
|
||
/**
|
||
* 处理 nodeSize 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} node 当前流程节点
|
||
*/
|
||
const nodeSize = (node) => {
|
||
// 分支节点采用统一的标准卡片尺寸，忽略旧流程数据中遗留的大尺寸记录。
|
||
if (node.type === "branch") return { width: 372, height: 180 };
|
||
const width = Number(node.properties?.width || node.width);
|
||
const height = Number(node.properties?.height || node.height);
|
||
if (Number.isFinite(width) && Number.isFinite(height)) {
|
||
return { width, height };
|
||
}
|
||
if (GROUP_TYPES.has(node.type)) return { width: 720, height: 460 };
|
||
if (TARGET_ONLY_TYPES.has(node.type) || SOURCE_ONLY_TYPES.has(node.type)) {
|
||
return { width: 328, height: 120 };
|
||
}
|
||
return { width: 372, height: 180 };
|
||
};
|
||
|
||
/**
|
||
* 处理 edgeId 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const edgeId = () => `edge_${uuid().replace(/-/g, "")}`;
|
||
/**
|
||
* 处理 nodeId 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const nodeId = () => uuid().replace(/-/g, "");
|
||
|
||
/**
|
||
* 判断一个节点是否可以挂到指定容器下。
|
||
*
|
||
* 实现思路：普通节点仍可进入 loop 或 selectArea；容器节点中只开放 loop 嵌套 loop，
|
||
* 避免顺带改变 selectArea 的编组语义。
|
||
*
|
||
* @param {string} parentType 父容器的流程节点类型
|
||
* @param {string} childType 待挂载节点的流程节点类型
|
||
* @returns {boolean} 是否允许建立该父子关系
|
||
*/
|
||
const canAttachToGroup = (parentType, childType) => {
|
||
if (!GROUP_TYPES.has(parentType)) return false;
|
||
if (!GROUP_TYPES.has(childType)) return true;
|
||
return parentType === "loop" && childType === "loop";
|
||
};
|
||
|
||
/**
|
||
* 收集流程节点的全部后代，用于移动和删除嵌套循环时保持整棵子树一致。
|
||
*
|
||
* 实现思路：同时读取 children 与 properties.parentId，兼容新旧流程数据可能只保存
|
||
* 其中一种关系的情况；visited 可阻止异常历史数据形成死循环。
|
||
*
|
||
* @param {{ nodes?: Array }} graph 后端格式的流程图
|
||
* @param {string} rootId 根节点 ID
|
||
* @returns {Set<string>} 不包含根节点自身的全部后代 ID
|
||
*/
|
||
const collectGraphDescendantIds = (graph, rootId) => {
|
||
const childrenByParent = new Map();
|
||
(graph.nodes || []).forEach((node) => {
|
||
const childIds = new Set(node.children || []);
|
||
if (childIds.size) childrenByParent.set(node.id, childIds);
|
||
});
|
||
(graph.nodes || []).forEach((node) => {
|
||
const parentId = node.properties?.parentId;
|
||
if (!parentId) return;
|
||
const childIds = childrenByParent.get(parentId) || new Set();
|
||
childIds.add(node.id);
|
||
childrenByParent.set(parentId, childIds);
|
||
});
|
||
|
||
const descendants = new Set();
|
||
const pending = [...(childrenByParent.get(rootId) || [])];
|
||
while (pending.length) {
|
||
const childId = pending.pop();
|
||
if (!childId || childId === rootId || descendants.has(childId)) continue;
|
||
descendants.add(childId);
|
||
pending.push(...(childrenByParent.get(childId) || []));
|
||
}
|
||
return descendants;
|
||
};
|
||
|
||
/**
|
||
* 计算 Vue Flow 节点的父子深度，保证父节点始终排在后代之前挂载。
|
||
*
|
||
* @param {*} node Vue Flow 节点
|
||
* @param {Map<string, *>} nodeLookup 节点索引
|
||
* @returns {number} 根节点为 0 的层级深度
|
||
*/
|
||
const nodeHierarchyDepth = (node, nodeLookup) => {
|
||
let depth = 0;
|
||
let current = node;
|
||
const visited = new Set([node.id]);
|
||
while (current?.parentNode) {
|
||
if (visited.has(current.parentNode)) break;
|
||
visited.add(current.parentNode);
|
||
current = nodeLookup.get(current.parentNode);
|
||
if (!current) break;
|
||
depth += 1;
|
||
}
|
||
return depth;
|
||
};
|
||
|
||
/**
|
||
* 处理 toVueNode 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} node 当前流程节点
|
||
* @param {*} sizeOverride 调用方传入的 sizeOverride 参数
|
||
* @param {*} positionOverride 调用方传入的 positionOverride 参数
|
||
*/
|
||
const toVueNode = (node, sizeOverride, positionOverride) => {
|
||
const normalized = clone(node);
|
||
normalized.id ||= nodeId();
|
||
normalized.properties ||= {};
|
||
const overrideWidth = Number(sizeOverride?.width);
|
||
const overrideHeight = Number(sizeOverride?.height);
|
||
const size = Number.isFinite(overrideWidth) && overrideWidth > 0
|
||
&& Number.isFinite(overrideHeight) && overrideHeight > 0
|
||
? { width: overrideWidth, height: overrideHeight }
|
||
: nodeSize(normalized);
|
||
const center = {
|
||
x: Number(normalized.x) || 0,
|
||
y: Number(normalized.y) || 0,
|
||
};
|
||
const overrideX = Number(positionOverride?.x);
|
||
const overrideY = Number(positionOverride?.y);
|
||
const position = Number.isFinite(overrideX) && Number.isFinite(overrideY)
|
||
? { x: overrideX, y: overrideY }
|
||
: {
|
||
x: center.x - size.width / 2,
|
||
y: center.y - size.height / 2,
|
||
};
|
||
|
||
const dimensions = GROUP_TYPES.has(normalized.type)
|
||
? { width: size.width, height: size.height }
|
||
: { width: size.width };
|
||
|
||
return {
|
||
id: normalized.id,
|
||
type: "flow-node",
|
||
position,
|
||
...dimensions,
|
||
draggable: normalized.draggable !== false,
|
||
selectable: true,
|
||
deletable: !SOURCE_ONLY_TYPES.has(normalized.type) && normalized.type !== "end",
|
||
connectable: true,
|
||
zIndex: GROUP_TYPES.has(normalized.type) ? 0 : 2,
|
||
data: {
|
||
flowType: normalized.type,
|
||
properties: normalized.properties,
|
||
children: Array.isArray(normalized.children) ? normalized.children : [],
|
||
text: normalized.text,
|
||
backend: normalized,
|
||
originalCenter: center,
|
||
originalPosition: position,
|
||
size,
|
||
},
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 处理 toVueEdge 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} edge 调用方传入的 edge 参数
|
||
*/
|
||
const toVueEdge = (edge) => {
|
||
const normalized = clone(edge);
|
||
normalized.id ||= edgeId();
|
||
return {
|
||
id: normalized.id,
|
||
source: normalized.sourceNodeId,
|
||
target: normalized.targetNodeId,
|
||
sourceHandle: normalized.sourceAnchorId || null,
|
||
targetHandle: normalized.targetAnchorId || null,
|
||
type: "flow-edge",
|
||
animated: true,
|
||
selectable: true,
|
||
focusable: true,
|
||
deletable: true,
|
||
interactionWidth: 32,
|
||
markerEnd: {
|
||
type: MarkerType.ArrowClosed,
|
||
color: "#ff6b35",
|
||
width: 20,
|
||
height: 20,
|
||
},
|
||
style: { stroke: "#ff6b35", strokeWidth: 2 },
|
||
data: { backend: normalized },
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 将后端绝对坐标节点转换为 Vue Flow 的多层父子节点结构。
|
||
*
|
||
* 实现思路：先冻结所有节点的绝对坐标，再建立父子关系并换算相对坐标，避免父循环
|
||
* 已转成相对坐标后影响更深层节点。循环尺寸按“最深层优先”向外扩展，确保外层循环
|
||
* 能包含已经完成尺寸计算的内层循环。
|
||
*
|
||
* @param {Array} nodes Vue Flow 节点列表，初始 position 均为画布绝对坐标
|
||
* @returns {Array} 父节点排在子节点之前的节点列表
|
||
*/
|
||
const attachChildrenToGroups = (nodes) => {
|
||
const nodeLookup = new Map(nodes.map((node) => [node.id, node]));
|
||
const declaredParents = new Map();
|
||
const absolutePositions = new Map(nodes.map((node) => [node.id, { ...node.position }]));
|
||
|
||
nodes.filter((node) => GROUP_TYPES.has(node.data.flowType)).forEach((group) => {
|
||
(group.data.children || []).forEach((childId) => {
|
||
if (!declaredParents.has(childId)) declaredParents.set(childId, group.id);
|
||
});
|
||
});
|
||
|
||
nodes.forEach((child) => {
|
||
const parentId = child.data.properties?.parentId || declaredParents.get(child.id);
|
||
const parent = nodeLookup.get(parentId);
|
||
if (!parent || !canAttachToGroup(parent.data.flowType, child.data.flowType)) return;
|
||
|
||
// 历史数据可能包含错误的循环父子引用；沿父链检查可避免 Vue Flow 收到环形层级。
|
||
const visited = new Set([child.id]);
|
||
let ancestor = parent;
|
||
while (ancestor) {
|
||
if (visited.has(ancestor.id)) return;
|
||
visited.add(ancestor.id);
|
||
const ancestorParentId = ancestor.data.properties?.parentId || declaredParents.get(ancestor.id);
|
||
ancestor = nodeLookup.get(ancestorParentId);
|
||
}
|
||
|
||
const isLoop = parent.data.flowType === "loop";
|
||
const childPosition = absolutePositions.get(child.id) || child.position;
|
||
const parentPosition = absolutePositions.get(parentId) || parent.position;
|
||
const relativePosition = {
|
||
x: isLoop
|
||
? Math.max(childPosition.x - parentPosition.x, LOOP_BODY_INSET.left)
|
||
: childPosition.x - parentPosition.x,
|
||
y: isLoop
|
||
? Math.max(childPosition.y - parentPosition.y, LOOP_BODY_INSET.top)
|
||
: childPosition.y - parentPosition.y,
|
||
};
|
||
child.parentNode = parentId;
|
||
child.extent = isLoop ? loopChildExtent() : groupChildExtent();
|
||
child.expandParent = false;
|
||
child.position = relativePosition;
|
||
// 边统一位于 zIndex 4。嵌套循环若仍使用普通子节点的 zIndex 5，其白色容器背景会
|
||
// 遮住循环体内新建的边，看起来像“无法连线”；容器置于边下方，普通节点仍置于边上方。
|
||
child.zIndex = GROUP_TYPES.has(child.data.flowType) ? 1 : 5;
|
||
child.data.properties = { ...child.data.properties, parentId };
|
||
parent.data.children = Array.from(new Set([...(parent.data.children || []), child.id]));
|
||
});
|
||
|
||
nodes
|
||
.filter((node) => node.data.flowType === "loop")
|
||
.sort((left, right) => nodeHierarchyDepth(right, nodeLookup) - nodeHierarchyDepth(left, nodeLookup))
|
||
.forEach((group) => {
|
||
const children = nodes.filter((node) => node.parentNode === group.id);
|
||
if (!children.length) return;
|
||
const requiredWidth = Math.max(...children.map((child) => (
|
||
child.position.x + Number(child.data.size?.width || 0) + LOOP_BODY_INSET.right
|
||
)));
|
||
const requiredHeight = Math.max(...children.map((child) => (
|
||
child.position.y + Number(child.data.size?.height || 0) + LOOP_BODY_INSET.bottom
|
||
)));
|
||
const width = Math.max(Number(group.data.size?.width || 0), LOOP_MIN_SIZE.width, requiredWidth);
|
||
const height = Math.max(Number(group.data.size?.height || 0), LOOP_MIN_SIZE.height, requiredHeight);
|
||
group.width = width;
|
||
group.height = height;
|
||
group.data.size = { width, height };
|
||
group.data.properties = { ...group.data.properties, width, height };
|
||
});
|
||
|
||
return nodes.sort((left, right) => (
|
||
nodeHierarchyDepth(left, nodeLookup) - nodeHierarchyDepth(right, nodeLookup)
|
||
));
|
||
};
|
||
|
||
export const toVueFlowData = (graph = {}, options = {}) => {
|
||
const nodes = attachChildrenToGroups((graph.nodes || []).map((node) => (
|
||
toVueNode(node, options.nodeSizes?.get(node.id), options.nodePositions?.get(node.id))
|
||
)));
|
||
const nodeLookup = new Map(nodes.map((node) => [node.id, node]));
|
||
const edges = (graph.edges || []).map((edge) => {
|
||
const vueEdge = toVueEdge(edge);
|
||
const source = nodeLookup.get(vueEdge.source);
|
||
const target = nodeLookup.get(vueEdge.target);
|
||
if (source?.parentNode || target?.parentNode) vueEdge.zIndex = 4;
|
||
return vueEdge;
|
||
});
|
||
return { nodes, edges };
|
||
};
|
||
|
||
export const createFlowFacade = (store) => {
|
||
const handlers = new Map();
|
||
const componentInstances = new Map();
|
||
const loopLayoutStates = new Map();
|
||
let historySuspended = false;
|
||
let history = [];
|
||
let historyIndex = -1;
|
||
|
||
/**
|
||
* 获取 getNodes 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const getNodes = () => store.getNodes.value || [];
|
||
/**
|
||
* 获取 getEdges 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const getEdges = () => store.getEdges.value || [];
|
||
|
||
/**
|
||
* 获取节点在整个画布中的绝对左上角坐标。
|
||
*
|
||
* 实现思路：Vue Flow 的子节点 position 相对直接父节点，嵌套循环需要沿完整父链累加；
|
||
* visited 用于防御异常数据中的父子环，避免保存或布局时无限递归。
|
||
*
|
||
* @param {*} node Vue Flow 节点
|
||
* @param {Set<string>} visited 已访问的节点 ID
|
||
* @returns {{x: number, y: number}} 画布绝对坐标
|
||
*/
|
||
const getAbsoluteNodePosition = (node, visited = new Set()) => {
|
||
const position = node?.position || node?.computedPosition || { x: 0, y: 0 };
|
||
if (!node?.parentNode || visited.has(node.id)) {
|
||
return { x: Number(position.x || 0), y: Number(position.y || 0) };
|
||
}
|
||
const nextVisited = new Set(visited);
|
||
nextVisited.add(node.id);
|
||
const parent = store.findNode(node.parentNode);
|
||
if (!parent) return { x: Number(position.x || 0), y: Number(position.y || 0) };
|
||
const parentPosition = getAbsoluteNodePosition(parent, nextVisited);
|
||
return {
|
||
x: parentPosition.x + Number(position.x || 0),
|
||
y: parentPosition.y + Number(position.y || 0),
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 将 Vue Flow 节点序列化为后端使用的绝对坐标节点。
|
||
*
|
||
* 实现思路：先沿完整父链取得绝对位置，再恢复旧流程协议的中心点坐标；这样普通节点、
|
||
* 内层循环及更深层后代在保存和重新加载后都不会发生位置漂移。
|
||
*
|
||
* @param {*} node 当前流程节点
|
||
* @returns {*} 后端格式节点
|
||
*/
|
||
const backendNode = (node) => {
|
||
const result = clone(node.data.backend);
|
||
const size = {
|
||
width: Number(node.width || node.dimensions?.width || node.data.size?.width || 0),
|
||
height: Number(node.height || node.dimensions?.height || node.data.size?.height || 0),
|
||
};
|
||
const parent = node.parentNode ? store.findNode(node.parentNode) : null;
|
||
const absolutePosition = getAbsoluteNodePosition(node);
|
||
result.id = node.id;
|
||
result.type = node.data.flowType;
|
||
if (GROUP_TYPES.has(result.type)) {
|
||
result.x = absolutePosition.x + size.width / 2;
|
||
result.y = absolutePosition.y + size.height / 2;
|
||
} else {
|
||
const originalCenter = node.data.originalCenter || {
|
||
x: absolutePosition.x + size.width / 2,
|
||
y: absolutePosition.y + size.height / 2,
|
||
};
|
||
const originalPosition = node.data.originalPosition || absolutePosition;
|
||
result.x = originalCenter.x + absolutePosition.x - originalPosition.x;
|
||
result.y = originalCenter.y + absolutePosition.y - originalPosition.y;
|
||
}
|
||
result.properties = clone(node.data.properties || {});
|
||
if (parent?.data?.flowType === "selectArea") delete result.properties.parentId;
|
||
if (GROUP_TYPES.has(result.type)) {
|
||
result.properties.width = size.width;
|
||
result.properties.height = size.height;
|
||
}
|
||
if (node.data.children?.length || GROUP_TYPES.has(result.type)) {
|
||
result.children = [...(node.data.children || [])];
|
||
} else {
|
||
delete result.children;
|
||
}
|
||
return result;
|
||
};
|
||
|
||
/**
|
||
* 处理 backendEdge 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} edge 调用方传入的 edge 参数
|
||
*/
|
||
const backendEdge = (edge) => ({
|
||
...clone(edge.data?.backend),
|
||
id: edge.id,
|
||
type: edge.data?.backend?.type || "bezier",
|
||
sourceNodeId: edge.source,
|
||
targetNodeId: edge.target,
|
||
sourceAnchorId: edge.sourceHandle || `${edge.source}_1`,
|
||
targetAnchorId: edge.targetHandle || `${edge.target}_3`,
|
||
});
|
||
|
||
/**
|
||
* 处理 emit 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} name 名称或事件名称
|
||
* @param {*} payload 事件数据
|
||
*/
|
||
const emit = (name, payload) => {
|
||
(handlers.get(name) || []).forEach((handler) => handler(payload));
|
||
};
|
||
|
||
/**
|
||
* 处理 recordHistory 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const recordHistory = () => {
|
||
if (historySuspended) return;
|
||
const graph = facade.getGraphData();
|
||
const serialized = JSON.stringify(graph);
|
||
if (history[historyIndex]?.serialized === serialized) return;
|
||
history = history.slice(0, historyIndex + 1);
|
||
history.push({ serialized, graph: clone(graph) });
|
||
if (history.length > 100) history.shift();
|
||
historyIndex = history.length - 1;
|
||
};
|
||
|
||
/**
|
||
* 更新 changed 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const changed = () => {
|
||
if (historySuspended) return;
|
||
recordHistory();
|
||
emit("history:change", { data: facade.getGraphData() });
|
||
};
|
||
|
||
/**
|
||
* 获取节点在画布绝对坐标系中的矩形。
|
||
*
|
||
* @param {*} node 当前流程节点
|
||
* @returns {{x: number, y: number, width: number, height: number}} 绝对矩形
|
||
*/
|
||
const getNodeRect = (node) => {
|
||
const position = getAbsoluteNodePosition(node);
|
||
return {
|
||
x: Number(position?.x || 0),
|
||
y: Number(position?.y || 0),
|
||
width: Number(node.width || node.dimensions?.width || node.data.size?.width || 0),
|
||
height: Number(node.height || node.dimensions?.height || node.data.size?.height || 0),
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 获取 getLoopLayoutState 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} group 调用方传入的 group 参数
|
||
*/
|
||
const getLoopLayoutState = (group) => {
|
||
const current = getNodeRect(group);
|
||
const existing = loopLayoutStates.get(group.id);
|
||
/**
|
||
* 处理 if 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} !existing 调用方传入的 !existing 参数
|
||
*/
|
||
if (!existing) {
|
||
const state = { base: { ...current }, last: { ...current } };
|
||
loopLayoutStates.set(group.id, state);
|
||
return state;
|
||
}
|
||
|
||
const sizeChanged = Math.abs(current.width - existing.last.width) > 1
|
||
|| Math.abs(current.height - existing.last.height) > 1;
|
||
/**
|
||
* 处理 if 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} sizeChanged 调用方传入的 sizeChanged 参数
|
||
*/
|
||
if (sizeChanged) {
|
||
existing.base = { ...current };
|
||
} else {
|
||
const dx = current.x - existing.last.x;
|
||
const dy = current.y - existing.last.y;
|
||
existing.base.x += dx;
|
||
existing.base.y += dy;
|
||
}
|
||
existing.last = { ...current };
|
||
return existing;
|
||
};
|
||
|
||
/**
|
||
* 根据直接子节点的绝对矩形调整循环容器。
|
||
*
|
||
* 实现思路：布局计算统一使用画布绝对坐标；写回嵌套循环时，再减去父循环的绝对坐标
|
||
* 得到 Vue Flow 所需的相对 position，从而让同一算法同时适用于顶层和任意深度循环。
|
||
*
|
||
* @param {*} group 待调整的循环节点
|
||
* @param {string} activeChildId 正在拖动的直接子节点 ID
|
||
* @param {{x: number, y: number}} activePosition 正在拖动节点的绝对坐标
|
||
* @returns {boolean} 是否完成布局
|
||
*/
|
||
const layoutLoop = (group, activeChildId, activePosition) => {
|
||
const state = getLoopLayoutState(group);
|
||
const children = getNodes().filter((node) => node.parentNode === group.id);
|
||
if (!children.length) return false;
|
||
|
||
const snapshots = children.map((child) => {
|
||
const rect = getNodeRect(child);
|
||
const position = child.id === activeChildId && activePosition
|
||
? { x: activePosition.x, y: activePosition.y }
|
||
: { x: rect.x, y: rect.y };
|
||
return { child, position, width: rect.width, height: rect.height };
|
||
});
|
||
const contentLeft = Math.min(...snapshots.map(({ position }) => position.x));
|
||
const contentTop = Math.min(...snapshots.map(({ position }) => position.y));
|
||
const contentRight = Math.max(...snapshots.map(({ position, width }) => position.x + width));
|
||
const contentBottom = Math.max(...snapshots.map(({ position, height }) => position.y + height));
|
||
const left = Math.min(state.base.x, contentLeft - LOOP_BODY_INSET.left);
|
||
const top = Math.min(state.base.y, contentTop - LOOP_BODY_INSET.top);
|
||
const right = Math.max(
|
||
state.base.x + Math.max(state.base.width, LOOP_MIN_SIZE.width),
|
||
contentRight + LOOP_BODY_INSET.right,
|
||
);
|
||
const bottom = Math.max(
|
||
state.base.y + Math.max(state.base.height, LOOP_MIN_SIZE.height),
|
||
contentBottom + LOOP_BODY_INSET.bottom,
|
||
);
|
||
const width = right - left;
|
||
const height = bottom - top;
|
||
const properties = { ...group.data.properties, width, height };
|
||
const parent = group.parentNode ? store.findNode(group.parentNode) : null;
|
||
const parentPosition = parent ? getAbsoluteNodePosition(parent) : { x: 0, y: 0 };
|
||
const relativePosition = {
|
||
x: left - parentPosition.x,
|
||
y: top - parentPosition.y,
|
||
};
|
||
|
||
store.updateNode(group.id, {
|
||
position: relativePosition,
|
||
computedPosition: { ...group.computedPosition, x: left, y: top },
|
||
dimensions: { width, height },
|
||
width,
|
||
height,
|
||
});
|
||
store.updateNodeData(group.id, {
|
||
...group.data,
|
||
properties,
|
||
size: { width, height },
|
||
}, { replace: true });
|
||
snapshots.forEach(({ child, position }) => {
|
||
store.updateNode(child.id, {
|
||
position: { x: position.x - left, y: position.y - top },
|
||
computedPosition: { ...child.computedPosition, x: position.x, y: position.y },
|
||
extent: loopChildExtent(),
|
||
expandParent: false,
|
||
});
|
||
});
|
||
state.last = { x: left, y: top, width, height };
|
||
nextTick(() => store.updateNodeInternals([group.id, ...children.map((child) => child.id)]));
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* 从指定节点开始向上重新计算所有父循环尺寸。
|
||
*
|
||
* 实现思路：内层循环尺寸变化后，外层循环必须由内向外依次更新，否则外层可能裁剪
|
||
* 新增内容。visited 防止异常父子关系导致无限循环。
|
||
*
|
||
* @param {*} node 尺寸或位置已经变化的节点
|
||
*/
|
||
const layoutParentLoops = (node) => {
|
||
let parentId = node?.parentNode;
|
||
const visited = new Set();
|
||
while (parentId && !visited.has(parentId)) {
|
||
visited.add(parentId);
|
||
const parent = store.findNode(parentId);
|
||
if (!parent) break;
|
||
if (parent.data.flowType === "loop") layoutLoop(parent);
|
||
parentId = parent.parentNode;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 获取 getAnchors 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} node 当前流程节点
|
||
*/
|
||
const getAnchors = (node) => {
|
||
const type = node.data.flowType;
|
||
/**
|
||
* 处理 if 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} type 目标类型
|
||
*/
|
||
if (type === "branch") {
|
||
return [
|
||
{ id: `${node.id}_entry`, name: "left" },
|
||
...(node.data.properties?.anchor || []).map((item) => ({ ...item, name: "right" })),
|
||
];
|
||
}
|
||
if (TARGET_ONLY_TYPES.has(type)) return [{ id: `${node.id}_3`, name: "left" }];
|
||
if (SOURCE_ONLY_TYPES.has(type)) return [{ id: `${node.id}_1`, name: "right" }];
|
||
if (type === "selectArea") return [];
|
||
return [
|
||
{ id: `${node.id}_1`, name: "right" },
|
||
{ id: `${node.id}_3`, name: "left" },
|
||
];
|
||
};
|
||
|
||
/**
|
||
* 处理 modelFor 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
*/
|
||
const modelFor = (id) => {
|
||
const node = store.findNode(id);
|
||
if (!node) return null;
|
||
const model = {
|
||
id,
|
||
type: node.data.flowType,
|
||
get x() { return backendNode(node).x; },
|
||
get y() { return backendNode(node).y; },
|
||
get width() { return node.dimensions?.width || node.data.size?.width || 0; },
|
||
get height() { return node.dimensions?.height || node.data.size?.height || 0; },
|
||
get left() { return getNodeRect(node).x; },
|
||
get top() { return getNodeRect(node).y; },
|
||
get parentId() { return node.parentNode || null; },
|
||
get anchors() { return getAnchors(node); },
|
||
get children() { return new Set(node.data.children || []); },
|
||
set children(value) {
|
||
const children = Array.from(value || []);
|
||
store.updateNodeData(id, { ...node.data, children }, { replace: true });
|
||
changed();
|
||
},
|
||
get draggable() { return node.draggable !== false; },
|
||
set draggable(value) { store.updateNode(id, { draggable: Boolean(value) }); },
|
||
getProperties: () => facade.getProperties(id),
|
||
setProperties: (properties) => facade.setProperties(id, properties),
|
||
setComponentInstance: (instance) => componentInstances.set(id, instance),
|
||
closePopover: () => componentInstances.get(id)?.closePopover?.(),
|
||
updateSize: () => store.updateNodeInternals([id]),
|
||
setCustomProperties: () => store.updateNodeInternals([id]),
|
||
};
|
||
return model;
|
||
};
|
||
|
||
const facade = {
|
||
/**
|
||
* 订阅 on 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} name 名称或事件名称
|
||
* @param {*} handler 事件处理函数
|
||
*/
|
||
on(name, handler) {
|
||
const list = handlers.get(name) || [];
|
||
list.push(handler);
|
||
handlers.set(name, list);
|
||
return () => facade.off(name, handler);
|
||
},
|
||
/**
|
||
* 订阅 once 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} name 名称或事件名称
|
||
* @param {*} handler 事件处理函数
|
||
*/
|
||
once(name, handler) {
|
||
/**
|
||
* 处理 wrapped 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} payload 事件数据
|
||
*/
|
||
const wrapped = (payload) => {
|
||
facade.off(name, wrapped);
|
||
handler(payload);
|
||
};
|
||
facade.on(name, wrapped);
|
||
},
|
||
/**
|
||
* 取消订阅 off 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} name 名称或事件名称
|
||
* @param {*} handler 事件处理函数
|
||
*/
|
||
off(name, handler) {
|
||
if (!handler) handlers.delete(name);
|
||
else handlers.set(name, (handlers.get(name) || []).filter((item) => item !== handler));
|
||
},
|
||
emit,
|
||
markChanged: changed,
|
||
/**
|
||
* 获取 getGraphData 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
getGraphData() {
|
||
return {
|
||
nodes: getNodes().map(backendNode),
|
||
edges: getEdges().map(backendEdge),
|
||
};
|
||
},
|
||
/**
|
||
* 渲染 render 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} graph 调用方传入的 graph 参数
|
||
* @param {*} options 行为配置
|
||
*/
|
||
render(graph, options = {}) {
|
||
historySuspended = true;
|
||
loopLayoutStates.clear();
|
||
const nodeSizes = options.preserveNodeSizes === true
|
||
? new Map(getNodes().map((node) => [node.id, {
|
||
width: Number(node.dimensions?.width || node.width || node.data.size?.width || 0),
|
||
height: Number(node.dimensions?.height || node.height || node.data.size?.height || 0),
|
||
}]))
|
||
: options.nodeSizes;
|
||
const nodePositions = options.preserveNodePositions === true
|
||
? new Map(getNodes().map((node) => {
|
||
const rect = getNodeRect(node);
|
||
return [node.id, { x: rect.x, y: rect.y }];
|
||
}))
|
||
: options.nodePositions;
|
||
const data = toVueFlowData(graph, { nodeSizes, nodePositions });
|
||
/**
|
||
* 处理 finishRender 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const finishRender = () => {
|
||
historySuspended = false;
|
||
if (options.resetHistory !== false) {
|
||
history = [];
|
||
historyIndex = -1;
|
||
recordHistory();
|
||
}
|
||
nextTick(() => store.updateNodeInternals());
|
||
};
|
||
/**
|
||
* 处理 applyData 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
const applyData = () => {
|
||
store.setNodes(data.nodes);
|
||
store.setEdges(data.edges);
|
||
finishRender();
|
||
};
|
||
|
||
if (options.replaceNodes === true) {
|
||
// Changing parentNode is structural in Vue Flow. Unmount in one tick
|
||
// and remount in the next so node wrappers and edges cannot retain
|
||
// different graph-node instances for the same id.
|
||
store.setEdges([]);
|
||
store.setNodes([]);
|
||
nextTick(applyData);
|
||
} else {
|
||
applyData();
|
||
}
|
||
},
|
||
/**
|
||
* 新增 addNode 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} node 当前流程节点
|
||
*/
|
||
addNode(node) {
|
||
const vueNode = toVueNode(node);
|
||
store.addNodes(vueNode);
|
||
changed();
|
||
return backendNode(vueNode);
|
||
},
|
||
/**
|
||
* 删除节点，并在删除循环时递归清理其完整循环体。
|
||
*
|
||
* 实现思路：嵌套循环可能包含多层后代，不能只删除 children 中的第一层；先从当前
|
||
* 图数据统一收集后代，再一次性删除节点与关联边，避免留下带失效 parentId 的孤儿节点。
|
||
*
|
||
* @param {string} id 目标元素 ID
|
||
*/
|
||
deleteNode(id) {
|
||
const target = store.findNode(id);
|
||
if (target?.data?.flowType === "selectArea") {
|
||
facade.ungroup(id);
|
||
return;
|
||
}
|
||
const parentId = target?.parentNode;
|
||
const descendantIds = target?.data?.flowType === "loop"
|
||
? collectGraphDescendantIds(facade.getGraphData(), id)
|
||
: new Set();
|
||
const childIds = [...descendantIds];
|
||
const removeChildren = childIds.length > 0;
|
||
const nodeIds = removeChildren ? [id, ...childIds] : id;
|
||
const removedIds = new Set(Array.isArray(nodeIds) ? nodeIds : [nodeIds]);
|
||
store.removeNodes(nodeIds, true, removeChildren);
|
||
getNodes().forEach((node) => {
|
||
if (node.data.children?.includes(id) && !removedIds.has(node.id)) {
|
||
store.updateNodeData(node.id, {
|
||
...node.data,
|
||
children: node.data.children.filter((childId) => childId !== id),
|
||
}, { replace: true });
|
||
}
|
||
});
|
||
removedIds.forEach((nodeIdToDelete) => {
|
||
componentInstances.delete(nodeIdToDelete);
|
||
loopLayoutStates.delete(nodeIdToDelete);
|
||
});
|
||
changed();
|
||
if (parentId) nextTick(() => facade.resizeGroupToChildren(parentId));
|
||
},
|
||
/**
|
||
* 新增 addEdge 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} edge 调用方传入的 edge 参数
|
||
*/
|
||
addEdge(edge) {
|
||
const vueEdge = toVueEdge(edge);
|
||
const source = store.findNode(vueEdge.source);
|
||
const target = store.findNode(vueEdge.target);
|
||
if (source?.parentNode || target?.parentNode) vueEdge.zIndex = 4;
|
||
store.addEdges(vueEdge);
|
||
changed();
|
||
return backendEdge(vueEdge);
|
||
},
|
||
/**
|
||
* 删除 deleteEdge 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
*/
|
||
deleteEdge(id) {
|
||
store.removeEdges(id);
|
||
changed();
|
||
},
|
||
/**
|
||
* 删除 deleteEdgeByNodeId 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
*/
|
||
deleteEdgeByNodeId(id) {
|
||
store.removeEdges(getEdges().filter((edge) => edge.source === id || edge.target === id));
|
||
changed();
|
||
},
|
||
/**
|
||
* 获取 getProperties 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
*/
|
||
getProperties(id) {
|
||
return clone(store.findNode(id)?.data?.properties || {});
|
||
},
|
||
/**
|
||
* 设置 setProperties 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
* @param {*} properties 调用方传入的 properties 参数
|
||
*/
|
||
setProperties(id, properties) {
|
||
const node = store.findNode(id);
|
||
if (!node) return;
|
||
store.updateNodeData(id, { ...node.data, properties: clone(properties) }, { replace: true });
|
||
nextTick(() => store.updateNodeInternals([id]));
|
||
changed();
|
||
},
|
||
getNodeModelById: modelFor,
|
||
/**
|
||
* 获取 getSelectElements 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
getSelectElements() {
|
||
return {
|
||
nodes: (store.getSelectedNodes.value || []).map(backendNode),
|
||
edges: (store.getSelectedEdges.value || []).map(backendEdge),
|
||
};
|
||
},
|
||
/**
|
||
* 清理 clearSelectElements 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
clearSelectElements() {
|
||
store.removeSelectedElements();
|
||
},
|
||
/**
|
||
* 处理 selectElementById 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
*/
|
||
selectElementById(id) {
|
||
store.removeSelectedElements();
|
||
if (!id) return;
|
||
const node = store.findNode(id);
|
||
if (node) store.addSelectedNodes([node]);
|
||
const edge = store.findEdge(id);
|
||
if (edge) store.addSelectedEdges([edge]);
|
||
},
|
||
/**
|
||
* 处理 selectElementsByIds 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} ids 调用方传入的 ids 参数
|
||
*/
|
||
selectElementsByIds(ids = []) {
|
||
store.removeSelectedElements();
|
||
const nodes = ids.map((id) => store.findNode(id)).filter(Boolean);
|
||
if (nodes.length) store.addSelectedNodes(nodes);
|
||
},
|
||
/**
|
||
* 处理 focusOn 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} { id } 调用方传入的 { id } 参数
|
||
*/
|
||
focusOn({ id }) {
|
||
const node = store.findNode(id);
|
||
if (!node) return;
|
||
const center = backendNode(node);
|
||
store.setCenter(center.x, center.y, { zoom: Math.max(store.viewport.value?.zoom || 1, 0.7), duration: 300 });
|
||
},
|
||
/**
|
||
* 处理 fitView 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
fitView() {
|
||
return store.fitView({ padding: 0.18, duration: 300 });
|
||
},
|
||
/**
|
||
* 处理 translateCenter 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
translateCenter() {
|
||
return facade.fitView();
|
||
},
|
||
/**
|
||
* 缩放 zoom 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} scale 缩放比例
|
||
* @param {*} center 缩放中心
|
||
*/
|
||
zoom(scale, center) {
|
||
if (Array.isArray(center) && center.length === 2) {
|
||
return store.setCenter(center[0], center[1], { zoom: scale, duration: 250 });
|
||
}
|
||
return store.zoomTo(scale, { duration: 250 });
|
||
},
|
||
/**
|
||
* 获取 getPointByClient 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} x 客户端横坐标
|
||
* @param {*} y 客户端纵坐标
|
||
*/
|
||
getPointByClient(x, y) {
|
||
const point = store.screenToFlowCoordinate({ x, y });
|
||
return { canvasOverlayPosition: point, domOverlayPosition: point };
|
||
},
|
||
/**
|
||
* 将节点或循环子树挂载到目标容器。
|
||
*
|
||
* 实现思路：普通节点保持原有编组行为；loop 只允许进入另一个 loop，并在修改前
|
||
* 检查目标是否属于自身后代，防止产生环形父子关系。移动循环时整棵子树按相同位移
|
||
* 平移，同时只断开循环根节点跨作用域的连线，保留循环体内部连线。
|
||
*
|
||
* @param {string} groupId 目标容器节点 ID
|
||
* @param {string} childId 待挂载节点 ID
|
||
* @param {{x: number, y: number}} dropCenter 拖放中心绝对坐标
|
||
* @returns {boolean} 是否成功接受本次挂载
|
||
*/
|
||
addToGroup(groupId, childId, dropCenter) {
|
||
const group = store.findNode(groupId);
|
||
const child = store.findNode(childId);
|
||
if (!group || !child || groupId === childId) return false;
|
||
if (!canAttachToGroup(group.data.flowType, child.data.flowType)) return false;
|
||
const graph = facade.getGraphData();
|
||
const groupData = graph.nodes.find((node) => node.id === groupId);
|
||
const childData = graph.nodes.find((node) => node.id === childId);
|
||
if (!groupData || !childData) return false;
|
||
const descendantIds = collectGraphDescendantIds(graph, childId);
|
||
if (descendantIds.has(groupId)) return false;
|
||
const previousParentId = child.parentNode || child.data?.properties?.parentId;
|
||
|
||
// 节点从循环体外进入循环体后，原连线的两端已处于不同执行作用域，必须全部断开。
|
||
// 在重新渲染父子结构前直接过滤图数据，可保证入边、出边和层级变更在同一次更新中完成。
|
||
const enteringLoop = group.data.flowType === "loop" && previousParentId !== groupId;
|
||
if (enteringLoop) {
|
||
graph.edges = graph.edges.filter((edge) => (
|
||
edge.sourceNodeId !== childId && edge.targetNodeId !== childId
|
||
));
|
||
}
|
||
|
||
const previousGroup = graph.nodes.find((node) => node.id === previousParentId);
|
||
if (previousGroup && previousGroup.id !== groupId) {
|
||
previousGroup.children = (previousGroup.children || []).filter((id) => id !== childId);
|
||
}
|
||
groupData.children = Array.from(new Set([...(groupData.children || []), childId]));
|
||
childData.properties = { ...(childData.properties || {}), parentId: groupId };
|
||
if (dropCenter) {
|
||
const dx = Number(dropCenter.x) - Number(childData.x || 0);
|
||
const dy = Number(dropCenter.y) - Number(childData.y || 0);
|
||
childData.x = dropCenter.x;
|
||
childData.y = dropCenter.y;
|
||
graph.nodes.forEach((node) => {
|
||
if (!descendantIds.has(node.id)) return;
|
||
node.x = Number(node.x || 0) + dx;
|
||
node.y = Number(node.y || 0) + dy;
|
||
});
|
||
}
|
||
facade.render(graph, {
|
||
resetHistory: false,
|
||
replaceNodes: true,
|
||
preserveNodeSizes: true,
|
||
preserveNodePositions: true,
|
||
});
|
||
nextTick(() => {
|
||
store.updateNodeInternals([groupId, childId]);
|
||
changed();
|
||
});
|
||
return true;
|
||
},
|
||
/**
|
||
* 编组 groupNodes 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} groupNode 调用方传入的 groupNode 参数
|
||
* @param {*} childIds 子节点 ID 集合
|
||
*/
|
||
groupNodes(groupNode, childIds = []) {
|
||
// 先计算选中节点的外接矩形确定容器尺寸，再把子节点坐标转换为容器内相对坐标。
|
||
// 与分组外节点相连的边保持不变，此处仅更新节点层级和几何信息。
|
||
const graph = facade.getGraphData();
|
||
const selectedIds = new Set(childIds);
|
||
const children = graph.nodes.filter((node) => (
|
||
selectedIds.has(node.id)
|
||
&& !GROUP_TYPES.has(node.type)
|
||
&& !store.findNode(node.id)?.parentNode
|
||
));
|
||
if (!children.length) return null;
|
||
|
||
const group = clone(groupNode);
|
||
group.id ||= nodeId();
|
||
group.type = "selectArea";
|
||
group.properties = { ...(group.properties || {}), action: "NONE" };
|
||
group.children = children.map((node) => node.id);
|
||
children.forEach((node) => {
|
||
node.properties = { ...(node.properties || {}), parentId: group.id };
|
||
});
|
||
graph.nodes.push(group);
|
||
facade.render(graph, {
|
||
resetHistory: false,
|
||
replaceNodes: true,
|
||
preserveNodeSizes: true,
|
||
preserveNodePositions: true,
|
||
});
|
||
nextTick(() => {
|
||
store.updateNodeInternals([group.id, ...group.children]);
|
||
changed();
|
||
});
|
||
return clone(group);
|
||
},
|
||
/**
|
||
* 处理 ungroup 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} groupId 分组节点 ID
|
||
*/
|
||
ungroup(groupId) {
|
||
const graph = facade.getGraphData();
|
||
const group = graph.nodes.find((node) => node.id === groupId && node.type === "selectArea");
|
||
if (!group) return false;
|
||
const childIds = new Set([
|
||
...(group.children || []),
|
||
...graph.nodes.filter((node) => node.properties?.parentId === groupId).map((node) => node.id),
|
||
]);
|
||
graph.nodes = graph.nodes.filter((node) => node.id !== groupId);
|
||
graph.nodes.forEach((node) => {
|
||
if (!childIds.has(node.id)) return;
|
||
const properties = { ...(node.properties || {}) };
|
||
delete properties.parentId;
|
||
node.properties = properties;
|
||
});
|
||
facade.render(graph, {
|
||
resetHistory: false,
|
||
replaceNodes: true,
|
||
preserveNodeSizes: true,
|
||
preserveNodePositions: true,
|
||
});
|
||
nextTick(() => {
|
||
store.updateNodeInternals([...childIds]);
|
||
changed();
|
||
});
|
||
return true;
|
||
},
|
||
/**
|
||
* 准备 prepareLoopChildDrag 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} childId 子节点 ID
|
||
*/
|
||
prepareLoopChildDrag(childId) {
|
||
const child = store.findNode(childId);
|
||
const group = child?.parentNode ? store.findNode(child.parentNode) : null;
|
||
if (!group || group.data.flowType !== "loop") return;
|
||
store.updateNode(childId, {
|
||
extent: loopChildExtent(),
|
||
expandParent: false,
|
||
});
|
||
getLoopLayoutState(group);
|
||
const rect = getNodeRect(child);
|
||
return { groupId: group.id, position: { x: rect.x, y: rect.y } };
|
||
},
|
||
/**
|
||
* 在拖拽循环体节点时同步调整当前循环及所有外层循环。
|
||
*
|
||
* @param {string} groupId 当前直接父循环 ID
|
||
* @param {string} childId 正在拖动的节点 ID
|
||
* @param {{x: number, y: number}} position 节点绝对坐标
|
||
*/
|
||
layoutLoopDuringDrag(groupId, childId, position) {
|
||
const group = store.findNode(groupId);
|
||
if (!group || group.data.flowType !== "loop" || !position) return;
|
||
if (layoutLoop(group, childId, position)) layoutParentLoops(group);
|
||
},
|
||
/**
|
||
* 按循环体内容调整当前循环及其外层循环尺寸。
|
||
*
|
||
* @param {string} groupId 待调整的循环 ID
|
||
* @param {{markChanged?: boolean}} options 是否记录一次流程变更
|
||
*/
|
||
resizeGroupToChildren(groupId, options = {}) {
|
||
// 循环容器沿用统一的内边距和最小尺寸约束，并按配置决定是否记录变更。
|
||
// 拖拽过程可关闭变更标记，避免高频移动产生多余历史记录。
|
||
const group = store.findNode(groupId);
|
||
if (!group || group.data.flowType !== "loop") return;
|
||
if (layoutLoop(group)) {
|
||
layoutParentLoops(group);
|
||
if (options.markChanged !== false) changed();
|
||
}
|
||
},
|
||
/**
|
||
* 移动 moveNodeBy 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
* @param {*} dx 横向位移
|
||
* @param {*} dy 纵向位移
|
||
*/
|
||
moveNodeBy(id, dx, dy) {
|
||
const node = store.findNode(id);
|
||
if (!node) return;
|
||
store.updateNode(id, {
|
||
position: {
|
||
x: node.position.x + dx,
|
||
y: node.position.y + dy,
|
||
},
|
||
});
|
||
changed();
|
||
},
|
||
/**
|
||
* 撤销 undo 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
undo() {
|
||
if (historyIndex <= 0) return false;
|
||
historyIndex -= 1;
|
||
const snapshot = clone(history[historyIndex].graph);
|
||
facade.render(snapshot, { resetHistory: false, replaceNodes: true });
|
||
nextTick(() => emit("history:change", { data: facade.getGraphData() }));
|
||
return true;
|
||
},
|
||
/**
|
||
* 重做 redo 对应的数据或交互；作用范围仅限画布适配层。
|
||
*/
|
||
redo() {
|
||
if (historyIndex >= history.length - 1) return false;
|
||
historyIndex += 1;
|
||
const snapshot = clone(history[historyIndex].graph);
|
||
facade.render(snapshot, { resetHistory: false, replaceNodes: true });
|
||
nextTick(() => emit("history:change", { data: facade.getGraphData() }));
|
||
return true;
|
||
},
|
||
/**
|
||
* 注册 registerComponentInstance 对应的数据或交互；作用范围仅限画布适配层。
|
||
* @param {*} id 目标元素 ID
|
||
* @param {*} instance 组件实例
|
||
*/
|
||
registerComponentInstance(id, instance) {
|
||
if (instance) componentInstances.set(id, instance);
|
||
},
|
||
extension: {
|
||
selectionSelect: {
|
||
openSelectionSelect: () => emit("selection:open"),
|
||
closeSelectionSelect: () => emit("selection:close"),
|
||
},
|
||
},
|
||
};
|
||
|
||
return facade;
|
||
};
|