虚拟连线与目标（RGFakeLine + RGConnectTarget）
FakeLine 用于连线端点不是普通节点的场景。
它可以让线条连接到：
RGConnectTarget包裹的自定义元素- 画布上的连接目标
- 指定 id 的 HTML 元素
- 通过自定义解析器提供几何信息的业务对象
1. 与普通连线的区别
普通连线（RGLine）：
from/to必须是节点 id。
虚拟连线（RGFakeLine）：
from/to可指向非节点目标。- 支持
fromType/toType定义端点类型。 - 不像普通结构线那样参与节点布局关系。
2. FakeLine 的增删改查
const fakeLine = {
id: 'f1',
from: 'node-a',
to: 'target-element-1',
text: 'A -> Target'
};
graphInstance.addFakeLines([fakeLine]);
const f1 = graphInstance.getFakeLineById('f1');
更新与删除：
graphInstance.updateLine('f1', { text: 'Updated FakeLine' });
graphInstance.removeFakeLineById('f1');
3. 配合 RGConnectTarget 使用
React 示例：
<RGConnectTarget targetId="target-element-1">
<div style={{ width: '80px', height: '30px' }}>可连接目标</div>
</RGConnectTarget>
当 FakeLine 的 from/to 指向该 targetId 时，线条可连接到该元素。
4. 端点类型（fromType / toType）
内置支持的端点类型包括：
- 普通节点
- 节点内部连接点
- 画布连接点
- HTML 元素 id
对于自定义业务对象类型，需要使用 setFakeLineTargetRender。
5. 通过 setFakeLineTargetRender 连接任意对象
graphInstance.setFakeLineTargetRender((targetType, targetId, fakeLine) => {
if (targetType === 'myGroup') {
return {
x: 200,
y: 150,
nodeShape: 0, // rect/circle 枚举值
el_W: 100,
el_H: 50
};
}
return null;
});
该函数返回目标对象的几何信息，图谱据此渲染 FakeLine。
6. 实践建议
- 在初始化 FakeLine 数据前先注册自定义 target render。
- target id 必须稳定可追踪。
- FakeLine 非常适合编辑器中的分组、泳道、面板锚点等场景。
- 无法解析目标几何信息时，FakeLine 无法正确渲染。