Skip to content

Commit

Permalink
docs: update upgrade docs (#5265)
Browse files Browse the repository at this point in the history 
* docs: update upgrade docs

* chore: update dumi-theme version, support scorll navigator
  • Loading branch information
@Aarebecca
Aarebecca authored Dec 13, 2023
1 parent 151a576 commit 85f969b
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 31 deletions.
4 changes: 4 additions & 0 deletions packages/site/.dumi/global.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.ant-layout-sider-children > :first-child {
height: 100%;
overflow-y: auto;
}
4 changes: 4 additions & 0 deletions packages/site/.dumirc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ export default defineConfig({
showChartResize: true, // 是否在 demo 页展示图表视图切换
showAPIDoc: true, // 是否在 demo 页展示API文档
themeSwitcher: 'g2',
prefersColor: {
default: 'light',
switch: false,
},
versions: {
// 历史版本以及切换下拉菜单
[version]: 'https://g6-next.antv.antgroup.com',
Expand Down
28 changes: 14 additions & 14 deletions packages/site/docs/manual/upgrade.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ type NodeModel = {
text?: string;
img?: string;
};
[key: string]: unknown; // other bussiniess properties
[key: string]: unknown; // other properties
};
};

Expand All @@ -168,7 +168,7 @@ type EdgeModel = {
type: 'icon' | 'text';
text: string;
};
[key: string]: unknown; // other bussiniess properties
[key: string]: unknown; // other properties
};
};
```
Expand Down Expand Up @@ -253,13 +253,13 @@ In the "Data Loading" section above, we introduced the types of the data field.

In other words, in v5, there is no longer a separate TreeGraph class. There is only one Graph class. The APIs specific to the TreeGraph class in v4 can be replaced as follows:

| Functionality | v4 TreeGraph API | v5 Alternative |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Add a subtree under a specified parent node | treeGraph.addChild(data, parent) | graph.addData('node', { id: 'new-child', { parentId: 'parent-node-id' }}) |
| Remove a specified subtree | treeGraph.removeChild(id) | graph.removeData('node', 'id-of-a-node'), if the removed node is not a leaf node, its child nodes are promoted to roots |
| Partially update a subtree <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1689649768051-5c9427d1-b141-40eb-82f6-c35b7ee7a016.png" width=100 alt='img' /> | treeGraph.updateChild(data, parentId) | graph.updateItem('node', { id: 'id-of-a-node', data: { ... }}) to update each node individually. If you need to add a child node, use addData('node', { id: 'id-of-new-child', { parentId: 'parent-node-id' }}) and pay attention to the order of operations |
| Partially update subtrees<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1689650008815-31a9525b-480a-4f8f-a935-9d1f32e4345c.png" width=100 alt='img' /> | treeGraph.updateChildren(data, parentId) | Same as above |
| Change the parent node | Remove the child node from the original parent node by removeChild and add it to the new parent node by addChild | graph.updateData('node', { id: 'child-id', { parentId: 'new-parent-id' }}) |
| Functionality | v4 TreeGraph API | v5 Alternative |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Add a subtree under a specified parent node | treeGraph.addChild(data, parent) | `graph.addData('node', { id: 'new-child' })`;<br/>`graph.addData('edge', { source: 'parent-node-id', target: 'new-child' })` |
| Remove a specified subtree | treeGraph.removeChild(id) | `graph.removeData('node', 'id-of-a-node')`, if the removed node is not a leaf node, its child nodes are promoted to roots |
| Partially update a subtree <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6lnkTIoHky0AAAAAAAAAAAAADmJ7AQ/original" width=100 alt='img' /> | treeGraph.updateChild(data, parentId) | `graph.updateItem('node', { id: 'id-of-a-node', data: { ... }})` to update each node |
| Partially update subtrees<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KAJITbWg0VAAAAAAAAAAAAAADmJ7AQ/original" width=100 alt='img' /> | treeGraph.updateChildren(data, parentId) | Same as above |
| Change the parent node | Remove the child node from the original parent node by removeChild and add it to the new parent node by addChild | graph.updateData('node', { id: 'child-id', { parentId: 'new-parent-id' }}) |

## 4️⃣. Element Type Names

Expand Down Expand Up @@ -676,16 +676,16 @@ The v4 coordinate systems (three sets) are described in the documentation: https

- v4 - clientX clientY: Coordinates relative to the browser coordinate system

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302101164-52c701b2-9eef-4cf1-b2ca-95b984a9eb75.png" width=200 />
<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302087381-e84a47fb-bb3e-47a5-a31b-ec6ee954aeb5.png" width=200 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*CjC6RJ7VMMAAAAAAAAAAAAAADmJ7AQ/original" width=200 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*su0hSZc4JN4AAAAAAAAAAAAADmJ7AQ/original" width=200 />

- v4 - canvasX canvasY: Coordinates relative to the canvas DOM

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302135790-b0068b20-c501-417e-92e8-24b0833e8bb6.png" width=400 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PtRlRaP80jgAAAAAAAAAAAAADmJ7AQ/original" width=400 />

- v4 - pointX pointY (same as x y in v4 events): Coordinates for drawing the graph

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302168542-cd214a5e-d6ea-401d-b425-d4183356e2a2.png" width=400 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*j884RIz5kGsAAAAAAAAAAAAADmJ7AQ/original" width=400 />

### v5 Coordinate Systems

Expand All @@ -696,7 +696,7 @@ It should be noted that the coordinate systems in v5 (four sets) have different
| Coordinates for drawing the graph | { x, y } or { pointerX, pointerY } | canvas: { x: number; y: number; z: number } |
| Coordinates relative to the browser coordinate system | { clientX, clientY } | client: { x: number; y: number; z: number } |
| Coordinates relative to the Canvas DOM coordinate system 系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } |
| Coordinates relative to the entire screen <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686301904342-082076d7-62f7-45a3-8ab3-5f83ec1b8102.png" width=100> | none | screen: { x: number; y: number; z: number } |
| Coordinates relative to the entire screen <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*c0EHR5IDzSEAAAAAAAAAAAAADmJ7AQ/original" width=100> | none | screen: { x: number; y: number; z: number } |

## 🌸. More small and wonderful changes

Expand Down
24 changes: 12 additions & 12 deletions packages/site/docs/manual/upgrade.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,13 +282,13 @@ const graph = new Graph({

也就是说，v5 中不再存在 TreeGraph Class，只有一个 Graph Class。那么 v4 中 TreeGraph Class 特有的 API 可以通过如下方式进行替代：

| 功能 | v4 TreeGraph API | v5 替代方案 |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 在指定的父节点下添加子树 | treeGraph.addChild(data, parent) | graph.addData('node', { id: 'new-child', { parentId: 'parent-node-id' }}) |
| 删除指定的子树 | treeGraph.removeChild(id) | graph.removeData('node', 'id-of-a-node')，若移除的不是叶子节点，则其子节点升级为 roots |
| 差量更新子树 <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1689649768051-5c9427d1-b141-40eb-82f6-c35b7ee7a016.png" width=100 alt='img' /> | treeGraph.updateChild(data, parentId) | graph.updateItem('node', { id: 'id-of-a-node', data: { ... }}) 分别更新每个节点。若需要新增一子节点，addData('node', { id: 'id-of-new-child', { parentId: 'parent-node-id' }})，需要注意顺序，先添加先继后添加后继 |
| 差量更新子树<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1689650008815-31a9525b-480a-4f8f-a935-9d1f32e4345c.png" width=100 alt='img' /> | treeGraph.updateChildren(data, parentId) | 同上 |
| 更改所属父节点 | 先从原父节点 removeChild，再在新父节点 addChild | graph.updateData('node', { id: 'child-id', { parentId: 'new-parent-id' }}) |
| 功能 | v4 TreeGraph API | v5 替代方案 |
| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| 在指定的父节点下添加子树 | `treeGraph.addChild(data, parent)` | `graph.addData('node', { id: 'new-child' });`<br/>`graph.addData('edge', { id: 'edge-id', source: 'parent-node-id', target: 'new-child' })` |
| 删除指定的子树 | `treeGraph.removeChild(id)` | `graph.removeData('node', 'id-of-a-node')`<br/>若移除的不是叶子节点，则其子节点升级为根节点 |
| 差量更新子树 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6lnkTIoHky0AAAAAAAAAAAAADmJ7AQ/original" width=100 alt='img' /> | `treeGraph.updateChild(data, parentId)` | 分别更新每个节点：`graph.updateItem('node', { id: 'id-of-a-node', data: { ... }})` |
| 差量更新子树<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KAJITbWg0VAAAAAAAAAAAAAADmJ7AQ/original" width=100 alt='img' /> | `treeGraph.updateChildren(data, parentId)` | 同上 |
| 更改所属父节点 | 先从原父节点 removeChild，再在新父节点 addChild | `graph.updateData('edge', { id: 'edge-id', source: 'new-parent-node-id', target: 'child-id'})` |

## 4️⃣. 元素类型名称

Expand Down Expand Up @@ -721,18 +721,18 @@ v4 的坐标系统（三套）见文档：https://g6.antv.antgroup.com/manual/ad
- v4 - clientX clientY
相对于浏览器的坐标系

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302101164-52c701b2-9eef-4cf1-b2ca-95b984a9eb75.png" width=200 />
<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302087381-e84a47fb-bb3e-47a5-a31b-ec6ee954aeb5.png" width=200 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*CjC6RJ7VMMAAAAAAAAAAAAAADmJ7AQ/original" width=200 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*su0hSZc4JN4AAAAAAAAAAAAADmJ7AQ/original" width=200 />

- v4 - canvasX canvasY
相对于 canvas DOM 的坐标系

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302135790-b0068b20-c501-417e-92e8-24b0833e8bb6.png" width=400 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PtRlRaP80jgAAAAAAAAAAAAADmJ7AQ/original" width=400 />

- v4 - pointX pointY （= v4 事件中的 x y）
图形绘制坐标系

<img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686302168542-cd214a5e-d6ea-401d-b425-d4183356e2a2.png" width=400 />
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*j884RIz5kGsAAAAAAAAAAAAADmJ7AQ/original" width=400 />

### v5 坐标系

Expand All @@ -743,7 +743,7 @@ v4 的坐标系统（三套）见文档：https://g6.antv.antgroup.com/manual/ad
| 图形的绘制坐标 | { x, y } 或 { pointerX, pointerY } | canvas: { x: number; y: number; z: number } |
| 相对于浏览器的坐标系 | { clientX, clientY } | client: { x: number; y: number; z: number } |
| 相对于 Canvas DOM 的坐标系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } |
| 相对于整个屏幕的坐标系 <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686301904342-082076d7-62f7-45a3-8ab3-5f83ec1b8102.png" width=100> | 无 | screen: { x: number; y: number; z: number } |
| 相对于整个屏幕的坐标系 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*c0EHR5IDzSEAAAAAAAAAAAAADmJ7AQ/original" width=100> | 无 | screen: { x: number; y: number; z: number } |

## 🌸. 其他微小而美好的改变

Expand Down
2 changes: 1 addition & 1 deletion packages/site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"@ant-design/icons": "^5.2.6",
"@antv/algorithm": "^0.1.26",
"@antv/chart-node-g6": "^0.0.3",
"@antv/dumi-theme-antv": "^0.4.1",
"@antv/dumi-theme-antv": "^0.4.4",
"@antv/g2": "^5.1.5",
"@antv/g6": "workspace:*",
"@antv/g6-plugin-map-view": "workspace:*",
Expand Down
Loading

0 comments on commit 85f969b

Please sign in to comment.