update xflow demo and docs (antvis#4190)

* fix: delete xflow wrapper and xflow components docs * fix: update xflow graph demo * fix: update xflow store docs * fix: update xflow hooks demo * fix: update xflow components demo
xiawenqi · Jan 31, 2024 · d0609d5 · d0609d5
1 parent b6fe9d2
commit d0609d5
Show file tree

Hide file tree

Showing 34 changed files with 1,164 additions and 1,255 deletions.
diff --git a/sites/x6-sites/docs/xflow/components/background.md b/sites/x6-sites/docs/xflow/components/background.md
@@ -1,6 +1,6 @@
 ---
 title: Background 背景
-order: 3
+order: 1
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/clipboard.md b/sites/x6-sites/docs/xflow/components/clipboard.md
@@ -1,6 +1,6 @@
 ---
 title: Clipboard 复制粘贴
-order: 5
+order: 3
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/control.md b/sites/x6-sites/docs/xflow/components/control.md
@@ -1,6 +1,6 @@
 ---
 title: Control 控制器
-order: 10
+order: 8
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/graph.md b/sites/x6-sites/docs/xflow/components/graph.md
@@ -1,6 +1,6 @@
 ---
 title: XFlowGraph 画布
-order: 2
+order: 0
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/grid.md b/sites/x6-sites/docs/xflow/components/grid.md
@@ -1,6 +1,6 @@
 ---
 title: Grid 网格
-order: 4
+order: 2
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/history.md b/sites/x6-sites/docs/xflow/components/history.md
@@ -1,6 +1,6 @@
 ---
 title: History 撤销重做
-order: 6
+order: 4
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/minimap.md b/sites/x6-sites/docs/xflow/components/minimap.md
@@ -1,6 +1,6 @@
 ---
 title: Minimap 小地图
-order: 7
+order: 5
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/snapline.md b/sites/x6-sites/docs/xflow/components/snapline.md
@@ -1,6 +1,6 @@
 ---
 title: Snapline 对齐线
-order: 8
+order: 6
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/transform.md b/sites/x6-sites/docs/xflow/components/transform.md
@@ -1,6 +1,6 @@
 ---
 title: Transform 图形变换
-order: 9
+order: 7
 redirect_from:
   - /zh/docs
   - /zh/docs/xflow

diff --git a/sites/x6-sites/docs/xflow/components/wrapper.md b/sites/x6-sites/docs/xflow/components/wrapper.md
diff --git a/sites/x6-sites/docs/xflow/components/xflow.md b/sites/x6-sites/docs/xflow/components/xflow.md
diff --git a/sites/x6-sites/docs/xflow/guide/quick-start.md b/sites/x6-sites/docs/xflow/guide/quick-start.md
@@ -29,22 +29,6 @@ $ yarn add @antv/xflow
 $ pnpm add @antv/xflow
 ```
 
-## 通过 CDN
-
-你可以借助 script 标签直接通过 CDN 来使用 XFlow：
-
-```html
-<script src="https://unpkg.com/@antv/xflow/dist/index.umd.js"></script>
-```
-
-这里我们使用了 [unpkg](https://unpkg.com/@antv/xflow/dist/index.umd.js)，但你也可以使用任何提供 npm 包服务的 CDN，例如 [jsdelivr](https://cdn.jsdelivr.net/npm/@antv/xflow/dist/index.umd.js)。当然你也可以下载此文件并自行提供服务。
-
-对于生产环境, 我们推荐使用一个明确的版本号, 以避免新版本升级造成不可预期的破坏, 例如：
-
-- <https://unpkg.com/@antv/[email protected]/dist/index.umd.js>
-
-- <https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/index.umd.js>
-
 # 基础使用
 
 接下来我们就一起使用 XFlow 来构建一个简单的图形应用，来体验一下 XFlow 的魅力吧。

diff --git a/sites/x6-sites/docs/xflow/store.md b/sites/x6-sites/docs/xflow/store.md
@@ -80,9 +80,3 @@ xflow 对画布的数据进行了统一的管理，整个画布的数据存在
 - `id`：要更新的边的ID。
 - `data`：一个对象或者一个函数，包含要更新的数据。
 - `options`：一个可选的对象。当`{ silent: true }`时，更新操作不会被记录在变动列表中。
-
-## 变动列表操作
-
-### `clearChangeList()`
-
-清空变动列表`changeList`，这个列表记录了所有非静默（非silent）的操作。
diff --git a/sites/x6-sites/src/xflow/components/clipboard/index.tsx b/sites/x6-sites/src/xflow/components/clipboard/index.tsx
@@ -1,13 +1,6 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  useClipboard,
-  Clipboard,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Slider, Checkbox, Button, Badge } from 'antd'
+import { XFlow, XFlowGraph, Background, Clipboard } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -30,125 +23,3 @@ const Page = () => {
 }
 
 export default Page
-
-const Setting = (props) => {
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-        {
-          id: '2',
-          shape: 'circle',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-        },
-      ],
-      edges: [
-        {
-          source: '1',
-          target: '2',
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-  const [offset, setOffset] = useState(30)
-  const nodes = useGraphStore((state) => state.nodes)
-  const { copy, paste } = useClipboard()
-
-  const onCopy = () => {
-    const selected = nodes.filter((node) => node.selected)
-    const ids: string[] = selected.map((node) => node.id || '')
-    copy(ids)
-  }
-
-  const onPaste = () => {
-    paste({ offset })
-  }
-
-  return (
-    <div>
-      <Card title="Card title" bordered={false}>
-        <Row align="middle">
-          <Col span={10}>Paste Offset</Col>
-          <Col span={2} offset={1}>
-            <Badge
-              overflowCount={999}
-              count={offset}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Slider
-              min={1}
-              max={80}
-              step={1}
-              value={offset}
-              onChange={(value) => setOffset(value)}
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              checked={props.value}
-              onChange={(e) => props.setLocalStorage(e.target.checked)}
-            >
-              useLocalStorage
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={10}>
-            <Button type="primary" onClick={onCopy}>
-              Copy Cell
-            </Button>
-          </Col>
-          <Col span={10} offset={4}>
-            <Button onClick={onPaste}>Paste Cell</Button>
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}