docs/guide/basic/dnd.md · SyncGithub/LogicFlow

Fetch the repository succeeded.

Scan WeChat QR to Pay

Cancel

Complete

richgiteeai

Watch

Unwatch Watching Releases Only Ignoring

1 Star 6 Fork 1

SyncGithub/LogicFlow

Code Issues 0 Pull Requests 0 Wiki Insights Pipelines

Service

Tencent Cloud Serverless

Create your Gitee Account

Explore and code with more than 14 million developers,Free private repositories !:)

Already have an account? Sign in

文件

master

Branches (3)

Tags (236)

Manage

master

gh-pages

1.0.0-next

@logicflow/core@0.7.6

@logicflow/extension@0.7.6

examples@0.7.15

@logicflow/core@0.7.5

@logicflow/extension@0.7.5

examples@0.7.14

@logicflow/core@0.7.4

@logicflow/extension@0.7.4

examples@0.7.13

@logicflow/core@0.7.3

@logicflow/extension@0.7.3

examples@0.7.12

0.7.2

@logicflow/core@0.7.2

@logicflow/extension@0.7.2

examples@0.7.11

@logicflow/core@0.7.1

@logicflow/extension@0.7.1

examples@0.7.10

@logicflow/core@0.7.1-alpha.0

Clone or Download

Clone/Download

HTTPS SSH SVN SVN+SSH Download ZIP

Prompt

To download the code, please copy the following command and execute it in the terminal

To ensure that your submitted code identity is correctly recognized by Gitee, please execute the following command.

git config --global user.name userName 
git config --global user.email userEmail

When using the SSH protocol for the first time to clone or push code, follow the prompts below to complete the SSH configuration.

1 Generate RSA keys.

2 Obtain the content of the RSA public key and configure it in SSH Public Keys

To use SVN on Gitee, please visit the usage guide

When using the HTTPS protocol, the command line will prompt for account and password verification as follows. For security reasons, Gitee recommends configure and use personal access tokens instead of login passwords for cloning, pushing, and other operations.

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # Private Token

Branches 3

Tags 236

LogicFlow

docs

guide

basic

dnd.md

dnd.md 2.74 KB

# 拖拽 Dnd

> 在流程图编辑场景中比起通过代码配置注册节点以外,我们可能更需要通过图形用户界面来操作创建流程图,这时候就可以通过拖拽的方式来实现。

拖拽需要结合图形面板来实现,步骤:创建面板 → 拖拽初始化 → 监听drop事件创建节点

示例如下:

```js
// 顶层App组件,渲染画布,对图形面板绑定拖拽事件
export default class App extends Component<IProps, IState> {
 lf: LogicFlow;
 componentDidMount() {
 this.lf = new LogicFlow({
 container: document.querySelector('#graph'),
 width: 700,
 height: 600,
 });
 this.lf.render();
 }
 mouseDownHandle = config => {
 this.lf.dnd.startDrag(config);
 };
 render() {
 return (
 <div className="designer">
 <Panel mouseDownHandle={this.mouseDownHandle} />
 <div
 className="viewport"
 id="graph"
 />
 </div>
 );
 }
}
// Panel组件
export default class Panel extends Component<IProps, IState> {
 constructor() {
 super();
 this.state = {
 shapeList: [
 {
 type: 'rect',
 text: '矩形',
 },
 {
 type: 'circle',
 text: '圆形',
 },
 ],
 };
 }
 mouseDown({ type, text }) {
 const { mouseDownHandle } = this.props;
 mouseDownHandle({
 type,
 text,
 });
 }
 render() {
 const { shapeList } = this.state;
 return (
 <div>
 {shapeList.map(shape => {
 const { type, text } = shape;
 return (
 <div className="panel-item">
 <div
 className={`panel-${type}`}
 onMouseDown={() => { this.mouseDown(shape); }}
 />
 <span>{text}</span>
 </div>
 );
 })}
 </div>
 );
 }
}

```

通过上面的代码可以看出,将节点通过`div`标签+`css`样式的方式绘制到面板中,并为其绑定`onMouseDown`事件,当拖拽图形时,会触发`lf.dnd.startDrag`函数,表示开始拖拽,并传入选中图形的配置,`startDrag`入参格式:

```js
startDrag(nodeConfig: NodeConfig):void

type NodeConfig = {
 id?: string;
 type: string;
 x: number;
 y: number;
 text?: TextConfig;
 properties?: Record<string, unknown>;
};
```

拖拽结束鼠标松开时,将当前鼠标的位置转换为画布上的坐标,并以此为节点的中心点坐标`x`、`y`,合并拖拽节点传入的`nodeConfig`,监听到drop事件后会调用`lf.addNode`方法创建节点。

> 注意:如果是用图片作为配置面板中添加节点的元素,需要将其设置为不可拖动的。详细请参考[#267](https://github.com/didi/LogicFlow/issues/267)

Copy Edit Raw Blame History

towersxu authored 2021年08月16日 20:22 +08:00 . fix: editconfig default type

# 拖拽 Dnd

> 在流程图编辑场景中比起通过代码配置注册节点以外,我们可能更需要通过图形用户界面来操作创建流程图,这时候就可以通过拖拽的方式来实现。

拖拽需要结合图形面板来实现,步骤:创建面板 → 拖拽初始化 → 监听drop事件创建节点

示例如下: