Skip to content

Commit

Permalink
feat(docs): 增加插件说明文档
Browse files Browse the repository at this point in the history
  • Loading branch information
liuziqi committed Nov 20, 2024
1 parent bc99d32 commit 3af6cec
Show file tree
Hide file tree
Showing 6 changed files with 333 additions and 11 deletions.
9 changes: 8 additions & 1 deletion examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const data = {
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>(true)
useEffect(() => {
Expand All @@ -121,6 +121,13 @@ export default function ProximityConnectExtension() {
size: 10,
},
plugins: [ProximityConnect],
pluginsOptions: {
proximityConnect: {
enable,
distance,
reverseDirection: reverse,
},
},
})

lf.render(data)
Expand Down
4 changes: 2 additions & 2 deletions packages/extension/src/tools/proximity-connect/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ export class ProximityConnect {
stroke: '#acacac',
} // 虚拟边样式

constructor({ lf, props }: LogicFlow.IExtensionProps) {
constructor({ lf, options }: LogicFlow.IExtensionProps) {
this.lf = lf
assign(this, props)
assign(this, options)
}
render() {
this.addEventListenders()
Expand Down
16 changes: 8 additions & 8 deletions sites/docs/docs/tutorial/extension/label.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ const lf = new LogicFlow({

### 插件级

菜单中的每一项功能，可以用一条配置进行表示。具体字段如下:

| 字段 | 类型 | 默认值 | 是否必须 | 描述 |
|------------------|---------------------------------------------------------|------------|------|-------------------------------------------|
| isMultiple | boolean | `true` | | 是否允许一个节点或边拥有多个 Label |
| maxCount | number | `Infinity` | | 当允许多个 Label 时，限制 Label 的最大数量 |
| labelWidth | number | - | | 每个 Label 的宽度，可以统一设置配合 textOverflowMode 使用 |
| textOverflowMode | 'ellipsis' \| 'wrap' \| 'clip' \| 'nowrap' \| 'default' | `default` | | 文本溢出显示模式，配合 CSS 样式实现，与 CSS 配置项表现一致。 |
Label插件支持一些初始化属性。具体字段如下:

| 字段 | 类型 | 默认值 | 是否必须 | 描述 |
| ---------------- | ------------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------ |
| isMultiple | boolean | `true` | | 是否允许一个节点或边拥有多个 Label |
| maxCount | number | `Infinity` | | 当允许多个 Label 时，限制 Label 的最大数量 |
| labelWidth | number | - | | 每个 Label 的宽度，可以统一设置配合 textOverflowMode 使用 |
| textOverflowMode | 'ellipsis' \| 'wrap' \| 'clip' \| 'nowrap' \| 'default' | `default` | | 文本溢出显示模式，配合 CSS 样式实现，与 CSS 配置项表现一致。 |

### 元素级

Expand Down
97 changes: 97 additions & 0 deletions sites/docs/docs/tutorial/extension/proximity-connect.zh.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
---
nav: 指南
group:
title: 插件功能
order: 3
title: 渐进连线
order: 8
toc: content
tag: 新插件
---

渐进连线 是流程图工具中一种动态交互方式，通过动态交互和智能吸附，帮助用户在拖拽过程中实现节点之间的精准连接。简化了操作的同时还提升了复杂流程设计的效率和体验。

## 功能介绍
本插件支持两种场景下的渐进连线：
- 拖拽节点连线：鼠标拖拽节点移动过程中，根据当前节点的位置找距离最近的可连接的锚点连线
- 拖拽锚点连线：鼠标拖拽节点锚点过程中，根据鼠标当前所在位置找到距离最近的可连接的锚点连线

插件内部会监听以下几个事件，做一些动作
| 事件 | 插件行为 |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| node:dragstart | 将当前拖拽的节点数据存储到插件中 |
| node:drag | 1. 遍历画布上所有节点，计算每个节点上每个锚点与当前拖拽节点上每个锚点的距离，找出距离最短且可以连线的一组锚点存储下来<br/>2. 判断当前最短距离是否小于阈值，是的话就创建一条虚拟边，展示最终连线效果 |
| node:drop | 删除虚拟边，创建真实边 |
| anchor:dragstart | 将当前拖拽的节点和触发锚点的数据存储到插件中 |
| anchor:drag | 1. 遍历画布上所有节点，找出距离当前鼠标所在位置最短且可以连线的一个锚点存储到插件中<br/>2. 判断当前最短距离是否小于阈值，是的话就创建一条虚拟边，展示最终连线效果 |
| anchor:dragend | 删除虚拟边，创建真实边 |

> 一些Tip：
> 1. 找锚点前会先判断目前画布上是否已有同锚点同方向的连线，如果有，不会再创建连线；
> 2. 找锚点过程中会先取锚点数据判断当前的一组锚点是否可连线，如果不可连线不会生成虚拟边；
## 使用插件

```tsx | purex | pure
import LogicFlow from "@logicflow/core";
import { ProximityConnect } from "@logicflow/extension";
import "@logicflow/core/es/index.css";
import "@logicflow/extension/lib/style/index.css";

// 两种使用方式
// 通过 use 方法引入插件
LogicFlow.use(ProximityConnect);

// 或者通过配置项启用插件（可以配置插件属性）
const lf = new LogicFlow({
container: document.querySelector('#app'),
plugins: [ProximityConnect],
pluginsOptions: {
proximityConnect: {
// enable, // 插件是否启用
// distance, // 渐进连线阈值
// reverseDirection, // 连线方向
}
},
});
```

## 演示

<code id="react-portal" src="@/src/tutorial/extension/proximity-connect"></code>


## 配置项

菜单中的每一项功能，可以用一条配置进行表示。具体字段如下:

| 字段 | 类型 | 默认值 | 是否必须 | 描述 |
| ---------------- | ------- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------- |
| enable | boolean | `true` | | 是否启用插件 |
| distance | number | 100 | | 渐进连线阈值 |
| reverseDirection | boolean | false | | 是否创建反向连线<br/>默认连线方向是当前拖拽的节点指向最近的节点<br/>设置为true后会变为最近的节点指向当前拖拽节点 |



## API
### lf.extension.proximityConnect.setThresholdDistance(distance)
用于修改连线阈值

```ts
// 更新 Label 文本显示模式
setThresholdDistance = (distance: 'number'): void => {}
```
### lf.extension.proximityConnect.setReverseDirection(reverse)
用于修改创建连线的方向

```ts
// 更新 Label 文本显示模式
setReverseDirection = (reverse: 'boolean'): void => {}
```
### lf.extension.proximityConnect.setEnable(enable)
用于设置插件启用状态

```ts
// 更新 Label 文本显示模式
setEnable = (enable: 'boolean'): void => {}
```
5 changes: 5 additions & 0 deletions sites/docs/src/tutorial/extension/proximity-connect/index.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.viewport {
position: relative;
height: 80vh;
overflow: hidden;
}
213 changes: 213 additions & 0 deletions sites/docs/src/tutorial/extension/proximity-connect/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
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>(20);
const [reverse, setReverse] = useState<boolean>(false);
const [enable, setEnable] = useState<boolean>(false);
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>
{/* <Button
onClick={() => {
if (lfRef.current) {
lfRef.current.history.undos = []
}
}}
>
清空 history
</Button> */}
<Divider />
<div ref={containerRef} id="graph" className={styles.viewport}></div>
</Card>
);
}

0 comments on commit 3af6cec

Please sign in to comment.