feat(extension): 新增渐进连线插件&插件说明文档&增加源码调试示例

Author: liuziqi

examples/feature-examples/.umirc.ts

@@ -199,6 +199,11 @@ export default defineConfig({
           name: 'RectLabelNode 插件',
           component: './extensions/rect-label-node',
         },
+        {
+          path: '/extension/proximity-connect',
+          name: 'Proximity Connect 插件',
+          component: './extensions/proximity-connect',
+        },
       ],
     },
     {

examples/feature-examples/src/pages/extensions/control/index.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
 import styles from './index.less'
 
 import '@logicflow/core/es/index.css'
-// import '@logicflow/extension/es/index.css'
+import '@logicflow/extension/es/index.css'
 
 const config: Partial<LogicFlow.Options> = {
   isSilentMode: false,

examples/feature-examples/src/pages/extensions/proximity-connect/index.less

@@ -0,0 +1,5 @@
+.viewport {
+  position: relative;
+  height: 80vh;
+  overflow: hidden;
+}

examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx

@@ -0,0 +1,204 @@
+import LogicFlow from '@logicflow/core'
+import { ProximityConnect } from '@logicflow/extension'
+
+import {
+  Space,
+  Input,
+  Button,
+  Card,
+  Divider,
+  Row,
+  Col,
+  Form,
+  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'
+
+const config: Partial<LogicFlow.Options> = {
+  isSilentMode: false,
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+  style: {
+    rect: {
+      rx: 5,
+      ry: 5,
+      strokeWidth: 2,
+    },
+    circle: {
+      fill: '#f5f5f5',
+      stroke: '#666',
+    },
+    ellipse: {
+      fill: '#dae8fc',
+      stroke: '#6c8ebf',
+    },
+    polygon: {
+      fill: '#d5e8d4',
+      stroke: '#82b366',
+    },
+    diamond: {
+      fill: '#ffe6cc',
+      stroke: '#d79b00',
+    },
+    text: {
+      color: '#b85450',
+      fontSize: 12,
+    },
+  },
+}
+
+const data = {
+  nodes: [
+    {
+      id: '1',
+      type: 'rect',
+      x: 150,
+      y: 100,
+      text: '矩形',
+    },
+    {
+      id: '2',
+      type: 'circle',
+      x: 550,
+      y: 100,
+      text: '圆形',
+    },
+    {
+      id: '3',
+      type: 'ellipse',
+      x: 950,
+      y: 100,
+      text: '椭圆',
+    },
+    {
+      id: '4',
+      type: 'polygon',
+      x: 150,
+      y: 350,
+      text: '多边形',
+    },
+    {
+      id: '5',
+      type: 'diamond',
+      x: 550,
+      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>(100)
+  const [reverse, setReverse] = useState<boolean>(false)
+  const [enable, setEnable] = useState<boolean>(true)
+  useEffect(() => {
+    if (!lfRef.current) {
+      const lf = new LogicFlow({
+        ...config,
+        container: containerRef.current as HTMLElement,
+        // container: document.querySelector('#graph') as HTMLElement,
+        grid: {
+          size: 10,
+        },
+        plugins: [ProximityConnect],
+        pluginsOptions: {
+          proximityConnect: {
+            enable,
+            distance,
+            reverseDirection: reverse,
+          },
+        },
+      })
+
+      lf.render(data)
+      lfRef.current = lf
+    }
+  }, [])
+
+  return (
+    <Card title="LogicFlow Extension - Control">
+      <Row>
+        <Col span={8}>
+          <Form.Item label="连线阈值：">
+            <Input
+              value={distance}
+              style={{ width: '180px' }}
+              onInput={(e) => {
+                setDistance(+e.target.value)
+              }}
+            />
+            <Button
+              type="primary"
+              onClick={() => {
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setThresholdDistance(distance)
+                }
+              }}
+            >
+              Submit
+            </Button>
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="连线方向：">
+            <Switch
+              value={reverse}
+              checkedChildren="最近节点 → 拖拽节点"
+              unCheckedChildren="拖拽节点 → 最近节点"
+              onChange={(checked) => {
+                setReverse(checked)
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setReverseDirection(checked)
+                }
+              }}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="启用状态：">
+            <Switch
+              value={enable}
+              checkedChildren="启用"
+              unCheckedChildren="禁用"
+              onChange={(checked) => {
+                setEnable(checked)
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).setEnable(checked)
+                }
+              }}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Space.Compact style={{ width: '100%' }}></Space.Compact>
+      <Divider />
+      <div ref={containerRef} id="graph" className={styles.viewport}></div>
+    </Card>
+  )
+}

packages/extension/src/index.ts

@@ -19,6 +19,7 @@ export * from './tools/label'
 export * from './tools/snapshot'
 export * from './tools/flow-path'
 export * from './tools/auto-layout'
+export * from './tools/proximity-connect'
 
 // Component -> 流程图中交互组件
 export * from './components/control'