docs: update site docs

packages/core/src/graph/controller/layout.ts

@@ -329,11 +329,11 @@ export default abstract class LayoutController {
     let allHavePos = true;
     for (let i = 0; i < nodeLength; i++) {
       const node = nodes[i];
-      if (isNaN(node.x)) {
+      if (isNaN(+node.x)) {
         allHavePos = false;
         node.x = (i % horiNum) * horiGap + beginX;
       }
-      if (isNaN(node.y)) {
+      if (isNaN(+node.y)) {
         allHavePos = false;
         node.y = Math.floor(i / horiNum) * vertiGap + beginY;
       }

packages/core/src/item/item.ts

@@ -608,8 +608,8 @@ export default class ItemBase implements IItemBase {
     const cfgVisible = cfg.visible;
     if (oriVisible !== cfgVisible && cfgVisible !== undefined) this.changeVisibility(cfgVisible);
     const originPosition: IPoint = { x: model.x!, y: model.y! };
-    cfg.x = isNaN(cfg.x) ? model.x : cfg.x;
-    cfg.y = isNaN(cfg.y) ? model.y : cfg.y;
+    cfg.x = isNaN(+cfg.x) ? model.x : (+cfg.x);
+    cfg.y = isNaN(+cfg.y) ? model.y : (+cfg.y);
 
     const styles = this.get('styles');
     if (cfg.stateStyles) {
@@ -671,8 +671,8 @@ export default class ItemBase implements IItemBase {
   public updatePosition(cfg: ModelConfig): boolean {
     const model: ModelConfig = this.get('model');
 
-    const x = isNil(cfg.x) ? model.x : cfg.x;
-    const y = isNil(cfg.y) ? model.y : cfg.y;
+    const x = isNil(+cfg.x) ? (+model.x) : (+cfg.x);
+    const y = isNil(+cfg.y) ? (+model.y) : (+cfg.y);
 
     const group: IGroup = this.get('group');
 

packages/pc/tests/unit/element/combo-spec.ts

@@ -71,4 +71,4 @@ describe('Combo with fixSize and fixCollapseSize', () => {
 
     graph.destroy();
   });
-});
+});

packages/site/docs/api/Items/nodeMethods.en.md

@@ -123,16 +123,8 @@ Get all the anchor points of the node.
 
 ```javascript
 [
-  (0: {
-    x: 100,
-    y: 105,
-    index: 0,
-  }),
-  (1: {
-    x: 200,
-    y: 105,
-    index: 1,
-  }),
+  [100, 105],
+  [200, 105]
 ];
 ```
 

packages/site/docs/api/Items/nodeMethods.zh.md

@@ -129,16 +129,8 @@ const edges = node.getOutEdges();
 
 ```javascript
 [
-  (0: {
-    x: 100,
-    y: 105,
-    index: 0,
-  }),
-  (1: {
-    x: 200,
-    y: 105,
-    index: 1,
-  }),
+  [100, 105],
+  [200, 105]
 ];
 ```
 

packages/site/docs/api/graphLayout/forceAtlas2.en.md

@@ -35,3 +35,58 @@ const graph = new G6.Graph({
 ## layoutCfg.workerEnabled
 
 **Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction
+
+## layoutCfg.kr
+
+**Type**: Number<br />**Default**: 5<br />**Required**: false<br />**Description**: Repulsive parameter, smaller the kr, more compact the graph
+
+## layoutCfg.kg
+
+**Type**: Number<br />**Default**: 5<br />**Required**: false<br />**Description**: The parameter for the gravity. Larger kg, the graph will be more compact to the center
+
+## layoutCfg.ks
+
+**Type**: Number<br />**Default**: 0.1<br />**Required**: false<br />**Description**: The moving speed of the nodes during iterations
+
+## layoutCfg.tao
+
+**Type**: Number<br />**Default**: 0.1<br />**Required**: false<br />**Description**: The threshold of the swinging
+
+## layoutCfg.mode
+
+**Type**: 'normal' | 'linlog'<br />**Default**: 'normal'<br />**Required**: false<br />**Description**: Under 'linlog' mode, the cluster will be more compact
+## layoutCfg.preventOverlap
+
+**Type**: boolean<br />**Default**: false<br />**Required**: false<br />**Description**: Whether prevent node overlappings
+
+## layoutCfg.dissuadeHubs
+
+**Type**: boolean<br />**Default**: false<br />**Required**: false<br />**Description**: Wheather to enable hub mode. If it is true, the nodes with larger in-degree will be placed on the center in higher priority
+
+## layoutCfg.barnesHut
+
+**Type**: boolean<br />**Default**: undefined<br />**Required**: false<br />**Description**: Whether to enable the barnes hut speedup, which is the quad-tree optimization. Due to the computation for quad-tree re-build in each iteration, we sugguest to enable it in large graph. It is undefined by deafult, when the number of nodes is larger than 250, it will be activated automatically. If it is set to be false, it will not be activated anyway
+
+## layoutCfg.prune
+
+**Type**: boolean<br />**Default**: undefined<br />**Required**: false<br />**Description**: Whether to enable auto pruning. It is undefined by default, which means when the number of nodes is larger than 100, it will be activated automatically. If it is set to be false, it will not be activated anyway
+
+## layoutCfg.maxIteration
+
+**Type**: number<br />**Default**: 0<br />**Required**: false<br />**Description**: The max iteration number. When it is set to be 0, the iteration number will be automatically adjusted according to the convergence
+
+## layoutCfg.getWidth
+
+**Type**: function<br />**Default**: undefined<br />**Required**: false<br />**Description**: The width function of the nodes, the parameter is the data model of a node
+
+## layoutCfg.getHeight
+
+**Type**: function<br />**Default**: undefined<br />**Required**: false<br />**Description**: The height function of the nodes, the parameter is the data model of a node
+
+## layoutCfg.onLayoutEnd
+
+**Type**: function<br />**Default**: undefined<br />**Required**: false<br />**Description**: The callback function of layout
+
+## layoutCfg.onTick
+
+**Type**: function<br />**Default**: undefined<br />**Required**: false<br />**Description**: The callback function for each iteration

packages/site/docs/api/graphLayout/forceAtlas2.zh.md

@@ -66,11 +66,11 @@ const graph = new G6.Graph({
 
 ## layoutCfg.barnesHut
 
-**类型**： boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开
+**类型**： boolean<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 false 则不会自动被激活
 
 ## layoutCfg.prune
 
-**类型**： boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否开启自动剪枝模式。默认情况下，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量
+**类型**： boolean<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：是否开启自动剪枝模式。默认情况下为 undefined，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 false 则不会自动被激活
 
 ## layoutCfg.maxIteration
 

packages/site/docs/api/treeGraphLayout/compactBox.en.md

@@ -35,6 +35,22 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo
 
 <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZFCiTLwCoAYAAAAAAAAAAABkARQnAQ' width=102 alt='img'/>
 
+
+### layoutCfg.getSide
+
+**Type**: Function<br />**Example**:
+
+```javascript
+(d) => {
+  // d is a node
+  if (d.id === 'test-child-id') return 'right';
+  return 'left';
+};
+```
+
+**Default**: 'right'<br />**Required**: false<br />**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it
+
+
 ### layoutCfg.getId
 
 **Type**: Function<br />**Example**:

packages/site/docs/api/treeGraphLayout/compactBox.zh.md

@@ -35,6 +35,21 @@ order: 1
 
 <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E0c8TIYRPYoAAAAAAAAAAABkARQnAQ' width=100 alt='img'/>
 
+### layoutCfg.getSide
+
+**类型**：Function<br />**示例**：
+
+```javascript
+(d) => {
+  // d 是一个节点
+  if (d.id === 'test-child-id') return 'right';
+  return 'left';
+};
+```
+
+**默认值**：'right'<br />**是否必须**：false<br />**说明**：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。
+
+
 ### layoutCfg.getId
 
 **类型**: Function<br />**示例**:

packages/site/docs/manual/middle/elements/edges/defaultEdge.en.md

@@ -36,7 +36,7 @@ The table below shows the built-in edges and their special properties:
 
 | Name | Required | Type | Remark |
 | --- | --- | --- | --- | --- |
-| id | false | String | The id of the edge, **MUST** be a unique string |
+| id | true | String | The id of the edge, **MUST** be a unique string |
 | source | true | String | Number | The id of the source node |
 | target | true | String | The id of the target node |
 | type | false | String | The type of the edge. It can be the type of a Built-in Edge, or a custom Edge. `'line'` by default |

packages/site/docs/manual/middle/elements/edges/defaultEdge.zh.md

@@ -39,7 +39,7 @@ G6 提供了 9 种内置边：
 
 | 名称 | 是否必须 | 类型 | 备注 |
 | --- | --- | --- | --- | --- |
-| id | false | String | 边唯一 ID，**必须**是唯一的 string |
+| id | true | String | 边唯一 ID，**必须**是唯一的 string |
 | source | true | String | Number | 起始点 id |
 | target | true | String | 结束点 id |
 | type | false | String | 指定边的类型，可以是内置边的类型名称，也可以是自定义边的名称。默认为 `'line'` |

packages/site/docs/manual/middle/elements/shape/transform.en.md

@@ -86,7 +86,10 @@ To achive some transformation in G6 3.3, you should set the matrix value manuall
 We provide the function for transformantion:
 
 ```javascript
-import { transform } from '@antv/matrix-util';
+import { ext } from '@antv/matrix-util';
+
+const transform = ext.transform;
+
 // transform a 3*3 matrix
 transform(m, [
   ['t', x, y], // translate with vector (x, y)
@@ -100,7 +103,10 @@ transform(m, [
 The following code registers a custom node with a transfromed rect with: translation with vector `(100, 50)`, rotating with angle `Math.PI / 4`, magnifying 2 times on x-axis and 0.5 times on y-axis:
 
 ```javascript
-import { transform, mat3 } from '@antv/matrix-util';
+import { ext, mat3 } from '@antv/matrix-util';
+
+const transform = ext.transform;
+
 G6.registerNode('example', {
   drawShape: (cfg, group) => {
     const rect = group.addShape('rect', {

packages/site/docs/manual/middle/elements/shape/transform.zh.md

@@ -86,7 +86,10 @@ rect.transform([
 为了方面使用，我们提供了矩阵变换的工具方法：
 
 ```javascript
-import { transform } from '@antv/matrix-util';
+import { ext } from '@antv/matrix-util';
+
+const transform = ext.transform;
+
 // 3*3 矩阵变换，用于二维渲染
 transform(m, [
   ['t', 100, 50], // translate (100, 50)
@@ -100,7 +103,10 @@ transform(m, [
 以下方法实现了在自定义节点 example 中增加一个矩形，并将该矩形位移 `(100, 50)` 后，旋转 `Math.PI / 4`，最后在 x 方向放大 2 倍，并在 y 方向缩小 2 倍：
 
 ```javascript
-import { transform, mat3 } from '@antv/matrix-util';
+import { ext, mat3 } from '@antv/matrix-util';
+
+const transform = ext.transform;
+
 G6.registerNode('example', {
   drawShape: (cfg, group) => {
     const rect = group.addShape('rect', {

packages/site/examples/tree/indented/demo/intendAlignTop.js

@@ -52,7 +52,7 @@ G6.registerNode('card-node', {
           y: 0,
           r: 6,
           cursor: 'pointer',
-          symbol: G6.Marker.collapse,
+          symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
           stroke: '#666',
           lineWidth: 1,
           fill: '#fff',