docs: update downloadFullImage API. docs: update tooltip offset docs.

2024-11-30 18:58:34 +08:00 · 2020-04-15 16:26:23 +08:00 · 2020-04-15 16:26:23 +08:00 · 11b80aaa32
commit 11b80aaa32
parent b56c83d3eb
9 changed files with 87 additions and 11 deletions
--- a/docs/api/Graph.en.md
+++ b/docs/api/Graph.en.md
@ -208,7 +208,7 @@ Change the data source, and render the graph according to the new data.

 | Name | Type | Required | Description |
 | --- | --- | --- | --- |
-| data | Object | true | Graph data, it should be an object containing an array of nodes and an array of edges. |
+| data | Object | false | Graph data, it should be an object containing an array of nodes and an array of edges. If it is not assigned, the graph will be re-rendered with the current data on the graph |

 **Usage**

@ -234,6 +234,9 @@ const data = {

 // graph is an instance of Graph
 graph.changeData(data);
+
+// If there is no parameter, the graph will be re-rendered with the current data on the graph
+graph.changeData();
 ```

 ### collapseGroup(groupId)
@ -1471,6 +1474,35 @@ graph.set('customGroup', group);
 graph.set('nodeIdList', [1, 3, 5]);
 ```

+
+
+### downloadFullImage(name, imageConfig)
+
+Export the whole graph as an image, whatever (a part of) the graph is out of the screen.
+
+**Parameters**
+
+| Name | Type   | Required | Description            |
+| ---- | ------ | -------- | ---------- |
+| name | String | false     | The name of the image. 'graph' by default. |
+| imageConfig | Object | false     | The configuration for the exported image, detials are shown below |
+
+where the `imageConfig` is the configuration for exported image:
+
+| Name | Type   | Required | Description            |
+| ---- | ------ | -------- | ---------- |
+| backgroundColor | String | false     | The background color of the image. If it is not assigned, the background will be transparent. |
+| padding | Number / Number[] | false     | The top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same |
+
+**Usage**
+
+```javascript
+graph.downloadFullImage('tree-graph', {
+  backgroundColor: '#ccc',
+  padding: [30, 15, 15, 15]
+});
+```
+
 ### downloadImage(name, backgroundColor)

 Export the canvas as an image.
@ -1479,7 +1511,7 @@ Export the canvas as an image.

 | Name | Type   | Required | Description            |
 | ---- | ------ | -------- | ---------------------- |
-| name | String | false     | The name of the image. 'image' by default. |
+| name | String | false     | The name of the image. 'graph' by default. |
 | backgroundColor | String | false     | The background color of the image. If it is not assigned, the background will be transparent. |

 **Usage**
--- a/docs/api/Graph.zh.md
+++ b/docs/api/Graph.zh.md
@ -210,7 +210,7 @@ graph.read(data);

 | 名称 | 类型   | 是否必选 | 描述                                     |
 | ---- | ------ | -------- | ---------------------------------------- |
-| data | Object | true     | 图数据，是一个包括 nodes 和 edges 的对象 |
+| data | Object | false     | 图数据，是一个包括 nodes 和 edges 的对象。若不指定该参数，则使用当前数据重新渲染 |

 **用法**

@ -236,6 +236,8 @@ const data = {

 // graph是Graph的实例
 graph.changeData(data);
+// 若不指定该参数，则使用当前图上的数据重新渲染
+graph.changeData();
 ```

 ### collapseGroup(groupId)
@ -1474,6 +1476,35 @@ graph.set('customGroup', group);
 graph.set('nodeIdList', [1, 3, 5]);
 ```

+
+### downloadFullImage(name, imageConfig)
+
+将画布上的元素导出为图片。
+
+**参数**
+
+| 名称 | 类型   | 是否必选 | 描述       |
+| ---- | ------ | -------- | ---------- |
+| name | String | false     | 图片的名称，不指定则为 'graph' |
+| imageConfig | Object | false     | 图片的配置项，可选，具体字段见下方 |
+
+其中，imageConfig 为导出图片的配置参数：
+
+| 名称 | 类型   | 是否必选 | 描述       |
+| ---- | ------ | -------- | ---------- |
+| backgroundColor | String | false     | 图片的背景色，可选，不传值时将导出透明背景的图片 |
+| padding | Number / Number[] | false     | 导出图片的上左下右 padding 值。当 `padding` 为 number 类型时，四周 `padding` 相等 |
+
+**用法**
+
+```javascript
+graph.downloadFullImage('tree-graph', {
+  backgroundColor: '#ccc',
+  padding: [30, 15, 15, 15]
+});
+```
+
+
 ### downloadImage(name, backgroundColor)

 将画布上的元素导出为图片。
@ -1482,7 +1513,7 @@ graph.set('nodeIdList', [1, 3, 5]);

 | 名称 | 类型   | 是否必选 | 描述       |
 | ---- | ------ | -------- | ---------- |
-| name | String | true     | 图片的名称 |
+| name | String | false     | 图片的名称，不指定则为 'graph' |
 | backgroundColor | String | false     | 图片的背景色，可选，不传值时将导出透明背景的图片 |

 **用法**
--- a/docs/manual/middle/states/defaultBehavior.en.md
+++ b/docs/manual/middle/states/defaultBehavior.en.md
@ -131,7 +131,8 @@ With the configuration above, users are allowed to select more than one nodes wh

 - Description: The tooltip for node;
 - `type: 'tooltip'`;
- `formatText(model)`: Format function, returns a text string or an HTML element.
+- `formatText(model)`: Format function, returns a text string or an HTML element;
+- `offset`：the offset of the tooltip to the mouse.

 ```javascript
 const graph = new G6.Graph({
@ -145,6 +146,7 @@ const graph = new G6.Graph({
        formatText(model) {
          return model.xxx;
        },
+        offset: 10
      },
    ],
  },
@ -169,7 +171,8 @@ The usage of edge-tooltip is similar to tooltip. It will be activated when the u

 - Description: The tooltip for edge;
 - `type: 'edge-tooltip'`;
- `formatText(model)`: Format function, returns a text string or an HTML element.
+- `formatText(model)`: Format function, returns a text string or an HTML element;
+- `offset`：the offset of the tooltip to the mouse.

 ### activate-relations

--- a/docs/manual/middle/states/defaultBehavior.zh.md
+++ b/docs/manual/middle/states/defaultBehavior.zh.md
@ -136,6 +136,7 @@ const graph = new G6.Graph({
 - 含义：节点文本提示；
 - `type: 'tooltip'`；
 - `formatText(model)`：格式化函数，可以返回文本或者 HTML；
+- `offset`：tooltip 距离鼠标的偏移量。

 ```javascript
 const graph = new G6.Graph({
@ -149,6 +150,7 @@ const graph = new G6.Graph({
        formatText(model) {
          return model.xxx;
        },
+        offset: 10
      },
    ],
  },
@ -173,7 +175,8 @@ const graph = new G6.Graph({

 - 含义：边文本提示；
 - `type: 'edge-tooltip'`；
- `formatText(model)`：格式化函数，可以返回文本或者 HTML。
+- `formatText(model)`：格式化函数，可以返回文本或者 HTML；
+- `offset`：tooltip 距离鼠标的偏移量。

 ### activate-relations

--- a/docs/manual/tutorial/plugins.en.md
+++ b/docs/manual/tutorial/plugins.en.md
@ -71,7 +71,7 @@ Interaction tools assist user interact a graph. Two steps are required: <br />

 ### Tooltip for Node

-Node tooltip shows the detail information when mouse enters a node.
+Node tooltip shows the detail information when mouse enters a node. More configurations are in [Built-in tooltip](/en/docs/manual/middle/states/defaultBehavior#tooltip).

 **Expected Effect**

@ -123,7 +123,7 @@ Actually, tooltip is a floating `<div>` tag of HTML. Thus, you can define the CS

 ### Tooltip for Edge

-Edge tooltip shows the detail information when mouse enters a edge.
+Edge tooltip shows the detail information when mouse enters a edge. More configurations are in [Built-in edge-tooltip](/en/docs/manual/middle/states/defaultBehavior#edge-tooltip).

 **Expected Effect**

--- a/docs/manual/tutorial/plugins.zh.md
+++ b/docs/manual/tutorial/plugins.zh.md
@ -71,7 +71,7 @@ const graph = new G6.Graph({

 ### tooltip 节点提示框

-节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。
+节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。更多配置参见 [内置交互 tooltip](/zh/docs/manual/middle/states/defaultBehavior#tooltip)。

 **预期效果**

@ -123,7 +123,9 @@ const graph = new G6.Graph({

 ### edge-tooltip 边提示框

-边提示框可以用在边的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。 **预期效果**
+边提示框可以用在边的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。更多配置参见 [内置交互 edge-tooltip](/zh/docs/manual/middle/states/defaultBehavior#edge-tooltip)。
+
+**预期效果**

 <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Uk10SYFNNi8AAAAAAAAAAABkARQnAQ' width=300 />

--- a/examples/interaction/highlight/demo/activateRelations.js
+++ b/examples/interaction/highlight/demo/activateRelations.js
@ -31,6 +31,7 @@ const graph = new G6.Graph({
        formatText: function formatText(model) {
          return model.name;
        },
+        offset: 30
      },
      {
        type: 'edge-tooltip',
@ -43,6 +44,7 @@ const graph = new G6.Graph({
            edge.getTarget().getModel().name
          );
        },
+        offset: 30
      },
      'activate-relations',
    ],
--- a/examples/interaction/highlight/demo/highlightDark.js
+++ b/examples/interaction/highlight/demo/highlightDark.js
@ -31,6 +31,7 @@ const graph = new G6.Graph({
        formatText: function formatText(model) {
          return model.name;
        },
+        offset: 30
      },
      {
        type: 'edge-tooltip',
@ -43,6 +44,7 @@ const graph = new G6.Graph({
            edge.getTarget().getModel().name
          );
        },
+        offset: 30
      },
    ],
  },
--- a/examples/net/forceDirected/demo/basicForceDirected.js
+++ b/examples/net/forceDirected/demo/basicForceDirected.js
@ -37,6 +37,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')

    const forceLayout = graph.get('layoutController').layoutMethod;
    graph.on('node:dragstart', function(e) {
+      graph.layout()
      refreshDragedNodePosition(e);
    });
    graph.on('node:drag', function(e) {