Skip to content

Commit ce5c1e6

Browse files
liuziqiboyongjiong
liuziqi
authored and
boyongjiong
committed
fix(docs): 新增英文文档&优化注释
1 parent e882474 commit ce5c1e6

File tree

2 files changed

+99
-1
lines changed

2 files changed

+99
-1
lines changed

‎packages/extension/src/tools/proximity-connect/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export class ProximityConnect {
8888
handleNodeDrag() {
8989
/**
9090
* 主要做几件事情
91-
* 判断当前是否有连线，有的话判断两点距离是否超过阈值，超过的话删除连线
91+
* 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
9292
* 遍历画布上的所有节点，找到距离最近的节点，获取其所有锚点数据
9393
* 判断每个锚点与当前选中节点的所有锚点之间的距离，找到路路径最短的两个点时，把当前节点、当前锚点当前最短记录记录下来，作为当前最近数据
9494
* 判断当前最短距离是否小于阈值

‎sites/docs/docs/tutorial/extension/proximity-connect.en.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
nav: Guide
3+
group:
4+
title: Plugin Function
5+
order: 3
6+
title: Progressive Connection
7+
order: 6
8+
toc: content
9+
tag: New Plugin
10+
---
11+
12+
Progressive Connection is a dynamic interaction method in flowchart tools. Through dynamic interaction and intelligent adsorption, it helps users achieve accurate connection between nodes during the dragging process. It simplifies the operation and improves the efficiency and experience of complex process design.
13+
14+
## Demo
15+
16+
<code id="react-portal" src="@/src/tutorial/extension/proximity-connect"></code>
17+
18+
## Functional introduction
19+
This plugin supports progressive connection in two scenarios:
20+
- Drag node connection: When the mouse drags the node to move, find the nearest connectable anchor point connection according to the current node position
21+
- Drag anchor point connection: When the mouse drags the node anchor point, find the nearest connectable anchor point connection according to the current mouse position
22+
23+
The plugin will listen to the following events and take some actions
24+
| Event | Plugin Behavior |
25+
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
26+
| node:dragstart | Store the currently dragged node data in the plugin |
27+
| node:drag | 1. Traverse all nodes on the canvas, calculate the distance between each anchor point on each node and each anchor point on the currently dragged node, find the shortest distance and a group of connectable anchor points and store them<br/>2. Determine whether the current shortest distance is less than the threshold. If so, create a virtual edge to show the final connection effect |
28+
| node:drop | Delete the virtual edge and create a real edge |
29+
| anchor:dragstart | Store the data of the currently dragged node and the trigger anchor point in the plug-in |
30+
| anchor:drag | 1. Traverse all nodes on the canvas, find an anchor point that is the shortest distance from the current mouse position and can be connected and store it in the plug-in<br/>2. Determine whether the current shortest distance is less than the threshold. If so, create a virtual edge to show the final connection effect |
31+
| anchor:dragend | Delete the virtual edge and create the real edge |
32+
33+
> Some Tips:
34+
> 1. Before finding the anchor point, it will first determine whether there is a connection with the same anchor point and direction on the current canvas. If so, no connection will be created;
35+
> 2. During the process of finding the anchor point, the anchor point data will be first obtained to determine whether the current set of anchor points can be connected. If not, no virtual edge will be generated;
36+
37+
## Use plug-ins
38+
39+
```tsx | purex | pure
40+
import LogicFlow from "@logicflow/core";
41+
import { ProximityConnect } from "@logicflow/extension";
42+
import "@logicflow/core/es/index.css";
43+
import "@logicflow/extension/lib/style/index.css";
44+
45+
// Two ways of using
46+
// Import the plugin through the use method
47+
LogicFlow.use(ProximityConnect);
48+
49+
// Or enable the plugin through the configuration item (you can configure the plugin properties)
50+
const lf = new LogicFlow({
51+
container: document.querySelector('#app'),
52+
plugins: [ProximityConnect],
53+
pluginsOptions: {
54+
proximityConnect: {
55+
// enable, // Whether the plugin is enabled
56+
// distance, // Progressive connection threshold
57+
// reverseDirection, // Connection direction
58+
}
59+
},
60+
});
61+
```
62+
63+
## Configuration items
64+
65+
Each function in the menu can be represented by a configuration item. The specific fields are as follows:
66+
67+
| Field | Type | Default value | Required | Description |
68+
| ---------------- | ------- | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69+
| enable | boolean | `true` | | Enable the plugin |
70+
| distance | number | 100 | | Gradual connection threshold |
71+
| reverseDirection | boolean | false | | Whether to create a reverse connection<br/>The default connection direction is that the currently dragged node points to the nearest node<br/>When set to true, the nearest node will point to the currently dragged node |
72+
| virtualEdgeStyle | object | { strokeDasharray: '10,10', stroke: '#acacac' } | | Virtual line style |
73+
74+
## API
75+
### setThresholdDistance(distance)
76+
Used to modify the connection threshold
77+
78+
```ts
79+
setThresholdDistance = (distance: 'number'): void => {}
80+
```
81+
### setReverseDirection(reverse)
82+
Used to modify the direction of creating a connection
83+
84+
```ts
85+
setReverseDirection = (reverse: 'boolean'): void => {}
86+
```
87+
### setEnable(enable)
88+
Used to set the plug-in enable status
89+
90+
```ts
91+
setEnable = (enable: 'boolean'): void => {}
92+
```
93+
### setVirtualEdgeStyle(style)
94+
Set the virtual edge style
95+
96+
```ts
97+
setVirtualEdgeStyle = (style: 'Record<string, unknown>'): void => {}
98+
```

0 commit comments

Comments
 (0)