docs(playground): update playground docs (#563)

apps/docs/src/en/api/core/playground.mdx

@@ -16,13 +16,30 @@ Canvas configuration, provides zoom, scroll, etc.
 
 [> API Detail](https://flowgram.ai/auto-docs/core/classes/PlaygroundConfigEntity.html)
 
-### Properties
+### updateConfig
 - zoom `number` Current zoom ratio
-- scrollData `{ scrollX: number, scrollY: number }` Current scroll position
-- readonlyOrDisabled `boolean` Whether the canvas is readonly or disabled
+- scrollX
+- scrollY
+- minZoom
+- maxZoom
 - readonly
 - disabled
+- width
+- height
 
+```ts pure
+// get current config state
+ctx.playground.config.config.zoom
+ctx.playground.config.config.readonly
+
+// updateConfig
+ctx.playground.config.updateConfig({
+  zoom: 0.8,
+  minZoom: 0.1,
+  maxZoom: 2,
+  readonly: true
+})
+```
 
 ### fitView
 
@@ -35,7 +52,7 @@ Node fit canvas window, need to pass in the node's bounds
  * @param easing {number} Whether to start animation, default is true
  * @param padding {number} Boundary padding
  */
-ctx.playground.config.fitView(ctx.document.root.bounds, true, 10)
+ctx.playground.config.fitView(node.bounds, true, 10)
 ```
 
 ### scrollToView
@@ -90,10 +107,10 @@ Scroll canvas, need to pass in the scroll position, and whether to smooth scroll
 ctx.playground.config.scroll({ scrollX: 100, scrollY: 100 }, true, 300)
 ```
 
-### getViewport
+### isViewportVisible
 
-Get the current canvas viewport size
+Determine whether the current node is within the viewport
 
 ```ts pure
-const viewport = ctx.playground.config.getViewport()
+ctx.playground.config.isViewportVisible(node.bounds)
 ```

apps/docs/src/en/guide/advanced/_meta.json

@@ -16,6 +16,7 @@
     "name": "variable",
     "label": "Variable"
   },
+  "zoom-scroll",
   "history",
   "shortcuts",
   "minimap",

apps/docs/src/en/guide/advanced/zoom-scroll.mdx

@@ -0,0 +1,4 @@
+# Scroll And Zoom
+
+[> See Playground](/api/core/playground.html)
+

apps/docs/src/zh/api/core/playground.mdx

@@ -16,13 +16,30 @@ console.log(ctx.playground)
 
 [> API Detail](https://flowgram.ai/auto-docs/core/classes/PlaygroundConfigEntity.html)
 
-### Properties
+### updateConfig
 - zoom `number` 当前缩放比例
-- scrollData `{ scrollX: number, scrollY: number }` 当前滚动位置
-- readonlyOrDisabled 画布是否为 readonly 或 disabled 状态
+- scrollX
+- scrollY
+- minZoom
+- maxZoom
 - readonly
 - disabled
+- width
+- height
 
+```ts pure
+// get current config state
+ctx.playground.config.config.zoom
+ctx.playground.config.config.readonly
+
+// updateConfig
+ctx.playground.config.updateConfig({
+  zoom: 0.8,
+  minZoom: 0.1,
+  maxZoom: 2,
+  readonly: true
+})
+```
 
 ### fitView
 
@@ -35,7 +52,7 @@ console.log(ctx.playground)
  * @param easing {number} 是否开启动画，默认开启
  * @param padding {number} 边界空白
  */
-ctx.playground.config.fitView(ctx.document.root.bounds, true, 10)
+ctx.playground.config.fitView(node.bounds, true, 10)
 ```
 
 ### scrollToView
@@ -90,10 +107,11 @@ const pos: { x: number, y: number } = ctx.playground.config.getPoseFromMouseEven
 ctx.playground.config.scroll({ scrollX: 100, scrollY: 100 }, true, 300)
 ```
 
-### getViewport
+### isViewportVisible
 
-获取当前画布的视窗大小
+判断当前节点是否在视窗以内
 
 ```ts pure
-const viewport = ctx.playground.config.getViewport()
+ctx.playground.config.isViewportVisible(node.bounds)
 ```
+

apps/docs/src/zh/guide/_meta.json

@@ -14,7 +14,8 @@
   {
     "type": "dir",
     "name": "concepts",
-    "label": "概念"
+    "label": "概念",
+    "collapsed": true
   },
   {
     "type": "dir",

apps/docs/src/zh/guide/advanced/_meta.json

@@ -16,6 +16,7 @@
     "name": "variable",
     "label": "变量"
   },
+  "zoom-scroll",
   "history",
   "shortcuts",
   "minimap",

apps/docs/src/zh/guide/advanced/zoom-scroll.mdx

@@ -0,0 +1,4 @@
+# 画布滚动和缩放
+
+[> 详细用法参考 Playground](/api/core/playground.html)
+