docs: groupByTypes for combo docs.

docs/api/Graph.en.md

@@ -22,7 +22,7 @@ The life cycle of an instance of Graph is: Initialize -> Load data -> Render ->
 | height | Number | undefined | The height of the canvas for graph with the unit 'px'. |
 | fitView | Boolean | false | Whether to fit the canvas to the view port. |
 | fitViewPadding | Array | Number | Takes effect only when `fitView: true`. It is the padding between canvas and the border of view port.<br />- It can be a value, e.g. `fitViewPadding: 20`, which means the padding to the top, left, right, bottom are the same.<br />- Or an array, e.g. `fitViewPadding: [ 20, 40, 50, 20 ]`, the four values in the array indicate the padding to the top, right, bottom, left respectively. |
-| groupByTypes | Boolean | true | Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. |
+| groupByTypes | Boolean | true | Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. When you are using Combo, **MUST** set `groupByTypes` to `false` |
 | autoPaint | Boolean | true | Whether to paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off `antoPaint` when you are doing bulk operation on nodes or edges. This can be refered to [`setAutoPaint()`](#setautopaintauto). |
 | modes | Object |  | The interaction modes of this graph. Please refer to [Interaction Mode](/en/docs/manual/middle/states/mode) for detail。 |
 | nodeStateStyles | Object | {} | The node styles on different states, e.g. hover, selected. It is a new feature of G6 3.1. |

docs/api/Graph.zh.md

@@ -22,7 +22,7 @@ Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销
 | height | Number | undefined | 指定画布高度，单位为 'px'。 |
 | fitView | Boolean | false | 是否开启画布自适应。开启后图自动适配画布大小。 |
 | fitViewPadding | Array | Number | `fitView` 为 `true` 时生效。图适应画布时，指定四周的留白。<br />- 可以是一个值, 例如：`fitViewPadding: 20`<br />- 也可以是一个数组，例如：`fitViewPadding: [ 20, 40, 50, 20 ]`<br />当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。 |
-| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。 |
+| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。当使用 Combo 时，**必须**将其设置为 `false` |
 | autoPaint | Boolean | true | 当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。 |
 | modes | Object |  | 设置画布的模式。详情可见  [交互模式 Mode](/zh/docs/manual/middle/states/mode)  文档。 |
 | nodeStateStyles | Object | {} | 各个状态下节点的样式，例如 `hover`、`selected`，3.1 版本新增。 |

docs/manual/middle/combo.en.md

@@ -77,6 +77,9 @@ An example for the data item for a combo
 - When there is no layout configured in the graph, you'd better assign `x` and `y` in the data items of `nodes`, or they will be placed at random positions;
 - Empty combo will be placed randomly.
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> Must set the `groupByTypes` to `false` when instantiating the graph, which will result in rendering result with reasonable visual zIndex for combos.
+
+
 ```javascript
 const data = {
   nodes: [
@@ -167,6 +170,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
 });
 
 graph.data(data);
@@ -212,6 +217,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   modes: {
     default: ['drag-combo', 'collapse-expand-combo', 'drag-node'],
   }

docs/manual/middle/combo.zh.md

@@ -77,6 +77,9 @@ order: 8
 - 当没有使用任何布局时，需要在 `nodes` 数组中指定各个节点的坐标信息，即节点的 `x` 和 `y` 属性值，否则会使用随机的位置；
 - 空的 combo 将使用随机位置。
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 必须在示例化图时配置 `groupByTypes` 设置为 `false`，带有 combo 的图中元素的视觉层级才能合理。
+
+
 ```javascript
 const data = {
   nodes: [
@@ -167,6 +170,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
 });
 
 graph.data(data);
@@ -215,6 +220,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   modes: {
     default: ['drag-combo', 'collapse-expand-combo', 'drag-node'],
   }

docs/manual/middle/elements/combos/circle.en.md

@@ -11,6 +11,8 @@ Built-in Circle Combo has the default style as below, the label is drawed on the
 
 As stated in [Built-in Combos](/en/docs/manual/middle/elements/combos/defaultCombo) , there are two ways to configure the combo: Configure it when instantiating a Graph globally; Configure it in the data.
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> Must set the `groupByTypes` to `false` when instantiating the graph, which will result in rendering result with reasonable visual zIndex for combos.
+
 ### 1 Global Configure When Instantiating a Graph
 
 Assign `type` to `'circle'` in the `defaultCombo` object when instantiating a Graph:
@@ -20,6 +22,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     type: 'circle', // The type of the combo
     // ... Other configuraltions
@@ -80,6 +84,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // type: 'circle',  // The type has been assigned in the data, we do not have to define it any more
     style: {
@@ -103,6 +109,8 @@ const data = {
 };
 const graph = new G6.Graph({
   // ... Other configurations for graph
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // ... Other properties for combos
     labelCfg: {

docs/manual/middle/elements/combos/circle.zh.md

@@ -11,6 +11,8 @@ G6 内置了圆  Circle Combo，其默认样式如下。标签文本位于圆
 
 如 [内置 Combo](/zh/docs/manual/middle/elements/combos/defaultCombo) 一节所示，配置 Combo 的方式有两种：实例化图时全局配置，在数据中动态配置。
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 使用 Combo 时，必须在示例化图时配置 `groupByTypes` 设置为 `false`，图中元素的视觉层级才能合理。
+
 ### 1 实例化图时全局配置
 
 用户在实例化 Graph 时候可以通过 `defaultCombo` 指定 `type` 为 `'circle'`，即可使用 `circle` Combo。
@@ -20,6 +22,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     type: 'circle', // Combo 类型
     // ... 其他配置
@@ -81,6 +85,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // type: 'circle',  // 在数据中已经指定 type，这里无需再次指定
     style: {
@@ -104,6 +110,8 @@ const data = {
 };
 const graph = new G6.Graph({
   // ... 图的其他属性
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // ... Combo 其他属性
     labelCfg: {

docs/manual/middle/elements/combos/defaultCombo.en.md

@@ -7,6 +7,8 @@ The built-in Combos in G6 include circle and rect types. <br /> <img src='https:
 
 In this document, we will briefly introduce the built-in Combos in G6, the common property, and the way to configure the combo type. To know more about each type of built-in combos in G6, please refer to the corresponding documents in this directory.
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> Must set the `groupByTypes` to `false` when instantiating the graph, which will result in rendering result with reasonable visual zIndex for combos.
+
 ## Types of Default Combos
 
 The table below shows the built-in Combos and their special properties:
@@ -53,6 +55,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // ... Other properties for combos
     style: {
@@ -95,6 +99,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // ... Other properties for combos
     labelCfg: {
@@ -125,6 +131,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     type: 'circle',
     // Other properties for all the combos
@@ -223,6 +231,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 1500,
   height: 300,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
 });
 graph.data(data);
 graph.render();

docs/manual/middle/elements/combos/defaultCombo.zh.md

@@ -7,6 +7,9 @@ G6 的内置 Combo 包括 circle 和 rect 两种类型，分别如下图所示
 
 本文将概述 G6 中的各个内置 Combo 类型、内置 Combo 的通用属性、配置方法。各类型 Combo 详细配置项及配置方法见本目录下相应文档。
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 使用 Combo 时，必须在示例化图时配置 `groupByTypes` 设置为 `false`，图中元素的视觉层级才能合理。
+
+
 ## 内置 Combo 类型说明
 
 下面表格中显示了内置的各类 Combo，同时对一些特殊的字段进行了说明：
@@ -55,6 +58,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // ... 其他属性
     style: {
@@ -97,6 +102,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // ... 其他属性
     labelCfg: {
@@ -127,6 +134,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     type: 'circle',
     // 其他配置
@@ -225,6 +234,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 1500,
   height: 300,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
 });
 graph.data(data);
 graph.render();

docs/manual/middle/elements/combos/rect.en.md

@@ -11,6 +11,9 @@ Built-in Rect Combo has the default style as below, the label is drawed on the l
 
 As stated in [Built-in Combos](/en/docs/manual/middle/elements/combos/defaultCombo) , there are two ways to configure the combo: Configure it when instantiating a Graph globally; Configure it in the data.
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> Must set the `groupByTypes` to `false` when instantiating the graph, which will result in rendering result with reasonable visual zIndex for combos.
+
+
 ### 1 Global Configure When Instantiating a Graph
 
 Assign `type` to `'rect'` in the `defaultCombo` object when instantiating a Graph:
@@ -20,6 +23,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     type: 'rect', // The type of the combo
     // ... Other configuraltions
@@ -80,6 +85,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // type: 'rect',  // The type has been assigned in the data, we do not have to define it any more
     style: {
@@ -103,6 +110,8 @@ const data = {
 };
 const graph = new G6.Graph({
   // ... Other configurations for graph
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     // ... Other properties for combos
     labelCfg: {

docs/manual/middle/elements/combos/rect.zh.md

@@ -12,6 +12,8 @@ G6 内置了矩形 Rect Combo，其默认样式如下。标签文本位于矩形
 
 如 [内置 Combo](/zh/docs/manual/middle/elements/combos/defaultCombo) 一节所示，配置 Combo 的方式有两种：实例化图时全局配置，在数据中动态配置。
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 使用 Combo 时，必须在示例化图时配置 `groupByTypes` 设置为 `false`，图中元素的视觉层级才能合理。
+
 ### 1 实例化图时全局配置
 
 用户在实例化 Graph 时候可以通过 `defaultCombo` 指定 `type` 为 `'rect'`，即可使用 `rect` Combo。
@@ -21,6 +23,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     type: 'rect', // Combo 类型
     // ... 其他配置
@@ -82,6 +86,8 @@ const graph = new G6.Graph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // type: 'rect',  // 在数据中已经指定 type，这里无需再次指定
     style: {
@@ -105,6 +111,8 @@ const data = {
 };
 const graph = new G6.Graph({
   // ... 图的其他属性
+  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
+  groupByTypes: false,
   defaultCombo: {
     // ... Combo 其他属性
     labelCfg: {

examples/interaction/combo/demo/cCircle.js

@@ -0,0 +1,139 @@
+import G6 from '@antv/g6';
+
+/**
+ * The demo shows customing a combo type by extending the built-in circle combo
+ * by Shiwu
+ *
+ */
+
+// The symbols for the marker inside the combo
+const collapseIcon = (x, y, r) => {
+  return [
+    ['M', x - r, y],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x - r + 4, y],
+    ['L', x - r + 2 * r - 4, y],
+  ];
+};
+const expandIcon = (x, y, r) => {
+  return [
+    ['M', x - r, y],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x - r + 4, y],
+    ['L', x - r + 2 * r - 4, y],
+    ['M', x - r + r, y - r + 4],
+    ['L', x, y + r - 4],
+  ];
+};
+
+G6.registerCombo('cCircle', {
+  drawShape: function draw(cfg, group) {
+    const self = this;
+    // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo
+    const style = self.getShapeStyle(cfg);
+    // Add a circle shape as keyShape which is the same as the extended 'circle' type Combo
+    const circle = group.addShape('circle', {
+      attrs: {
+        ...style,
+        x: 0,
+        y: 0,
+        r: style.r
+      },
+      draggable: true,
+      name: 'combo-keyShape'
+    });
+    // Add the marker on the bottom
+    const marker = group.addShape('marker', {
+      attrs: {
+        ...style,
+        fill: '#fff',
+        opacity: 1,
+        x: 0,
+        y: style.r,
+        r: 10,
+        symbol: collapseIcon
+      },
+      draggable: true,
+      name: 'combo-marker-shape'
+    });
+
+    return circle;
+  },
+  // Define the updating logic for the marker
+  afterUpdate: function afterUpdate(cfg, combo) {
+    const self = this;
+    // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo
+    const style = self.getShapeStyle(cfg);
+    const group = combo.get('group');
+    // Find the marker shape in the graphics group of the Combo
+    const marker = group.find(ele => ele.get('name') === 'combo-marker-shape');
+    // Update the marker shape
+    marker.attr({
+      x: 0,
+      y: style.r,
+      // The property 'collapsed' in the combo data represents the collapsing state of the Combo
+      // Update the symbol according to 'collapsed'
+      symbol: cfg.collapsed ? expandIcon : collapseIcon
+    });
+  }
+}, 'circle');
+
+
+const data = {
+  nodes: [
+    { id: 'node1', x: 250, y: 200, comboId: 'combo1' },
+    { id: 'node2', x: 300, y: 200, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
+  ],
+  combos: [
+    { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
+    { id: 'combo2', label: 'Combo 2' },
+    { id: 'combo3', label: 'Combo 3', collapsed: true },
+  ]
+};
+
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML =
+  'Click the bottom marker to collapse/expand the combo.';
+const graphDiv = document.getElementById('container');
+graphDiv.appendChild(descriptionDiv)
+
+const width = document.getElementById('container').scrollWidth;
+const height = (document.getElementById('container').scrollHeight || 500) - 20;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
+  // Configure the combos globally
+  defaultCombo: {
+    // The type of the combos. You can also assign type in the data of combos
+    type: 'cCircle',
+    labelCfg: {
+      refY: 2
+    }
+    // ... Other global configurations for combos
+  },
+  modes: {
+    default: [
+      'drag-combo',
+      'drag-node',
+      'drag-canvas'
+    ]
+  }
+});
+graph.data(data);
+graph.render();
+
+// collapse/expand when click the marker
+graph.on('combo:click', e => {
+  if (e.target.get('name') === 'combo-marker-shape') {
+    // graph.collapseExpandCombo(e.item.getModel().id);
+    graph.collapseExpandCombo(e.item);
+    if (graph.get('layout')) graph.layout();
+    else graph.refreshPositions();
+  }
+});

examples/interaction/combo/demo/cRect.js

@@ -0,0 +1,137 @@
+import G6 from '@antv/g6';
+
+/**
+ * The demo shows customing a combo type by extending the built-in circle combo
+ * by Shiwu
+ *
+ */
+
+// The symbols for the marker inside the combo
+const collapseIcon = (x, y, r) => {
+  return [
+    ['M', x - r, y],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x - r + 4, y],
+    ['L', x - r + 2 * r - 4, y],
+  ];
+};
+const expandIcon = (x, y, r) => {
+  return [
+    ['M', x - r, y],
+    ['a', r, r, 0, 1, 0, r * 2, 0],
+    ['a', r, r, 0, 1, 0, -r * 2, 0],
+    ['M', x - r + 4, y],
+    ['L', x - r + 2 * r - 4, y],
+    ['M', x - r + r, y - r + 4],
+    ['L', x, y + r - 4],
+  ];
+};
+
+G6.registerCombo('cRect', {
+  drawShape: function drawShape(cfg, group) {
+    const self = this;
+    // Get the padding from the configuration
+    cfg.padding = cfg.padding || [50, 20, 20, 20];
+    // Get the shape's style, where the style.width and style.height correspond to the width and height in the figure of Illustration of Built-in Rect Combo
+    const style = self.getShapeStyle(cfg);
+    // Add a rect shape as the keyShape which is the same as the extended rect Combo
+    const rect = group.addShape('rect', {
+      attrs: {
+        ...style,
+        x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2,
+        y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2,
+        width: style.width,
+        height: style.height
+      },
+      draggable: true,
+      name: 'combo-keyShape'
+    });
+    // Add the circle on the right
+    group.addShape('marker', {
+      attrs: {
+        ...style,
+        fill: '#fff',
+        opacity: 1,
+        // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
+        x: cfg.style.width / 2 + cfg.padding[1],
+        y: (cfg.padding[2] - cfg.padding[0]) / 2,
+        r: 10,
+        symbol: collapseIcon
+      },
+      draggable: true,
+      name: 'combo-marker-shape'
+    });
+    return rect;
+  },
+  // Define the updating logic of the right circle
+  afterUpdate: function afterUpdate(cfg, combo) {
+    const group = combo.get('group');
+    // Find the circle shape in the graphics group of the Combo by name
+    const marker = group.find(ele => ele.get('name') === 'combo-marker-shape');
+    // Update the position of the right circle
+    marker.attr({
+      // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
+      x: cfg.style.width / 2 + cfg.padding[1],
+      y: (cfg.padding[2] - cfg.padding[0]) / 2,
+      // The property 'collapsed' in the combo data represents the collapsing state of the Combo
+      // Update the symbol according to 'collapsed'
+      symbol: cfg.collapsed ? expandIcon : collapseIcon
+    });
+  }
+}, 'rect');
+
+
+const data = {
+  nodes: [
+    { id: 'node1', x: 250, y: 200, comboId: 'combo1' },
+    { id: 'node2', x: 300, y: 200, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
+  ],
+  combos: [
+    { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
+    { id: 'combo2', label: 'Combo 2' },
+    { id: 'combo3', label: 'Combo 3', collapsed: true },
+  ]
+};
+
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML =
+  'Click the right marker to collapse/expand the combo.';
+const graphDiv = document.getElementById('container');
+graphDiv.appendChild(descriptionDiv);
+
+const width = document.getElementById('container').scrollWidth;
+const height = (document.getElementById('container').scrollHeight || 500) - 20;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
+  // Configure the combos globally
+  defaultCombo: {
+    // The type of the combos. You can also assign type in the data of combos
+    type: 'cRect',
+    // ... Other global configurations for combos
+  },
+  modes: {
+    default: [
+      'drag-combo',
+      'drag-node',
+      'drag-canvas'
+    ]
+  }
+});
+graph.data(data);
+graph.render();
+
+// collapse/expand when click the marker
+graph.on('combo:click', e => {
+  if (e.target.get('name') === 'combo-marker-shape') {
+    // graph.collapseExpandCombo(e.item.getModel().id);
+    graph.collapseExpandCombo(e.item);
+    if (graph.get('layout')) graph.layout();
+    else graph.refreshPositions();
+  }
+});

examples/interaction/combo/demo/circle.js

@@ -0,0 +1,74 @@
+import G6 from '@antv/g6';
+
+
+const data = {
+  nodes: [
+    { id: 'node1', x: 350, y: 200, comboId: 'combo1' },
+    { id: 'node2', x: 350, y: 250, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
+  ],
+  edges: [
+    { source: 'node1', target: 'node2' },
+    { source: 'node1', target: 'node3' },
+    { source: 'combo1', target: 'node3' }
+  ],
+  combos: [
+    { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
+    { id: 'combo2', label: 'Combo 2' },
+    { id: 'combo3', label: 'Combo 3', collapsed: true },
+  ]
+};
+
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML =
+  'Double click the combo to collapse/expand it. Drag the node or combo to change the hierarchy.';
+const graphDiv = document.getElementById('container');
+graphDiv.appendChild(descriptionDiv);
+
+const width = document.getElementById('container').scrollWidth;
+const height = (document.getElementById('container').scrollHeight || 500) - 20;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
+  defaultCombo: {
+    type: 'circle',
+    style: {
+      lineWidth: 1,
+    },
+    labelCfg: {
+      refY: 15,
+      position: 'bottom',
+    }
+  },
+  modes: {
+    default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'],
+  },
+  comboStateStyles: {
+    // 鼠标 hover 状态下 combo 样式
+    hover: {
+      lineWidth: 3
+    },
+  },
+  nodeStateStyles: {
+    // 鼠标 hover 状态下节点样式
+    hover: {
+      lineWidth: 3
+    },
+  },
+});
+
+graph.data(data);
+graph.render();
+
+graph.on('combo:mouseenter', evt => {
+  const { item } = evt;
+  graph.setItemState(item, 'hover', true);
+});
+
+graph.on('combo:mouseleave', evt => {
+  const { item } = evt;
+  graph.setItemState(item, 'hover', false);
+});

examples/interaction/combo/demo/meta.json

@@ -0,0 +1,28 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "circle.js",
+      "title": "圆形 Combo",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Rvx9SYSHGsIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "rect.js",
+      "title": "矩形 Combo",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qvmVTZc-iNcAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "cCircle.js",
+      "title": "扩展圆形 Combo",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1LelSq5TP9EAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "cRect.js",
+      "title": "扩展矩形 Combo",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*rQGaT4kiaYoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/interaction/combo/demo/rect.js

@@ -0,0 +1,77 @@
+import G6 from '@antv/g6';
+
+
+
+const data = {
+  nodes: [
+    { id: 'node1', x: 350, y: 200, comboId: 'combo1' },
+    { id: 'node2', x: 350, y: 250, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
+  ],
+  edges: [
+    { source: 'node1', target: 'node2' },
+    { source: 'node1', target: 'node3' },
+    { source: 'combo1', target: 'node3' }
+  ],
+  combos: [
+    { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
+    { id: 'combo2', label: 'Combo 2' },
+    { id: 'combo3', label: 'Combo 3' },
+  ]
+};
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML =
+  'Double click the combo to collapse/expand it. Drag the node or combo to change the hierarchy.';
+const graphDiv = document.getElementById('container');
+graphDiv.appendChild(descriptionDiv);
+
+const width = document.getElementById('container').scrollWidth;
+const height = (document.getElementById('container').scrollHeight || 500) - 20;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
+  defaultCombo: {
+    type: 'rect',
+    size: [40, 10], // The minimum size of the Combo
+    padding: [30, 20, 10, 20],
+    style: {
+      lineWidth: 1,
+    },
+    labelCfg: {
+      refY: 10,
+      refX: 20,
+      position: 'top',
+    }
+  },
+  modes: {
+    default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'],
+  },
+  comboStateStyles: {
+    // 鼠标 hover 状态下 combo 样式
+    hover: {
+      lineWidth: 3
+    },
+  },
+  nodeStateStyles: {
+    // 鼠标 hover 状态下节点样式
+    hover: {
+      lineWidth: 3
+    },
+  },
+});
+
+graph.data(data);
+graph.render();
+
+graph.on('combo:mouseenter', evt => {
+  const { item } = evt;
+  graph.setItemState(item, 'hover', true);
+});
+
+graph.on('combo:mouseleave', evt => {
+  const { item } = evt;
+  graph.setItemState(item, 'hover', false);
+});

examples/interaction/combo/index.en.md

@@ -0,0 +1,12 @@
+---
+title: Node Combo
+order: 3
+---
+
+New feature of V3.5. There are 2 kinds of built-in combos in G6, which can be extended by configurations([docs](/en/docs/manual/middle/elements/combos/defaultCombo)) and custom mechanism ([docs](/en/docs/manual/advanced/custom-combo), [demo](/en/examples/item/customCombo)). The following two examples allow users to drag the combo or node to change the hierarchy, and double click to collapse/expand a combo.
+
+## Usage
+
+2 built-in combos and their extensions allow users to select appropriate ones for their scenario. 
+
+Please refer to [Built-in Combos](/en/docs/manual/middle/elements/combos/defaultCombo) for more information.

examples/interaction/combo/index.zh.md

@@ -0,0 +1,10 @@
+---
+title: 节点分组 Combo
+order: 3
+---
+
+自 V3.5 起支全新节点分组机制 Combo。内置了 2 种不同类型的 Combo，支持通过配置（[文档](/zh/docs/manual/middle/elements/combos/defaultCombo)）进行扩展，支持自定义（[文档](/zh/docs/manual/advanced/custom-combo)，[Demo](/zh/examples/item/customCombo)）。下面两个例子允许节点和 Combo 的拖拽改变从属关系，双击收缩/展开 Combo。
+
+## 何时使用
+
+用户可根据具体的业务场景，选择合适的内置 Combo。更多内容请参考 [内置 Combo](/zh/docs/manual/middle/elements/combos/defaultCombo)。

examples/interaction/nodeGroup/index.en.md

@@ -1,9 +1,9 @@
 ---
 title: Node Group
-order: 3
+order: 4
 ---
 
-G6 supports node group.
+G6 supports node group. We recommend to use the new mechanism [Combo](/en/examples/interaction/combo).
 
 ## Usage
 

examples/interaction/nodeGroup/index.zh.md

@@ -1,9 +1,9 @@
 ---
-title: 节点分组
-order: 3
+title: 节点分组 Group
+order: 4
 ---
 
-G6 支持节点分组。
+G6 支持节点分组。建议使用新的分组机制 [Combo](/zh/examples/interaction/combo).
 
 ## 使用指南
 

examples/interaction/partialResponse/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Region Response
-order: 4
+order: 5
 ---
 
 Region response on a node or edge.

examples/interaction/partialResponse/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 响应区域事件
-order: 4
+order: 5
 ---
 
 区域响应。

examples/interaction/setMode/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Change Mode to Add items
-order: 6
+order: 7
 ---
 
 You can change to different modes with the selector on the left top. Dragging node, adding node, adding edge are enabled in different modes. This mechanism help developers to avoid the conflict of same events in different behaviors.

examples/interaction/setMode/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 切换模式增加点和边
-order: 6
+order: 7
 ---
 
 使用左上角的下拉框切换交互模式，在不同模式下拖动节点、增加节点、增加边，从而避免交互事件的冲突。

examples/item/customCombo/demo/cCircle.js

@@ -80,15 +80,17 @@ G6.registerCombo('cCircle', {
   }
 }, 'circle');
 
+
 const data = {
   nodes: [
     { id: 'node1', x: 250, y: 200, comboId: 'combo1' },
-    { id: 'node2', x: 300, y: 200, comboId: 'combo1' }
+    { id: 'node2', x: 300, y: 200, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
   ],
   combos: [
     { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
     { id: 'combo2', label: 'Combo 2' },
-    { id: 'combo3', label: 'Combo 3' },
+    { id: 'combo3', label: 'Combo 3', collapsed: true },
   ]
 };
 
@@ -104,6 +106,8 @@ const graph = new G6.Graph({
   container: 'container',
   width,
   height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   // Configure the combos globally
   defaultCombo: {
     // The type of the combos. You can also assign type in the data of combos

examples/item/customCombo/demo/cRect.js

@@ -81,15 +81,17 @@ G6.registerCombo('cRect', {
   }
 }, 'rect');
 
+
 const data = {
   nodes: [
     { id: 'node1', x: 250, y: 200, comboId: 'combo1' },
-    { id: 'node2', x: 300, y: 200, comboId: 'combo1' }
+    { id: 'node2', x: 300, y: 200, comboId: 'combo1' },
+    { id: 'node3', x: 100, y: 200, comboId: 'combo3' }
   ],
   combos: [
     { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },
     { id: 'combo2', label: 'Combo 2' },
-    { id: 'combo3', label: 'Combo 3' },
+    { id: 'combo3', label: 'Combo 3', collapsed: true },
   ]
 };
 
@@ -97,7 +99,7 @@ const descriptionDiv = document.createElement('div');
 descriptionDiv.innerHTML =
   'Click the right marker to collapse/expand the combo.';
 const graphDiv = document.getElementById('container');
-graphDiv.appendChild(descriptionDiv)
+graphDiv.appendChild(descriptionDiv);
 
 const width = document.getElementById('container').scrollWidth;
 const height = (document.getElementById('container').scrollHeight || 500) - 20;
@@ -105,6 +107,8 @@ const graph = new G6.Graph({
   container: 'container',
   width,
   height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   // Configure the combos globally
   defaultCombo: {
     // The type of the combos. You can also assign type in the data of combos

examples/item/customCombo/index.en.md

@@ -7,4 +7,4 @@ The custom combo mechanism in G6 allows users to design their own node by extend
 
 ## Usage
 
-The following examples show how to custom a combo type by extending the built-in combo types. For more information, please refer to [Custom Combo](/en/docs/manual/advanced/custom-combo)。
+The following examples show how to custom a combo type by extending the built-in combo types. For more information, please refer to [Custom Comb o Doc](/en/docs/manual/advanced/custom-combo).

examples/item/customCombo/index.zh.md

@@ -7,4 +7,4 @@ order: 5
 
 ## 使用指南
 
-下面示例展示了通过扩展内置的 Circle 和 Rect Combo，进行 Combo 的自定义。更多信息参见[自定义 Combo](/zh/docs/manual/advanced/custom-combo)。
+下面示例展示了通过扩展内置的 Circle 和 Rect Combo，进行 Combo 的自定义。更多信息参见[自定义 Combo 文档](/zh/docs/manual/advanced/custom-combo)。

examples/item/customNode/index.en.md

@@ -7,4 +7,4 @@ The custom node mechanism in G6 allows users to design their own node when there
 
 ## Usage
 
-For more information, please refer to [Custom Node](/en/docs/manual/advanced/custom-node)。
+For more information, please refer to [Custom Node](/en/docs/manual/advanced/custom-node).

examples/item/defaultCombos/demo/circle.js

@@ -27,6 +27,8 @@ const graph = new G6.Graph({
   container: 'container',
   width,
   height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     type: 'circle',
     style: {

examples/item/defaultCombos/demo/rect.js

@@ -27,6 +27,8 @@ const graph = new G6.Graph({
   container: 'container',
   width,
   height,
+  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
+  groupByTypes: false,
   defaultCombo: {
     type: 'rect',
     size: [50, 50], // Combo 的最小大小

examples/item/defaultCombos/index.en.md

@@ -3,7 +3,7 @@ title: Built-in Combos
 order: 2
 ---
 
-There are 2 kinds of built-in combos in G6, which can be extended by [configurations](/en/docs/manual/middle/elements/combos/defaultCombo) and [custom combo mechanism](/en/docs/manual/advanced/custom-combo). The following two examples allow users to drag the combo or node to change the hierarchy, and double click to collapse/expand a combo.
+New feature of V3.5. There are 2 kinds of built-in combos in G6, which can be extended by [configurations](/en/docs/manual/middle/elements/combos/defaultCombo) and [custom combo mechanism](/en/docs/manual/advanced/custom-combo). The following two examples allow users to drag the combo or node to change the hierarchy, and double click to collapse/expand a combo.
 
 ## Usage
 

examples/item/defaultCombos/index.zh.md

@@ -3,7 +3,7 @@ title: 内置 Combo
 order: 2
 ---
 
-G6 共内置了 2 种不同类型的 Combo，支持通过[配置](/zh/docs/manual/middle/elements/combos/defaultCombo)进行扩展，支持[自定义](/zh/docs/manual/advanced/custom-combo)。下面两个例子允许节点和 Combo 的拖拽改变从属关系，双击收缩/展开 Combo。
+自 V3.5 起支全新节点分组机制 Combo。内置了 2 种不同类型的 Combo，支持通过[配置](/zh/docs/manual/middle/elements/combos/defaultCombo)进行扩展，支持[自定义](/zh/docs/manual/advanced/custom-combo)。下面两个例子允许节点和 Combo 的拖拽改变从属关系，双击收缩/展开 Combo。
 
 ## 何时使用