fix(docs): 优化文档内容和示例

didi · Nov 20, 2024 · 28afcb1 · 28afcb1
1 parent 3af6cec
commit 28afcb1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 64 deletions.
diff --git a/examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx b/examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx
@@ -165,8 +165,8 @@ export default function ProximityConnectExtension() {
           <Form.Item label="连线方向：">
             <Switch
               value={reverse}
-              checkedChildren="拖拽节点 → 最近节点"
-              unCheckedChildren="最近节点 → 拖拽节点"
+              checkedChildren="最近节点 → 拖拽节点"
+              unCheckedChildren="拖拽节点 → 最近节点"
               onChange={(checked) => {
                 setReverse(checked)
                 if (lfRef.current) {
@@ -197,15 +197,6 @@ export default function ProximityConnectExtension() {
         </Col>
       </Row>
       <Space.Compact style={{ width: '100%' }}></Space.Compact>
-      {/* <Button
-        onClick={() => {
-          if (lfRef.current) {
-            lfRef.current.history.undos = []
-          }
-        }}
-      >
-        清空 history
-      </Button> */}
       <Divider />
       <div ref={containerRef} id="graph" className={styles.viewport}></div>
     </Card>

diff --git a/sites/docs/docs/tutorial/extension/proximity-connect.zh.md b/sites/docs/docs/tutorial/extension/proximity-connect.zh.md
@@ -4,13 +4,18 @@ group:
   title: 插件功能
   order: 3
 title: 渐进连线
-order: 8
+order: 6
 toc: content
 tag: 新插件
 ---
 
 渐进连线 是流程图工具中一种动态交互方式，通过动态交互和智能吸附，帮助用户在拖拽过程中实现节点之间的精准连接。简化了操作的同时还提升了复杂流程设计的效率和体验。
 
+## 演示
+
+<code id="react-portal" src="@/src/tutorial/extension/proximity-connect"></code>
+
+
 ## 功能介绍
 本插件支持两种场景下的渐进连线：
 - 拖拽节点连线：鼠标拖拽节点移动过程中，根据当前节点的位置找距离最近的可连接的锚点连线
@@ -56,11 +61,6 @@ const lf = new LogicFlow({
 });
 ```
 
-## 演示
-
-<code id="react-portal" src="@/src/tutorial/extension/proximity-connect"></code>
-
-
 ## 配置项
 
 菜单中的每一项功能，可以用一条配置进行表示。具体字段如下:
@@ -74,24 +74,21 @@ const lf = new LogicFlow({
 
 
 ## API
-### lf.extension.proximityConnect.setThresholdDistance(distance)
+### setThresholdDistance(distance)
 用于修改连线阈值
 
 ```ts
-// 更新 Label 文本显示模式
 setThresholdDistance = (distance: 'number'): void => {}
 ```
-### lf.extension.proximityConnect.setReverseDirection(reverse)
+### setReverseDirection(reverse)
 用于修改创建连线的方向
 
 ```ts
-// 更新 Label 文本显示模式
 setReverseDirection = (reverse: 'boolean'): void => {}
 ```
-### lf.extension.proximityConnect.setEnable(enable)
+### setEnable(enable)
 用于设置插件启用状态
 
 ```ts
-// 更新 Label 文本显示模式
 setEnable = (enable: 'boolean'): void => {}
 ```
diff --git a/sites/docs/src/tutorial/extension/proximity-connect/index.tsx b/sites/docs/src/tutorial/extension/proximity-connect/index.tsx
@@ -13,7 +13,6 @@ import {
   Switch,
 } from 'antd';
 import { useEffect, useRef, useState } from 'react';
-import styles from './index.less';
 
 import '@logicflow/core/es/index.css';
 import '@logicflow/extension/es/index.css';
@@ -67,13 +66,6 @@ const data = {
       y: 100,
       text: '圆形',
     },
-    {
-      id: '3',
-      type: 'ellipse',
-      x: 950,
-      y: 100,
-      text: '椭圆',
-    },
     {
       id: '4',
       type: 'polygon',
@@ -88,29 +80,15 @@ const data = {
       y: 350,
       text: '菱形',
     },
-    {
-      id: '6',
-      type: 'text',
-      x: 950,
-      y: 350,
-      text: '纯文本节点',
-    },
-    {
-      id: '7',
-      type: 'html',
-      x: 150,
-      y: 600,
-      text: 'html节点',
-    },
   ],
 };
 
 export default function ProximityConnectExtension() {
   const lfRef = useRef<LogicFlow>();
   const containerRef = useRef<HTMLDivElement>(null);
-  const [distance, setDistance] = useState<number>(20);
+  const [distance, setDistance] = useState<number>(100);
   const [reverse, setReverse] = useState<boolean>(false);
-  const [enable, setEnable] = useState<boolean>(false);
+  const [enable, setEnable] = useState<boolean>(true);
   useEffect(() => {
     if (!lfRef.current) {
       const lf = new LogicFlow({
@@ -136,13 +114,13 @@ export default function ProximityConnectExtension() {
   }, []);
 
   return (
-    <Card title="LogicFlow Extension - Control">
+    <Card title="LogicFlow Extension - proximity-connect">
       <Row>
-        <Col span={8}>
+        <Col span={24}>
           <Form.Item label="连线阈值：">
             <Input
               value={distance}
-              style={{ width: '180px' }}
+              style={{ width: '200px' }}
               onInput={(e) => {
                 setDistance(+e.target.value);
               }}
@@ -161,12 +139,12 @@ export default function ProximityConnectExtension() {
             </Button>
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item label="连线方向：">
             <Switch
               value={reverse}
-              checkedChildren="拖拽节点 → 最近节点"
-              unCheckedChildren="最近节点 → 拖拽节点"
+              checkedChildren="最近节点 → 拖拽节点"
+              unCheckedChildren="拖拽节点 → 最近节点"
               onChange={(checked) => {
                 setReverse(checked);
                 if (lfRef.current) {
@@ -178,7 +156,7 @@ export default function ProximityConnectExtension() {
             />
           </Form.Item>
         </Col>
-        <Col span={8}>
+        <Col span={12}>
           <Form.Item label="启用状态：">
             <Switch
               value={enable}
@@ -197,17 +175,8 @@ export default function ProximityConnectExtension() {
         </Col>
       </Row>
       <Space.Compact style={{ width: '100%' }}></Space.Compact>
-      {/* <Button
-        onClick={() => {
-          if (lfRef.current) {
-            lfRef.current.history.undos = []
-          }
-        }}
-      >
-        清空 history
-      </Button> */}
       <Divider />
-      <div ref={containerRef} id="graph" className={styles.viewport}></div>
+      <div ref={containerRef} id="graph" style={{ height: '500px' }}></div>
     </Card>
   );
 }