Combo

Combo 是节点的分组容器，用于把一组节点圈在一个可视包围框内。它支持嵌套、折叠 / 展开，以及整体拖拽。

Combo 包围框由 Canvas 2D 在 WebGL 画布下方叠加绘制，不影响节点和边的 GPU 渲染路径。

声明 Combo

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [
      { id: 'n1', comboId: 'frontend' },
      { id: 'n2', comboId: 'frontend' },
      { id: 'n3', comboId: 'backend' },
    ],
    edges: [{ source: 'n1', target: 'n3' }],
    combos: [
      { id: 'frontend', data: { name: 'Frontend' } },
      { id: 'backend', data: { name: 'Backend' } },
    ],
  },
  layout: { type: 'd3-force' },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
});

ComboData

字段	说明
`id`	Combo 唯一标识
`parentId`	父 Combo id，用于嵌套
`style`	单个 Combo 的样式覆盖
`data`	业务扩展字段

样式

combo: {
  style: {
    fill: 'rgba(91, 143, 249, 0.08)',
    stroke: 'rgba(91, 143, 249, 0.35)',
    strokeWidth: 1,
    borderRadius: 12,
    padding: 30,
    label: (combo) => (combo.data as Record<string, string>)?.name ?? combo.id,
    labelPlacement: 'top',
  },
}

折叠与展开

graph.collapseCombo('frontend');
graph.expandCombo('frontend');
graph.toggleCombo('frontend');

graph.on('combo:collapse', ({ comboId }) => console.log(comboId));
graph.on('combo:expand', ({ comboId }) => console.log(comboId));

动态调整归属

graph.addToCombo('n4', 'frontend');
graph.removeFromCombo('n4');
graph.createCombo({ id: 'new-group' }, ['n1', 'n2']);
graph.removeCombo('new-group');

查询

graph.getComboData('frontend');
graph.getComboChildren('frontend');
graph.getNodeCombo('n1');

整体拖拽

启用 drag-node 后，拖拽 Combo 区域会带动其子节点一起移动，并触发 combo:dragstart、combo:drag、combo:dragend 事件。