doc: rich document (#561)

sites/x6-sites/docs/tutorial/advanced/react.en.md

@@ -349,7 +349,7 @@ export default ({
 ```
 
 [[warning]]
-| 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。
+| 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。同样当 `component` 为 Vue 组件或函数时，将不能通过 `graph.toJSON()` 方法导出画布数据。我们同样提供了 `Graph.registerVueComponent(...)` 来解决这个问题。
 
 ## 渲染标签
 

sites/x6-sites/docs/tutorial/advanced/react.zh.md

@@ -349,7 +349,7 @@ export default ({
 ```
 
 [[warning]]
-| 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。
+| 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。同样当 `component` 为 Vue 组件或函数时，将不能通过 `graph.toJSON()` 方法导出画布数据。我们同样提供了 `Graph.registerVueComponent(...)` 来解决这个问题。
 
 ## 渲染标签
 

sites/x6-sites/docs/tutorial/basic/graph.en.md

@@ -8,3 +8,119 @@ redirect_from:
 ---
 
 在 X6 中，Graph 是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
+
+## 导出
+
+### 导出 PNG/JPEG
+
+```ts
+import { DataUri } from '@antv/x6'
+
+this.graph.toPNG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(dataUri, 'chart.png')
+})
+```
+`toPNG/toJPEG` 方法支持第二个参数：
+
+```ts
+interface ToImageOptions {
+  width?: number
+  height?: number
+  backgroundColor?: string
+  padding?: NumberExt.SideOptions
+  quality?: number
+}
+```
+
+#### width
+
+导出图片的宽度
+
+#### height
+
+导出图片的高度
+
+#### backgroundColor
+
+导出图片的背景色
+
+#### padding
+
+图片的 `padding`
+
+```ts
+this.graph.toPNG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(dataUri, 'chart.png')
+}, {
+  padding: {
+    top: 20,
+    right: 30,
+    bottom: 40,
+    left: 50,
+  },
+})
+```
+
+#### quality
+
+图片质量，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 `0.92`
+
+### 导出 SVG
+
+```ts
+this.graph.toSVG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
+})
+```
+
+`toSVG` 方法还支持第二个参数：
+
+```ts
+interface ToSVGOptions {
+  preserveDimensions?: boolean | Size
+  viewBox?: Rectangle.RectangleLike
+  copyStyles?: boolean
+  stylesheet?: string
+  serializeImages?: boolean
+  beforeSerialize?: (this: Graph, svg: SVGSVGElement) => any
+}
+```
+
+#### preserveDimensions
+
+`preserveDimensions` 用来控制导出 `svg` 的尺寸, 如果不设置，`width` 和 `height` 默认为 `100%`；如果设置为 `true`, `width` 和 `height` 会自动计算为图形区域的实际大小。还可以通过以下方式自定义尺寸：
+
+```ts
+this.graph.toSVG((dataUri: string) => {
+  // todo
+}, {
+  preserveDimensions: {
+    width: 100,
+    height: 100,
+  }
+})
+```
+
+#### viewBox
+
+设置导出 `svg` 的 `viewBox`
+
+#### copyStyles
+
+是否复制外部样式表中的样式，默认是 `true`。
+
+#### stylesheet
+
+自定义样式表
+
+#### serializeImages
+
+是否将 `image` 元素的 `xlink:href` 链接转化为 `dataUri` 格式
+
+#### beforeSerialize
+
+可以在导出 `svg` 字符串之前调用 `beforeSerialize` 来修改它。
+

sites/x6-sites/docs/tutorial/basic/graph.zh.md

@@ -8,3 +8,119 @@ redirect_from:
 ---
 
 在 X6 中，Graph 是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
+
+## 导出
+
+### 导出 PNG/JPEG
+
+```ts
+import { DataUri } from '@antv/x6'
+
+this.graph.toPNG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(dataUri, 'chart.png')
+})
+```
+`toPNG/toJPEG` 方法支持第二个参数：
+
+```ts
+interface ToImageOptions {
+  width?: number
+  height?: number
+  backgroundColor?: string
+  padding?: NumberExt.SideOptions
+  quality?: number
+}
+```
+
+#### width
+
+导出图片的宽度
+
+#### height
+
+导出图片的高度
+
+#### backgroundColor
+
+导出图片的背景色
+
+#### padding
+
+图片的 `padding`
+
+```ts
+this.graph.toPNG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(dataUri, 'chart.png')
+}, {
+  padding: {
+    top: 20,
+    right: 30,
+    bottom: 40,
+    left: 50,
+  },
+})
+```
+
+#### quality
+
+图片质量，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 `0.92`
+
+### 导出 SVG
+
+```ts
+this.graph.toSVG((dataUri: string) => {
+  // 下载
+  DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
+})
+```
+
+`toSVG` 方法还支持第二个参数：
+
+```ts
+interface ToSVGOptions {
+  preserveDimensions?: boolean | Size
+  viewBox?: Rectangle.RectangleLike
+  copyStyles?: boolean
+  stylesheet?: string
+  serializeImages?: boolean
+  beforeSerialize?: (this: Graph, svg: SVGSVGElement) => any
+}
+```
+
+#### preserveDimensions
+
+`preserveDimensions` 用来控制导出 `svg` 的尺寸, 如果不设置，`width` 和 `height` 默认为 `100%`；如果设置为 `true`, `width` 和 `height` 会自动计算为图形区域的实际大小。还可以通过以下方式自定义尺寸：
+
+```ts
+this.graph.toSVG((dataUri: string) => {
+  // todo
+}, {
+  preserveDimensions: {
+    width: 100,
+    height: 100,
+  }
+})
+```
+
+#### viewBox
+
+设置导出 `svg` 的 `viewBox`
+
+#### copyStyles
+
+是否复制外部样式表中的样式，默认是 `true`。
+
+#### stylesheet
+
+自定义样式表
+
+#### serializeImages
+
+是否将 `image` 元素的 `xlink:href` 链接转化为 `dataUri` 格式
+
+#### beforeSerialize
+
+可以在导出 `svg` 字符串之前调用 `beforeSerialize` 来修改它。
+

sites/x6-sites/docs/tutorial/basic/port.en.md

@@ -684,3 +684,11 @@ graph.addNode({
 ```
 
 <iframe src="/demos/tutorial/basic/port/best-practice"></iframe>
+
+## 使用 React 渲染连接桩
+
+除了上面的方式，还可以用 React 组件来渲染连接桩，先看效果：
+
+<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
+
+详细使用见[渲染链接桩](../advanced/react#渲染链接桩)

sites/x6-sites/docs/tutorial/basic/port.zh.md

@@ -684,3 +684,11 @@ graph.addNode({
 ```
 
 <iframe src="/demos/tutorial/basic/port/best-practice"></iframe>
+
+## 使用 React 渲染连接桩
+
+除了上面的方式，还可以用 React 组件来渲染连接桩，先看效果：
+
+<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
+
+详细使用见[渲染链接桩](../advanced/react#渲染链接桩)

sites/x6-sites/docs/tutorial/faq/epilog.en.md

@@ -101,7 +101,7 @@ graph.addNode({
   ]
 });
 
-graph.on("ndoe:click", () => {
+graph.on("port:click", () => {
   // handle
 });
 ```

sites/x6-sites/docs/tutorial/faq/epilog.zh.md

@@ -101,7 +101,7 @@ graph.addNode({
   ]
 });
 
-graph.on("ndoe:click", () => {
+graph.on("port:click", () => {
   // handle
 });
 ```